From 78b5c0f91506549d0c41f7339e04f968b6901211 Mon Sep 17 00:00:00 2001 From: Loic Blot Date: Thu, 6 Sep 2018 23:34:41 +0200 Subject: [PATCH] Conversation header is now properly rendered --- css/style.css | 2 +- js/devel/app.js | 4 +- js/devel/contactlist.js | 17 +++--- js/devel/conversation.js | 101 +++++++++++++++++++++++++------ js/devel/legacy.js | 127 +-------------------------------------- templates/main.php | 44 +++++++------- 6 files changed, 117 insertions(+), 178 deletions(-) diff --git a/css/style.css b/css/style.css index c0fc339..225b64c 100644 --- a/css/style.css +++ b/css/style.css @@ -53,7 +53,7 @@ text-align: center; } -#ocsms-app-content { +#app-conversation { height: 100%; overflow-y: auto; } diff --git a/js/devel/app.js b/js/devel/app.js index 457a37b..3720029 100644 --- a/js/devel/app.js +++ b/js/devel/app.js @@ -74,4 +74,6 @@ var ContactRenderer = { return input.charAt(0); } -}; \ No newline at end of file +}; + +Vue.filter('firstCharacter', ContactRenderer.generateFirstCharacter); diff --git a/js/devel/contactlist.js b/js/devel/contactlist.js index 64ac83f..2dc4850 100644 --- a/js/devel/contactlist.js +++ b/js/devel/contactlist.js @@ -68,32 +68,35 @@ var ContactList = new Vue({ var urlPhoneNumber = decodeURIComponent(pnParam); if (urlPhoneNumber != null) { // If no contact when loading, creating a new contact from urlPhoneNumber - if (app.selectedContact.nav === undefined) { - app.selectedContact.label = urlPhoneNumber; - app.selectedContact.nav = urlPhoneNumber; - app.selectedContact.avatar = undefined; + if (Conversation.selectedContact.nav === undefined) { + Conversation.selectedContact.label = urlPhoneNumber; + Conversation.selectedContact.nav = urlPhoneNumber; + Conversation.selectedContact.avatar = undefined; // 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++) { if (self.contacts[i].nav === urlPhoneNumber) { - app.selectedContact = self.contacts[i]; + Conversation.selectedContact = self.contacts[i]; break; } } } - app.fetchConversation(app.selectedContact); + Conversation.fetch(Conversation.selectedContact); Sms.selectConversation($("a[mailbox-navigation='" + urlPhoneNumber + "']")); } } }); }, + getContactColor: function(contact_id) { + return ContactRenderer.generateColor(contact_id); + }, // Conversations loadConversation: function (contact) { OC.Util.History.pushState('phonenumber=' + contact.nav); // phoneNumber must exist if (contact.nav !== null) { - app.fetchConversation(contact); + Conversation.fetch(contact); Sms.selectConversation($("a[mailbox-navigation='" + contact.nav + "']")); } }, diff --git a/js/devel/conversation.js b/js/devel/conversation.js index e135bc2..c6a7faa 100644 --- a/js/devel/conversation.js +++ b/js/devel/conversation.js @@ -9,17 +9,16 @@ */ var Conversation = new Vue({ - el: '#ocsms-app-content', + el: '#app-conversation', data: { selectedContact: {}, isConvLoading: false, messages: [], - lastConvMessageDate: 0 - }, - created: function () { + lastConvMessageDate: 0, + totalMessageCount: 0 }, methods: { - fetchConversation: function (contact) { + fetch: function (contact) { // If contact is not null, we will fetch a conversation for a new contact if (contact != null) { this.selectedContact = contact; @@ -30,7 +29,7 @@ var Conversation = new Vue({ this.lastConvMessageDate = 0; 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) { var phoneNumberLabel = self.selectedContact.nav; @@ -40,25 +39,87 @@ var Conversation = new Vue({ } // Reinit messages before showing conversation - app.formatConversation(jsondata); + self.formatConversation(jsondata); - $scope.$apply(function () { - if (typeof jsondata['contactName'] === 'undefined' || jsondata['contactName'] === '') { - self.selectedContact.label = phoneNumberLabel; - self.selectedContact.opt_numbers = ""; - } - else { - self.selectedContact.label = jsondata['contactName']; - self.selectedContact.opt_numbers = phoneNumberLabel; - } + if (typeof jsondata['contactName'] === 'undefined' || jsondata['contactName'] === '') { + self.selectedContact.label = phoneNumberLabel; + self.selectedContact.opt_numbers = ""; + } + else { + self.selectedContact.label = jsondata['contactName']; + self.selectedContact.opt_numbers = phoneNumberLabel; + } - self.totalMessageCount = jsondata['msgCount'] !== undefined ? jsondata['msgCount'] : 0; - self.isConvLoading = false; - }); + self.totalMessageCount = jsondata['msgCount'] !== undefined ? jsondata['msgCount'] : 0; + 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; + } + } } } }); \ No newline at end of file diff --git a/js/devel/legacy.js b/js/devel/legacy.js index ebc9f63..4703550 100644 --- a/js/devel/legacy.js +++ b/js/devel/legacy.js @@ -10,71 +10,18 @@ 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', function ($scope, $interval, $timeout, $compile) { $scope.lastConvMessageDate = 0; - $scope.isConvLoading = false; - $scope.isContactsLoading = true; $scope.buttons = [ {text: "Send"} ]; - $scope.contacts = []; $scope.messages = []; $scope.totalMessageCount = 0; $scope.selectedContact = {}; $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 () { $.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 conversationBuf = fmt[1]; if (conversationBuf === true) { - $('#ocsms-app-content').scrollTop(1E10); + $('#app-conversation').scrollTop(1E10); // This will blink the tab because there is new messages if (document.hasFocus() === false) { 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.checkNewMessages, 10000); diff --git a/templates/main.php b/templates/main.php index 4a1dd15..2e963c2 100644 --- a/templates/main.php +++ b/templates/main.php @@ -9,6 +9,7 @@ use \OCA\OcSms\Lib\CountryCodes; // Develop \OCP\Util::addScript('ocsms', 'devel/app'); \OCP\Util::addScript('ocsms', 'devel/contactlist'); +\OCP\Util::addScript('ocsms', 'devel/conversation'); \OCP\Util::addScript('ocsms', 'devel/helpers'); \OCP\Util::addScript('ocsms', 'devel/legacy'); \OCP\Util::addScript('ocsms', 'devel/notifications'); @@ -16,7 +17,7 @@ use \OCA\OcSms\Lib\CountryCodes; \OCP\Util::addStyle('ocsms', 'style'); ?> -
+
@@ -24,8 +25,8 @@ use \OCA\OcSms\Lib\CountryCodes;
t('No contact found.'));?>
@@ -71,12 +72,9 @@ use \OCA\OcSms\Lib\CountryCodes;
- -
-
-
-
+
+
+
{{ selectedContact.label | firstCharacter }}
@@ -91,19 +89,19 @@ use \OCA\OcSms\Lib\CountryCodes;
-
-
t('Please select a conversation from the list to load it.'));?>
-
-
-
-
{{ message.content }}
-
-
{{ message.date | date:'medium' }}
-
-
-
-
-
-
+ +t('Please select a conversation from the list to load it.'));?> + + + + + + + + + + + +