flywithu/ocsms
1
0
Fork 0
mirror of https://github.com/nerzhul/ocsms.git synced 2025-07-17 15:05:56 +00:00
Code Issues Releases Wiki Activity

Conversation header is now properly rendered

Browse Source
This commit is contained in:
Loic Blot 2018-09-06 23:34:41 +02:00 committed by Loïc Blot
parent b5f67d59f2
commit 78b5c0f915
6 changed files with 117 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/style.css
View File

@ -53,7 +53,7 @@
text-align: center; text-align: center;
} }
#ocsms-app-content { #app-conversation {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
} }

2
js/devel/app.js
View File

@ -75,3 +75,5 @@ var ContactRenderer = {
return input.charAt(0); return input.charAt(0);
} }
}; };
Vue.filter('firstCharacter', ContactRenderer.generateFirstCharacter);

17
js/devel/contactlist.js
View File

@ -68,32 +68,35 @@ var ContactList = new Vue({
var urlPhoneNumber = decodeURIComponent(pnParam); var urlPhoneNumber = decodeURIComponent(pnParam);
if (urlPhoneNumber != null) { if (urlPhoneNumber != null) {
// If no contact when loading, creating a new contact from urlPhoneNumber // If no contact when loading, creating a new contact from urlPhoneNumber
if (app.selectedContact.nav === undefined) { if (Conversation.selectedContact.nav === undefined) {
app.selectedContact.label = urlPhoneNumber; Conversation.selectedContact.label = urlPhoneNumber;
app.selectedContact.nav = urlPhoneNumber; Conversation.selectedContact.nav = urlPhoneNumber;
app.selectedContact.avatar = undefined; Conversation.selectedContact.avatar = undefined;
// Now let's loop through the contact list and see if we can find the rest of the details // Now let's loop through the contact list and see if we can find the rest of the details
for (var i = 0; i < self.contacts.length; i++) { for (var i = 0; i < self.contacts.length; i++) {
if (self.contacts[i].nav === urlPhoneNumber) { if (self.contacts[i].nav === urlPhoneNumber) {
app.selectedContact = self.contacts[i]; Conversation.selectedContact = self.contacts[i];
break; break;
} }
} }
} }
app.fetchConversation(app.selectedContact); Conversation.fetch(Conversation.selectedContact);
Sms.selectConversation($("a[mailbox-navigation='" + urlPhoneNumber + "']")); Sms.selectConversation($("a[mailbox-navigation='" + urlPhoneNumber + "']"));
} }
} }
}); });
}, },
getContactColor: function(contact_id) {
return ContactRenderer.generateColor(contact_id);
},
// Conversations // Conversations
loadConversation: function (contact) { loadConversation: function (contact) {
OC.Util.History.pushState('phonenumber=' + contact.nav); OC.Util.History.pushState('phonenumber=' + contact.nav);
// phoneNumber must exist // phoneNumber must exist
if (contact.nav !== null) { if (contact.nav !== null) {
app.fetchConversation(contact); Conversation.fetch(contact);
Sms.selectConversation($("a[mailbox-navigation='" + contact.nav + "']")); Sms.selectConversation($("a[mailbox-navigation='" + contact.nav + "']"));
} }
}, },

101
js/devel/conversation.js
View File

@ -9,17 +9,16 @@
*/ */
var Conversation = new Vue({ var Conversation = new Vue({
el: '#ocsms-app-content', el: '#app-conversation',
data: { data: {
selectedContact: {}, selectedContact: {},
isConvLoading: false, isConvLoading: false,
messages: [], messages: [],
lastConvMessageDate: 0 lastConvMessageDate: 0,
}, totalMessageCount: 0
created: function () {
}, },
methods: { methods: {
fetchConversation: function (contact) { fetch: function (contact) {
// If contact is not null, we will fetch a conversation for a new contact // If contact is not null, we will fetch a conversation for a new contact
if (contact != null) { if (contact != null) {
this.selectedContact = contact; this.selectedContact = contact;
@ -30,7 +29,7 @@ var Conversation = new Vue({
this.lastConvMessageDate = 0; this.lastConvMessageDate = 0;
var self = this; var self = this;
$.getJSON(Sms.generateURL('/front-api/v1/conversation'), {'phoneNumber': $scope.selectedContact.nav}, $.getJSON(Sms.generateURL('/front-api/v1/conversation'), {'phoneNumber': self.selectedContact.nav},
function (jsondata, status) { function (jsondata, status) {
var phoneNumberLabel = self.selectedContact.nav; var phoneNumberLabel = self.selectedContact.nav;
@ -40,25 +39,87 @@ var Conversation = new Vue({
} }
// Reinit messages before showing conversation // Reinit messages before showing conversation
app.formatConversation(jsondata); self.formatConversation(jsondata);
$scope.$apply(function () { if (typeof jsondata['contactName'] === 'undefined' || jsondata['contactName'] === '') {
if (typeof jsondata['contactName'] === 'undefined' || jsondata['contactName'] === '') { self.selectedContact.label = phoneNumberLabel;
self.selectedContact.label = phoneNumberLabel; self.selectedContact.opt_numbers = "";
self.selectedContact.opt_numbers = ""; }
} else {
else { self.selectedContact.label = jsondata['contactName'];
self.selectedContact.label = jsondata['contactName']; self.selectedContact.opt_numbers = phoneNumberLabel;
self.selectedContact.opt_numbers = phoneNumberLabel; }
}
self.totalMessageCount = jsondata['msgCount'] !== undefined ? jsondata['msgCount'] : 0; self.totalMessageCount = jsondata['msgCount'] !== undefined ? jsondata['msgCount'] : 0;
self.isConvLoading = false; self.isConvLoading = false;
});
$('#ocsms-app-content').scrollTop(1E10); $('#app-conversation').scrollTop(1E10);
} }
); );
},
getContactColor: function(contact_id) {
return ContactRenderer.generateColor(contact_id);
},
// Return (int) msgCount, (str) htmlConversation
formatConversation: function (jsondata) {
// Improve jQuery performance
var buf = false;
// Improve JS performance
var msgClass = '';
var msgCount = 0;
$.each(jsondata["conversation"], function (id, vals) {
if (vals["type"] === 1) {
msgClass = "recv";
}
else if (vals["type"] === 2) {
msgClass = "sent";
}
else {
msgClass = 'unknown';
}
// Store the greater msg date for refresher
// Note: we divide by 100 because number compare too large integers
if ((id / 100) > (this.lastConvMessageDate / 100)) {
this.lastConvMessageDate = id;
// Multiplicate ID to permit date to use it properly
this.addConversationMessage({
'id': id,
'type': msgClass,
'date': new Date(id * 1),
'content': vals['msg']
});
buf = true;
msgCount++;
}
});
return [msgCount, buf];
},
/*
* Conversation messagelist management
*/
addConversationMessage: function (msg) {
this.messages.push(msg);
},
removeConversationMessage: function (msgId) {
var len = $scope.messages.length;
var self = this;
for (var i = 0; i < len; i++) {
var curMsg = this.messages[i];
if (curMsg['id'] === msgId) {
$.post(Sms.generateURL('/delete/message'),
{
"messageId": msgId,
"phoneNumber": this.selectedContact.label
}, function (data) {
self.messages.splice(i, 1);
});
return;
}
}
} }
} }
}); });

127
js/devel/legacy.js
View File

@ -10,71 +10,18 @@
var app = angular.module('OcSms', []); var app = angular.module('OcSms', []);
// Imported from contact app
app.filter('peerColor', function () {
return ContactRenderer.generateColor;
});
app.filter('firstCharacter', function () {
return ContactRenderer.generateFirstCharacter;
});
app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile', app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile',
function ($scope, $interval, $timeout, $compile) { function ($scope, $interval, $timeout, $compile) {
$scope.lastConvMessageDate = 0; $scope.lastConvMessageDate = 0;
$scope.isConvLoading = false;
$scope.isContactsLoading = true;
$scope.buttons = [ $scope.buttons = [
{text: "Send"} {text: "Send"}
]; ];
$scope.contacts = [];
$scope.messages = []; $scope.messages = [];
$scope.totalMessageCount = 0; $scope.totalMessageCount = 0;
$scope.selectedContact = {}; $scope.selectedContact = {};
$scope.lastSearch = ''; $scope.lastSearch = '';
$scope.fetchConversation = function (contact) {
// If contact is not null, we will fetch a conversation for a new contact
if (contact != null) {
$scope.selectedContact = contact;
$scope.isConvLoading = true;
}
$scope.messages = [];
$scope.lastConvMessageDate = 0;
$.getJSON(Sms.generateURL('/front-api/v1/conversation'), {'phoneNumber': $scope.selectedContact.nav},
function (jsondata, status) {
var phoneNumberLabel = $scope.selectedContact.nav;
if (typeof jsondata['phoneNumbers'] !== 'undefined') {
var phoneNumberList = arrayUnique(jsondata['phoneNumbers']);
phoneNumberLabel = phoneNumberList.toString();
}
// Reinit messages before showing conversation
$scope.formatConversation(jsondata);
$scope.$apply(function () {
if (typeof jsondata['contactName'] === 'undefined' || jsondata['contactName'] === '') {
$scope.selectedContact.label = phoneNumberLabel;
$scope.selectedContact.opt_numbers = "";
}
else {
$scope.selectedContact.label = jsondata['contactName'];
$scope.selectedContact.opt_numbers = phoneNumberLabel;
}
$scope.totalMessageCount = jsondata['msgCount'] !== undefined ? jsondata['msgCount'] : 0;
$scope.isConvLoading = false;
});
$('#ocsms-app-content').scrollTop(1E10);
}
);
};
$scope.refreshConversation = function () { $scope.refreshConversation = function () {
$.getJSON(Sms.generateURL('/ocsms/front-api/v1/conversation'), $.getJSON(Sms.generateURL('/ocsms/front-api/v1/conversation'),
{ {
@ -85,7 +32,7 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
var fmt = $scope.formatConversation(jsondata); var fmt = $scope.formatConversation(jsondata);
var conversationBuf = fmt[1]; var conversationBuf = fmt[1];
if (conversationBuf === true) { if (conversationBuf === true) {
$('#ocsms-app-content').scrollTop(1E10); $('#app-conversation').scrollTop(1E10);
// This will blink the tab because there is new messages // This will blink the tab because there is new messages
if (document.hasFocus() === false) { if (document.hasFocus() === false) {
Sms.unreadCountCurrentConv += parseInt(fmt[0]); Sms.unreadCountCurrentConv += parseInt(fmt[0]);
@ -196,78 +143,6 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
} }
}); });
$scope.getContactOrderBy = function(ct) {
return SmsSettings.data.contactOrderBy;
};
$scope.getReverseContactOrder = function(ct) {
return SmsSettings.data.reverseContactOrder;
};
/*
* Conversation messagelist management
*/
$scope.addConversationMessage = function (msg) {
$scope.$apply(function () {
$scope.messages.push(msg);
});
};
$scope.removeConversationMessage = function (msgId) {
var len = $scope.messages.length;
for (var i = 0; i < len; i++) {
var curMsg = $scope.messages[i];
if (curMsg['id'] === msgId) {
$.post(Sms.generateURL('/delete/message'),
{"messageId": msgId, "phoneNumber": $scope.selectedContact.label}, function (data) {
$scope.$apply(function () {
$scope.messages.splice(i, 1);
});
});
return;
}
}
};
// Return (int) msgCount, (str) htmlConversation
$scope.formatConversation = function (jsondata) {
// Improve jQuery performance
var buf = false;
// Improve JS performance
var msgClass = '';
var msgCount = 0;
$.each(jsondata["conversation"], function (id, vals) {
if (vals["type"] == 1) {
msgClass = "recv";
}
else if (vals["type"] == 2) {
msgClass = "sent";
}
else {
msgClass = 'unknown';
}
// Store the greater msg date for refresher
// Note: we divide by 100 because number compare too large integers
if ((id / 100) > ($scope.lastConvMessageDate / 100)) {
$scope.lastConvMessageDate = id;
// Multiplicate ID to permit date to use it properly
$scope.addConversationMessage({
'id': id,
'type': msgClass,
'date': new Date(id * 1),
'content': vals['msg']
});
buf = true;
msgCount++;
}
});
return [msgCount, buf];
};
$interval($scope.refreshConversation, 10000); $interval($scope.refreshConversation, 10000);
$interval($scope.checkNewMessages, 10000); $interval($scope.checkNewMessages, 10000);

44
templates/main.php
View File

@ -9,6 +9,7 @@ use \OCA\OcSms\Lib\CountryCodes;
// Develop // Develop
\OCP\Util::addScript('ocsms', 'devel/app'); \OCP\Util::addScript('ocsms', 'devel/app');
\OCP\Util::addScript('ocsms', 'devel/contactlist'); \OCP\Util::addScript('ocsms', 'devel/contactlist');
\OCP\Util::addScript('ocsms', 'devel/conversation');
\OCP\Util::addScript('ocsms', 'devel/helpers'); \OCP\Util::addScript('ocsms', 'devel/helpers');
\OCP\Util::addScript('ocsms', 'devel/legacy'); \OCP\Util::addScript('ocsms', 'devel/legacy');
\OCP\Util::addScript('ocsms', 'devel/notifications'); \OCP\Util::addScript('ocsms', 'devel/notifications');
@ -16,7 +17,7 @@ use \OCA\OcSms\Lib\CountryCodes;
\OCP\Util::addStyle('ocsms', 'style'); \OCP\Util::addStyle('ocsms', 'style');
?> ?>
<div class="ng-scope" id="app" ng-app="OcSms" ng-controller="OcSmsController" xmlns:v-on="http://www.w3.org/1999/xhtml"> <div id="app">
<div id="app-mailbox-peers"> <div id="app-mailbox-peers">
<div id="app-contacts-loader" class="icon-loading" v-if="isContactsLoading"> <div id="app-contacts-loader" class="icon-loading" v-if="isContactsLoading">
</div> </div>
@ -24,8 +25,8 @@ use \OCA\OcSms\Lib\CountryCodes;
<div class="contact-list-no-contact" v-if="orderedContacts.length == 0 && !isContactsLoading"><?php p($l->t('No contact found.'));?></div> <div class="contact-list-no-contact" v-if="orderedContacts.length == 0 && !isContactsLoading"><?php p($l->t('No contact found.'));?></div>
<ul class="contact-list" v-if="orderedContacts.length > 0"> <ul class="contact-list" v-if="orderedContacts.length > 0">
<li v-for="contact in orderedContacts" peer-label="{{ contact.label }}" v-on:click="loadConversation(contact);" href="#"> <li v-for="contact in orderedContacts" peer-label="{{ contact.label }}" v-on:click="loadConversation(contact);" href="#">
<img class="ocsms-plavatar" ng-src="{{ contact.avatar }}" ng-show="contact.avatar !== undefined" /> <img class="ocsms-plavatar" ng-src="{{ contact.avatar }}" v-if="contact.avatar !== undefined" />
<div class="ocsms-plavatar" v-if="contact.avatar === undefined" ng-style="{'background-color': (contact.uid | peerColor)}">{{ contact.label | firstCharacter }}</div> <div class="ocsms-plavatar" v-if="contact.avatar === undefined" v-bind:style="{'backgroundColor': getContactColor(contact.uid) }">{{ contact.label | firstCharacter }}</div>
<a class="ocsms-plname" style="{{ contact.unread > 0 ? 'font-weight:bold;' : ''}}" mailbox-label="{{ contact.label }}" mailbox-navigation="{{ contact.nav }}">{{ contact.label }}{{ contact.unread > 0 ? ' (' + contact.unread + ') ' : '' }}</a> <a class="ocsms-plname" style="{{ contact.unread > 0 ? 'font-weight:bold;' : ''}}" mailbox-label="{{ contact.label }}" mailbox-navigation="{{ contact.nav }}">{{ contact.label }}{{ contact.unread > 0 ? ' (' + contact.unread + ') ' : '' }}</a>
</li> </li>
</ul> </ul>
@ -71,12 +72,9 @@ use \OCA\OcSms\Lib\CountryCodes;
</div> </div>
</div> <!-- app-settings-content --> </div> <!-- app-settings-content -->
</div> </div>
<div id="app-conversation">
<div id="ocsms-app-content"> <div id="app-content-loader" class="icon-loading" v-if="isConvLoading"></div>
<div id="app-content-loader" class="ng-cloak icon-loading" v-if="isConvLoading"> <div id="app-content-header" v-if="!isConvLoading" v-bind:style="{'backgroundColor': getContactColor(selectedContact.uid) }">
</div>
<div id="app-content-header" class="ng-cloak" v-if="!isConvLoading && selectedContact.label !== undefined && selectedContact.label !== ''"
ng-style="{'background-color': (selectedContact.uid | peerColor)}">
<div id="ocsms-contact-avatar"> <div id="ocsms-contact-avatar">
<img class="ocsms-plavatar-big" v-if="selectedContact.avatar !== undefined" ng-src="{{ selectedContact.avatar }}" /> <img class="ocsms-plavatar-big" v-if="selectedContact.avatar !== undefined" ng-src="{{ selectedContact.avatar }}" />
<div class="ocsms-plavatar-big" v-if="selectedContact.avatar === undefined">{{ selectedContact.label | firstCharacter }}</div> <div class="ocsms-plavatar-big" v-if="selectedContact.avatar === undefined">{{ selectedContact.label | firstCharacter }}</div>
@ -91,19 +89,19 @@ use \OCA\OcSms\Lib\CountryCodes;
</div> </div>
</div> </div>
<div id="app-content-wrapper" v-if="!isConvLoading"> <!-- <div id="app-content-wrapper" v-if="!isConvLoading">-->
<div v-if="messages.length == 0" id="ocsms-empty-conversation"><?php p($l->t('Please select a conversation from the list to load it.'));?></div> <!-- <div v-if="messages.length == 0" id="ocsms-empty-conversation">--><?php //p($l->t('Please select a conversation from the list to load it.'));?><!--</div>-->
<div v-if="messages.length > 0" class="ng-cloak ocsms-messages-container"> <!-- <div v-if="messages.length > 0" class="ng-cloak ocsms-messages-container">-->
<div v-for="message in messages | orderBy:'date'"> <!-- <div v-for="message in messages | orderBy:'date'">-->
<div class="msg-{{ message.type }}"> <!-- <div class="msg-{{ message.type }}">-->
<div>{{ message.content }}</div> <!-- <div>{{ message.content }}</div>-->
<div style="display: block;" id="ocsms-message-removal" class="icon-delete svn delete action" v-on:click="removeConversationMessage(message.id);"></div> <!-- <div style="display: block;" id="ocsms-message-removal" class="icon-delete svn delete action" v-on:click="removeConversationMessage(message.id);"></div>-->
<div class="msg-date">{{ message.date | date:'medium' }}</div> <!-- <div class="msg-date">{{ message.date | date:'medium' }}</div>-->
</div> <!-- </div>-->
<div class="msg-spacer"></div> <!-- <div class="msg-spacer"></div>-->
</div> <!-- </div>-->
<div id="searchresults"></div> <!-- <div id="searchresults"></div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> </div>
</div> </div>