Added settings, sound notifications

app/css/app.css

@@ -224,16 +224,21 @@ fieldset[disabled] .btn-tg.active {
   line-height: 1.4;
 }
 
-.modal-close-link {
+.modal-close-link,
+.modal-save-link {
   font-size: 12px;
   line-height: 1.4;
   float: right;
   padding: 0 2px 0;
   margin: 6px 2px 0 0;
 }
-.modal-close-link:hover {
+.modal-close-link:hover,
+.modal-save-link:hover {
   text-decoration: none;
 }
+.modal-save-link {
+  margin-right: 15px;
+}
 
 
 
@@ -1427,3 +1432,38 @@ img.img_fullsize {
   }
 
 }
+
+.settings_modal_window .modal-dialog {
+  max-width: 502px;
+}
+.settings_profile_edit_form {
+  margin-bottom: 15px;
+}
+.settings_profile_first_name,
+.settings_profile_last_name {
+  width: 210px;
+  float: left;
+}
+.settings_profile_first_name {
+  margin-right: 22px;
+}
+
+.settings_profile_edit_form input {
+  font-size: 12px;
+  line-height: normal;
+  background: #F2F2F2;
+  border: 1px solid #F2F2F2;
+  border-radius: 0;
+  padding: 6px 6px 6px 6px;
+  margin-bottom: 0;
+  margin: 0;
+}
+.settings_profile_edit_form input:focus,
+.settings_profile_edit_form input:active {
+  background-color: #FFF;
+}
+
+.settings_user_phone,
+.settings_version {
+  color: #999;
+}

app/index.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
   <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
   <link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/>
-  <link rel="stylesheet" href="css/app.css?17"/>
+  <link rel="stylesheet" href="css/app.css?18"/>
   <link rel="icon" href="favicon.ico" type="image/x-icon" />
 
   <meta property="og:title" content="Webogram">
@@ -51,9 +51,9 @@
   <script type="text/javascript" src="js/lib/mtproto.js?17"></script>
 
   <script type="text/javascript" src="js/util.js"></script>
-  <script type="text/javascript" src="js/app.js?12"></script>
-  <script type="text/javascript" src="js/services.js?13"></script>
-  <script type="text/javascript" src="js/controllers.js?21"></script>
+  <script type="text/javascript" src="js/app.js?13"></script>
+  <script type="text/javascript" src="js/services.js?14"></script>
+  <script type="text/javascript" src="js/controllers.js?22"></script>
   <script type="text/javascript" src="js/filters.js?3"></script>
   <script type="text/javascript" src="js/directives.js?15"></script>
 

app/js/app.js

@@ -55,9 +55,9 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', function($loc
 
 
   // $locationProvider.html5Mode(true);
-  $routeProvider.when('/', {templateUrl: 'partials/welcome.html?2', controller: 'AppWelcomeController'});
-  $routeProvider.when('/login', {templateUrl: 'partials/login.html?3', controller: 'AppLoginController'});
-  $routeProvider.when('/im', {templateUrl: 'partials/im.html?9', controller: 'AppIMController', reloadOnSearch: false});
+  $routeProvider.when('/', {templateUrl: 'partials/welcome.html?3', controller: 'AppWelcomeController'});
+  $routeProvider.when('/login', {templateUrl: 'partials/login.html?4', controller: 'AppLoginController'});
+  $routeProvider.when('/im', {templateUrl: 'partials/im.html?10', controller: 'AppIMController', reloadOnSearch: false});
   $routeProvider.otherwise({redirectTo: '/'});
 
 }]);

app/js/controllers.js

@@ -145,7 +145,7 @@ angular.module('myApp.controllers', [])
     };
   })
 
-  .controller('AppIMController', function ($scope, $location, $routeParams, MtpApiManager) {
+  .controller('AppIMController', function ($scope, $location, $routeParams, $modal, $rootScope, MtpApiManager) {
 
     $scope.$on('$routeUpdate', updateCurDialog);
 
@@ -159,10 +159,12 @@ angular.module('myApp.controllers', [])
 
 
     $scope.isLoggedIn = true;
-    $scope.logOut = function () {
-      MtpApiManager.logOut().then(function () {
-        location.hash = '/login';
-        location.reload();
+    $scope.openSettings = function () {
+      $modal.open({
+        templateUrl: 'partials/settings_modal.html?1',
+        controller: 'SettingsModalController',
+        scope: $rootScope.$new(),
+        windowClass: 'settings_modal_window'
       });
     }
 
@@ -569,5 +571,74 @@ angular.module('myApp.controllers', [])
     });
   })
 
+  .controller('SettingsModalController', function ($scope, $timeout, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager) {
+
+    $scope.profile = {};
+
+    MtpApiManager.getUserID().then(function (id) {
+      var user = AppUsersManager.getUser(id);
+      $scope.profile.first_name = user.first_name;
+      $scope.profile.last_name = user.last_name;
+
+      $scope.phone = user.phone;
+    });
+
+    $scope.notify = {};
+
+    AppConfigManager.get(['notify_nodesktop', 'notify_nosound']).then(function (settings) {
+      $scope.notify.sound = !settings.notify_nosound;
+      $scope.notify.desktop = !settings.notify_nodesktop;
+    });
+
+    $scope.$watch('notify.sound', function(newValue) {
+      if (newValue) {
+        AppConfigManager.remove('notify_nosound');
+      } else {
+        AppConfigManager.set({notify_nosound: true});
+        NotificationsManager.clear();
+      }
+    });
+
+    $scope.$watch('notify.desktop', function(newValue) {
+      if (newValue) {
+        AppConfigManager.remove('notify_nodesktop');
+      } else {
+        AppConfigManager.set({notify_nodesktop: true});
+      }
+    });
+
+    $scope.error = {};
+    $scope.save = function () {
+      MtpApiManager.invokeApi('account.updateProfile', {
+        first_name: $scope.profile.first_name || '',
+        last_name: $scope.profile.last_name || ''
+      }).then(function (user) {
+        $scope.error = {};
+        AppUsersManager.saveApiUser(user);
+      }, function (error) {
+        switch (error.type) {
+          case 'FIRSTNAME_INVALID':
+            $scope.error = {field: 'first_name'};
+            break;
+
+          case 'LASTNAME_INVALID':
+            $scope.error = {field: 'last_name'};
+            break;
+
+          case 'NAME_NOT_MODIFIED':
+            $scope.error = {};
+            break;
+        }
+      });
+    }
+
+    $scope.logOut = function () {
+      MtpApiManager.logOut().then(function () {
+        location.hash = '/login';
+        location.reload();
+      });
+    }
+  })
+
 
 

app/js/services.js

@@ -1937,7 +1937,7 @@ angular.module('myApp.services', [])
 
 })
 
-.service('NotificationsManager', function ($rootScope, $window, $timeout, $interval, MtpApiManager, AppPeersManager, IdleManager) {
+.service('NotificationsManager', function ($rootScope, $window, $timeout, $interval, MtpApiManager, AppPeersManager, IdleManager, AppConfigManager) {
 
   var notificationsUiSupport = 'Notification' in window;
   var notificationsShown = {};
@@ -1983,6 +1983,7 @@ angular.module('myApp.services', [])
     start: start,
     notify: notify,
     cancel: notificationCancel,
+    clear: notificationsClear,
     getPeerSettings: getPeerSettings
   };
 
@@ -2036,32 +2037,48 @@ angular.module('myApp.services', [])
       return false;
     }
 
-    var idx = ++notificationIndex,
-        key = data.key || 'k' + idx;
-
-    var notification = new Notification(data.title, {
-      icon: data.image || '',
-      body: data.message || ''
-    });
+    AppConfigManager.get('notify_nosound').then(function (noSound) {
+      if (!noSound) {
+        playSound();
+      }
+    })
 
-    notification.onclick = function () {
-      notification.close();
-      window.focus();
-      notificationsClear();
-      if (data.onclick) {
-        data.onclick();
+    AppConfigManager.get('notify_nodesktop').then(function (noShow) {
+      if (noShow) {
+        return;
       }
-    };
+      var idx = ++notificationIndex,
+          key = data.key || 'k' + idx;
 
-    notification.onclose = function () {
-      delete notificationsShown[key];
-      // lastClosed.push(+new Date());
-      notificationsClear();
-    };
+      var notification = new Notification(data.title, {
+        icon: data.image || '',
+        body: data.message || ''
+      });
 
-    notificationsShown[key] = notification;
+      notification.onclick = function () {
+        notification.close();
+        window.focus();
+        notificationsClear();
+        if (data.onclick) {
+          data.onclick();
+        }
+      };
+
+      notification.onclose = function () {
+        delete notificationsShown[key];
+        // lastClosed.push(+new Date());
+        notificationsClear();
+      };
+
+      notificationsShown[key] = notification;
+    });
   };
 
+  function playSound () {
+    var filename = 'img/sound_a.wav';
+    $('#notify_sound').html('<audio autoplay="autoplay"><source src="' + filename + '" type="audio/mpeg" /><embed hidden="true" autostart="true" loop="false" src="' + filename +'" /></audio>');
+  }
+
   function notificationCancel (key) {
     var notification = notificationsShown[key];
     if (notification) {

app/partials/head.html

@@ -7,7 +7,7 @@
       <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav navbar-right">
           <li><a  href="https://github.com/zhukov/webogram" target="_blank">About</a></li>
-          <li ng-if="isLoggedIn"><a href="" ng-click="logOut()">Log out</a></li>
+          <li ng-if="isLoggedIn"><a href="" ng-click="openSettings()">Settings</a></li>
         </ul>
       </div>
     </div>

app/partials/im.html

@@ -1,4 +1,4 @@
-<div ng-include="'partials/head.html?1'"></div>
+<div ng-include="'partials/head.html?2'"></div>
 
 <div class="im_page_wrap">
 
@@ -147,3 +147,5 @@
   <a class="im_page_footer_brand" target="_blank" href="https://github.com/zhukov/webogram">Telegram alpha</a> by izhukov &amp; toberg
 </div>
 
+<div id="notify_sound"></div>
+

app/partials/login.html

@@ -1,4 +1,4 @@
-<div ng-include="'partials/head.html?1'"></div>
+<div ng-include="'partials/head.html?2'"></div>
 
 
 <div class="login_form_wrap">

app/partials/settings_modal.html

@@ -0,0 +1,55 @@
+<div class="settings_modal_wrap">
+
+  <div class="modal-header">
+    <a class="modal-close-link" ng-click="$close()">Close</a>
+    <a class="modal-save-link" ng-click="save()">Save</a>
+    <h4 class="modal-title">Settings</h4>
+  </div>
+
+  <div class="modal-body">
+
+    <form class="settings_profile_edit_form clearfix">
+      <div class="form-group settings_profile_first_name" ng-class="{'has-error': error.field == 'first_name'}">
+        <label class="control-label" for="first_name">
+          <span ng-if="error.field == 'first_name'">Invalid First Name</span>
+          <span ng-if="error.field != 'first_name'">First Name</span>
+        </label>
+        <input type="text" class="form-control" name="first_name" ng-model="profile.first_name" required />
+      </div>
+
+      <div class="form-group settings_profile_last_name" ng-class="{'has-error': error.field == 'last_name'}">
+        <label class="control-label" for="last_name">
+          <span ng-if="error.field == 'last_name'">Invalid Last Name</span>
+          <span ng-if="error.field != 'last_name'">Last Name</span>
+        </label>
+        <input type="text" class="form-control" name="last_name" ng-model="profile.last_name" />
+      </div>
+    </form>
+
+    <p>
+      <strong>Sound: </strong>
+      <a ng-click="notify.sound = !notify.sound">{{notify.sound ? 'ON' : 'OFF'}}</a>
+    </p>
+
+    <p>
+      <strong>Desktop Notifications: </strong>
+      <a ng-click="notify.desktop = !notify.desktop">{{notify.desktop ? 'ON' : 'OFF'}}</a>
+    </p>
+
+    <p>
+      <strong>User: </strong>
+      <span class="settings_user_phone">{{phone | phoneNumber}}</span>
+    </p>
+
+    <p>
+      <strong>Version: </strong>
+      <span class="settings_version">alpha 0.0.12</span>
+    </p>
+
+    <hr/>
+
+    <div class="settings_logout_wrap">
+      <a href="" ng-click="logOut()">Log out</a>
+    </div>
+  </div>
+</div>

app/partials/welcome.html

@@ -1,4 +1,4 @@
-<div ng-include="'partials/head.html?1'"></div>
+<div ng-include="'partials/head.html?2'"></div>
 
 
 <div ng-show="showWelcome">