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

Refactor SmsSettings to be a pure vue.js view

Browse Source
This commit is contained in:
Loic Blot 2018-09-05 23:51:31 +02:00
parent f54711b161
commit 445b3474ce
No known key found for this signature in database
GPG Key ID: EFAA458E8C153987
3 changed files with 78 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/devel/legacy.js
View File

@ -10,17 +10,6 @@
var app = angular.module('OcSms', []);
app.directive('toInt', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
return parseInt(inputValue, 10);
});
}
};
});
// Imported from contact app
app.filter('peerColor', function () {
return ContactRenderer.generateColor;
@ -40,8 +29,6 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
{text: "Send"}
];
$scope.vsettings = SmsSettings;
$scope.contacts = [];
$scope.messages = [];
$scope.totalMessageCount = 0;
@ -256,6 +243,14 @@ 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
*/
@ -387,7 +382,7 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
$scope.selectedContact.avatar = undefined;
// Now let's loop through the contact list and see if we can find the rest of the details
for (let i = 0; i < $scope.contacts.length; i++) {
for (var i = 0; i < $scope.contacts.length; i++) {
if ($scope.contacts[i].nav == urlPhoneNumber) {
$scope.selectedContact = $scope.contacts[i];
break;
@ -399,7 +394,6 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
}
}
});
SmsSettings.init();
SmsNotifications.init();
$scope.checkNewMessages();
$scope.refreshConversation();

31
js/devel/settings.js
View File

@ -8,30 +8,32 @@
* @copyright Loic Blot 2014-2017
*/
var SmsSettings = {
var SmsSettings = new Vue({
el: '#app-settings-content',
data: {
// Attributes
messageLimit: 100,
enableNotifications: true,
contactOrderBy: 'lastmsg',
reverseContactOrder: true,
country: '',
country: ''
},
// Functions
init: function () {
created: function () {
var self = this;
$.getJSON(Sms.generateURL('/front-api/v1/settings'), function (jsondata, status) {
if (jsondata['status'] === true) {
self.messageLimit = parseInt(jsondata["message_limit"]);
self.enableNotifications = parseInt(jsondata["notification_state"]) !== 0;
self.enableNotifications = parseInt(jsondata["notification_state"]) !== 0 ? 1 : 0;
self.contactOrderBy = jsondata["contact_order"];
self.reverseContactOrder = toBool(jsondata["contact_order_reverse"]);
self.country = jsondata["country"];
self.updateView();
}
});
},
methods: {
sendMessageLimit: function () {
if (this.messageLimit === null) {
return;
@ -48,7 +50,7 @@ var SmsSettings = {
var self = this;
$.post(Sms.generateURL('/set/notification_state'),
{
'notification': self.enableNotifications ? 1 : 0
'notification': parseInt(self.enableNotifications)
}
);
},
@ -62,19 +64,12 @@ var SmsSettings = {
);
},
sendCountry: function () {
var self = this;
$.post(Sms.generateURL('/set/country'),
{
'country': $('select[name=intl_phone]').val()
'country': self.country
}
);
},
// This function should be moved to a renderer or something else
updateView: function () {
$('#sel_intl_phone').val(this.country);
$('input[name=setting_msg_per_page]').val(this.messageLimit);
$('select[name=setting_notif]').val(this.enableNotifications ? 1 : 0);
$('select[name=setting_contact_order]').val(this.contactOrderBy);
$('input[name=setting_contact_order_reverse]').val(this.reverseContactOrder);
}
};
}
});

31
templates/main.php
View File

@ -2,17 +2,24 @@
use \OCA\OcSms\Lib\CountryCodes;
\OCP\Util::addScript('ocsms', 'angular.min');
\OCP\Util::addScript('ocsms', 'app.min');
\OCP\Util::addScript('ocsms', 'vue.min');
// Production
//\OCP\Util::addScript('ocsms', 'app.min');
// Develop
\OCP\Util::addScript('ocsms', 'devel/app');
\OCP\Util::addScript('ocsms', 'devel/helpers');
\OCP\Util::addScript('ocsms', 'devel/legacy');
\OCP\Util::addScript('ocsms', 'devel/notifications');
\OCP\Util::addScript('ocsms', 'devel/settings');
\OCP\Util::addStyle('ocsms', 'style');
?>
<div class="ng-scope" id="app" ng-app="OcSms" ng-controller="OcSmsController">
<div class="ng-scope" id="app" ng-app="OcSms" ng-controller="OcSmsController" xmlns:v-on="http://www.w3.org/1999/xhtml">
<div id="app-mailbox-peers">
<div id="app-contacts-loader" class="icon-loading" ng-show="isContactsLoading">
</div>
<ul class="ng-cloak contact-list" ng-show="!isContactsLoading">
<li ng-repeat="contact in contacts | orderBy:vsettings.contactOrderBy:vsettings.reverseContactOrder" peer-label="{{ contact.label }}" ng-click="loadConversation(contact);" href="#">
<li ng-repeat="contact in contacts | orderBy:getContactOrderBy:getReverseContactOrder" peer-label="{{ contact.label }}" ng-click="loadConversation(contact);" href="#">
<img class="ocsms-plavatar" ng-src="{{ contact.avatar }}" ng-show="contact.avatar !== undefined" />
<div class="ocsms-plavatar" ng-show="contact.avatar === undefined" ng-style="{'background-color': (contact.uid | peerColor)}">{{ 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>
@ -27,32 +34,32 @@ use \OCA\OcSms\Lib\CountryCodes;
</div>
<div id="app-settings-content">
<div><label for="setting_msg_per_page">Max messages to load per conversation</label>
<input type="number" min="10" max="10000" name="setting_msg_per_page" ng-model="vsettings.messageLimit" ng-change="vsettings.sendMessageLimit()" to-int />
<span class="label-invalid-input" ng-if="vsettings.messageLimit == null || vsettings.messageLimit == undefined"><?php p($l->t('Invalid message limit'));?></span>
<input type="number" min="10" max="10000" name="setting_msg_per_page" v-model="messageLimit" v-on:change="sendMessageLimit()" to-int />
<span class="label-invalid-input" v-if="messageLimit == null || messageLimit == undefined"><?php p($l->t('Invalid message limit'));?></span>
</div>
<div><label for="intl_phone"><?php p($l->t('Default country code'));?></label>
<select name="intl_phone" id="sel_intl_phone">
<select name="intl_phone" id="sel_intl_phone" v-model="country">
<?php foreach (CountryCodes::$codes as $code => $cval) { ?>
<option><?php p($l->t($code)); ?></option>
<?php } ?>
</select>
<button class="new-button primary icon-checkmark-white" ng-click="vsettings.sendCountry();"></button>
<button class="new-button primary icon-checkmark-white" v-on:click="sendCountry();"></button>
</div>
<div>
<label for="setting_contact_order"><?php p($l->t('Contact ordering'));?></label>
<select name="setting_contact_order" ng-model="vsettings.contactOrderBy" ng-change="vsettings.sendContactOrder()">
<select name="setting_contact_order" v-model="contactOrderBy" v-on:change="sendContactOrder()">
<option value="lastmsg"><?php p($l->t('Last message'));?></option>
<option value="label"><?php p($l->t('Label'));?></option>
</select>
<label for "setting_contact_order_reverse"><?php p($l->t('Reverse ?'));?></label>
<input type="checkbox" ng-model="vsettings.reverseContactOrder" ng-change="vsettings.sendContactOrder()" />
<label for="setting_contact_order_reverse"><?php p($l->t('Reverse ?'));?></label>
<input type="checkbox" v-model="reverseContactOrder" v-on:change="sendContactOrder()" />
</div>
<div>
<label for"setting_notif"><?php p($l->t('Notification settings'));?></label>
<select name="setting_notif" ng-model="vsetting.enableNotifications" ng-change="vsettings.sendNotificationFlag()">
<label for="setting_notif"><?php p($l->t('Notification settings'));?></label>
<select name="setting_notif" v-model="enableNotifications" v-on:change="sendNotificationFlag()">
<option value="1"><?php p($l->t('Enable'));?></option>
<option value="0"><?php p($l->t('Disable'));?></option>
</select>