Send a request to update notifications settings

assets/js/components/settings/interface.js

@@ -213,6 +213,24 @@ const SettingsInterface = {
 		}
 
 		await api("settings/set_data_conservation_policy", data, true)
+	},
+
+	/**
+	 * Get notifications settings
+	 * 
+	 * @returns {Promise<NotificationsSettings>}
+	 */
+	getNotifications: async function() {
+		return await api("settings/get_notifications", null, true);
+	},
+
+	/**
+	 * Update (set) notifications settings
+	 * 
+	 * @param {NotificationsSettings} settings
+	 */
+	setNotifications: async function(settings) {
+		return await api("settings/set_notifications", settings, true);
 	}
 }
 

assets/js/pages/settings/sections/notifications.js

@@ -6,17 +6,59 @@
 
 class NotificationsSettings {
     static async Open(args, target) {
+
+        try {
+            // Get settings
+            const settings =await SettingsInterface.getNotifications();
+
             // Load template
             const tpl = await Page.loadHTMLTemplate("pages/settings/notifications/NotificationsSection.html");
             const el = document.createElement("div")
             el.innerHTML = tpl;
             target.appendChild(el);
 
+            // Create new application
+            const VueApp = {
+                data() {
+                    return {
+                        allow_sounds: settings.allow_notifications_sound,
+                        allow_conversations: settings.allow_conversations
+                    };
+                },
+
+                methods: {
+                    async update() {
+                        try {
+                            let newSettings = {
+                                allow_notifications_sound: el.querySelector("input[name='allow_sounds']").checked,
+                                allow_conversations: el.querySelector("input[name='allow_conversations']").checked
+                            }
+
+                            await SettingsInterface.setNotifications(newSettings);
+
+                            notify(tr("Successfully updated settings!"), "success")
+
+                        } catch(e) {
+                            console.error(e)
+                            notify(tr("Failed to update settings!"), "danger")
+                        }                        
+                    }
+                }
+            }
+
+            Vue.createApp(VueApp).mount(el);
+
             el.querySelectorAll("input[type='checkbox']").forEach(e => {
                 $(e).iCheck({
                     checkboxClass: 'icheckbox_flat-blue',
                     radioClass: 'iradio_flat-blue'
                 });
             });
+
+        }
+        catch(e) {
+            console.error(e);
+            target.appendChild(ComunicWeb.common.messages.createCalloutElem(tr("Error"), tr("Failed to load notifications settings!"), "danger"))
+        }
     }
 }

assets/js/typings/Settings.d.ts

@@ -4,6 +4,11 @@
  * @author Pierre Hubert
  */
 
+declare interface NotificationsSettings {
+    allow_conversations: boolean,
+    allow_notifications_sound: boolean,
+}
+
 declare interface DataConservationPolicy {
     inactive_account_lifetime?: number,
     notification_lifetime?: number,

assets/templates/pages/settings/notifications/NotificationsSection.html

@@ -9,16 +9,19 @@
     <!-- form start -->
     
     <div class="box-body">
+
+        <p>tr("Note: These parameters applies only for the web version of the application!")</p>
+
         <div class="form-group">
             <label>
-                <input type="checkbox"> tr("Allow sound for notifications")
+                <input name="allow_sounds" type="checkbox" v-model="allow_sounds"> tr("Allow sound for notifications")
             </label>
         </div>
     </div>
     <!-- /.box-body -->
     
     <div class="box-footer">
-        <button type="submit" class="btn btn-primary">tr("Update")</button>
+        <button type="submit" class="btn btn-primary" @click="update">tr("Update")</button>
     </div>
 </div>
 
@@ -36,13 +39,13 @@
         
         <div class="form-group">
             <label>
-                <input type="checkbox"> tr("Allow conversation notifications")
+                <input name="allow_conversations" type="checkbox" v-model="allow_conversations"> tr("Allow conversation notifications")
             </label>
         </div>
     </div>
     <!-- /.box-body -->
     
     <div class="box-footer">
-        <button type="submit" class="btn btn-primary">tr("Update")</button>
+        <button type="submit" class="btn btn-primary" @click="update">tr("Update")</button>
     </div>
 </div>