mirror of
https://github.com/nerzhul/ocsms.git
synced 2025-07-16 22:46:49 +00:00
Conversation header is now properly rendered
This commit is contained in:
Loic Blot
Loïc Blot
parent
b5f67d59f2
commit
78b5c0f915
@ -53,7 +53,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#ocsms-app-content {
|
||||
#app-conversation {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -74,4 +74,6 @@ var ContactRenderer = {
|
||||
|
||||
return input.charAt(0);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
Vue.filter('firstCharacter', ContactRenderer.generateFirstCharacter);
|
||||
|
||||
@ -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 + "']"));
|
||||
}
|
||||
},
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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');
|
||||
?>
|
||||
|
||||
<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-contacts-loader" class="icon-loading" v-if="isContactsLoading">
|
||||
</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>
|
||||
<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="#">
|
||||
<img class="ocsms-plavatar" ng-src="{{ contact.avatar }}" ng-show="contact.avatar !== undefined" />
|
||||
<div class="ocsms-plavatar" v-if="contact.avatar === undefined" ng-style="{'background-color': (contact.uid | peerColor)}">{{ contact.label | firstCharacter }}</div>
|
||||
<img class="ocsms-plavatar" ng-src="{{ contact.avatar }}" v-if="contact.avatar !== undefined" />
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
@ -71,12 +72,9 @@ use \OCA\OcSms\Lib\CountryCodes;
|
||||
</div>
|
||||
</div> <!-- app-settings-content -->
|
||||
</div>
|
||||
|
||||
<div id="ocsms-app-content">
|
||||
<div id="app-content-loader" class="ng-cloak icon-loading" v-if="isConvLoading">
|
||||
</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="app-conversation">
|
||||
<div id="app-content-loader" class="icon-loading" v-if="isConvLoading"></div>
|
||||
<div id="app-content-header" v-if="!isConvLoading" v-bind:style="{'backgroundColor': getContactColor(selectedContact.uid) }">
|
||||
<div id="ocsms-contact-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>
|
||||
@ -91,19 +89,19 @@ use \OCA\OcSms\Lib\CountryCodes;
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<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" class="ng-cloak ocsms-messages-container">
|
||||
<div v-for="message in messages | orderBy:'date'">
|
||||
<div class="msg-{{ message.type }}">
|
||||
<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 class="msg-date">{{ message.date | date:'medium' }}</div>
|
||||
</div>
|
||||
<div class="msg-spacer"></div>
|
||||
</div>
|
||||
<div id="searchresults"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <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" class="ng-cloak ocsms-messages-container">-->
|
||||
<!-- <div v-for="message in messages | orderBy:'date'">-->
|
||||
<!-- <div class="msg-{{ message.type }}">-->
|
||||
<!-- <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 class="msg-date">{{ message.date | date:'medium' }}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="msg-spacer"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div id="searchresults"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user