update preferences by POSTing changes to the API endpoint

Edirom · Aug 5, 2022 · 02910cc · 02910cc
1 parent 32558f7
commit 02910cc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/modules/app.xqm b/modules/app.xqm
@@ -1945,10 +1945,15 @@ declare function app:inject-api-base($node as node(), $model as map(*))  {
         app-shared:set-attr($node, map:merge(($model, map {'api-base' : $api-base})), 'data-api-base', 'api-base')
 };
 
+(:~
+ : Set "checked" attribute for user preferences switches
+ : depending on the `$model?settings` property which is injected 
+ : in view-html.xql.
+ :)
 declare function app:init-marker-switch($node as node(), $model as map(*)) as element(xhtml:input) {
     element {node-name($node)} {
         $node/@* except $node/@checked,
-        if($model?settings($node/@id)) 
+        if(wega-util-shared:semantic-boolean($model?settings($node/@id))) 
         then attribute checked {'checked'} 
         else (),
         $node/*

diff --git a/templates/includes/settings.html b/templates/includes/settings.html
@@ -2,26 +2,26 @@
     <h2>
         <a href="#settings" class="collapseSingle collapsed" aria-expanded="false" data-toggle="collapse" data-template="lang:translate">settings</a>
     </h2>
-    <div id="settings" class="panel-collapse collapse">
+    <div id="settings" class="panel-collapse collapse" data-template="app:inject-api-base">
         <p data-template="lang:translate">show_markers_paragraph</p>
         <div class="custom-control custom-switch">
             <input class="custom-control-input" type="checkbox" id="rdg-marker" checked="checked" data-toggle-class=".noteMarker:contains('Δ')" data-template="app:init-marker-switch"/>
             <label class="custom-control-label" for="rdg-marker"><span data-template="lang:translate">appRdgs</span> Δ</label>
         </div>
         <div class="custom-control custom-switch">
-            <input class="custom-control-input" type="checkbox" id="textConst-marker" checked="checked" data-toggle-class=".noteMarker:contains('‡')"/>
+            <input class="custom-control-input" type="checkbox" id="textConst-marker" checked="checked" data-toggle-class=".noteMarker:contains('‡')" data-template="app:init-marker-switch"/>
             <label class="custom-control-label" for="textConst-marker"><span data-template="lang:translate">textConstitution</span> ‡</label>
         </div>
         <div class="custom-control custom-switch">
-            <input class="custom-control-input" type="checkbox" id="supplied-marker" checked="checked" data-toggle-class=".tei_supplied"/>
+            <input class="custom-control-input" type="checkbox" id="supplied-marker" checked="checked" data-toggle-class=".tei_supplied" data-template="app:init-marker-switch"/>
             <label class="custom-control-label" for="supplied-marker"><span data-template="lang:translate">supplied-marker</span> [&#x2009;]</label>
         </div>
         <div class="custom-control custom-switch">
-            <input class="custom-control-input" type="checkbox" id="note-marker" checked="checked" data-toggle-class=".noteMarker:contains('*')"/>
+            <input class="custom-control-input" type="checkbox" id="note-marker" checked="checked" data-toggle-class=".noteMarker:contains('*')" data-template="app:init-marker-switch"/>
             <label class="custom-control-label" for="note-marker"><span data-template="lang:translate">note_commentary</span> *</label>
         </div>
         <div class="custom-control custom-switch">
-            <input class="custom-control-input" type="checkbox" id="thematicCommentaries-marker" checked="checked" data-toggle-class=".noteMarker:contains('T')"/>
+            <input class="custom-control-input" type="checkbox" id="thematicCommentaries-marker" checked="checked" data-toggle-class=".noteMarker:contains('T')" data-template="app:init-marker-switch"/>
             <label class="custom-control-label" for="thematicCommentaries-marker"><span data-template="lang:translate">thematicCommentaries</span> T</label>
         </div>
     </div>
@@ -35,6 +35,7 @@ <h2>
         }
         function init_settings() {
             let input = $('#settings input'),
+                endpoint_url = $('#settings').attr('data-api-base') + '/application/preferences',
                 marker,
                 data;
 
@@ -48,13 +49,15 @@ <h2>
             input.change(
                 function() {
                     marker = this.getAttribute('data-toggle-class');
+                    // toggle markers within the text
                     $(marker).toggle();
-                    data = { "rdg-marker": "true" };
-                    fetch("http://localhost:8080/exist/apps/WeGA-WebApp/api/v1/application/preferences", {
-                        method: 'POST'//,
+                    // update preferences by POSTing changes to the API endpoint 
+                    data = { [this.getAttribute('id')]: this.checked };
+                    fetch(endpoint_url, {
+                        method: 'POST',
                         headers: {
-                            "Content-Type": "application/json",
-                            "Accept": "application/json"
+                            'Content-Type': 'application/json',
+                            'Accept': 'application/json'
                         },
                         body: JSON.stringify(data),
                     });