Fix index

Author: HeersGBV

templates/index.html

@@ -52,26 +52,21 @@ <h5 class="modal-title">Condition editor</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
-            <div v-for="(item, i) in conditions">
             <div v-for="(item, i) in conditions">
               <div class="row  no-gutters">
                 <div class="col-sm-2">Condition path-value:</div>
                 <div class="col-sm-7">
                   <input class="form-control" type="text" v-model="item.xpath">
-                  <input class="form-control" type="text" v-model="item.xpath">
                 </div>
                 <div class="col-sm-2">
                   <input class="form-control" type="text" v-model="item.value">
-                  <input class="form-control" type="text" v-model="item.value">
                 </div>
                 <div class="col-sm-1">
                   <button type="button" class="btn btn-primary btn-sm" @click="conditions.splice(i, 1)">Delete</button>
-                  <button type="button" class="btn btn-primary btn-sm" @click="conditions.splice(i, 1)">Delete</button>
                 </div>
               </div>
             </div>
             <button type="button" class="btn btn-primary btn-sm" onclick="addCondition(app.conditions)">Add condition</button>
-            <button type="button" class="btn btn-primary btn-sm" onclick="addCondition(app.conditions)">Add condition</button>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="modal">Dimiss</button>
@@ -273,7 +268,20 @@ <h2 class="accordion-header" :id="'L' + j">
     }
     var app = Vue.createApp({
       data() {
-        return { x3ml: {}, lido: '', x3file: null, lidoURL: null, activeM: -1, activeL: -1, conditions: [], mode: '' }
+        return {
+          x3ml: {},
+          lido: '',
+          x3file: null,
+          lidoURL: null,
+          activeM: -1,
+          activeL: -1,
+          conditions: [],
+          mode: '',
+          modeFormatKeys: new Map(),
+          tmp: ["abc", "abcd", "xxxx"],
+          formatKey: 'n3',
+          useBlankNode: false
+        }
       },
       delimiters: ["${", "}$"], // for global
       compilerOptions: { delimiters: ["${", "}$"] }, // for standalone
@@ -308,7 +316,7 @@ <h2 class="accordion-header" :id="'L' + j">
             });
           }
         },
-        applyConditionChanges()  {
+        applyConditionChanges() {
           if (this.mode == 'map') {
             // Applies condition changes for a mapping
             domain = this.x3ml.mappings[this.activeM].domain
@@ -319,11 +327,29 @@ <h2 class="accordion-header" :id="'L' + j">
             link = this.x3ml.mappings[this.activeM].links[this.activeL]
             link.path.targetRelation.conditions = this.conditions;
           }
+          rdfEditor.setValue('', -1);
           this.mode = ''
           this.activeL = -1;
           this.activeM = -1;
           this.conditions = [];
         },
+
+        downloadMappings() {
+          post('json_to_x3ml', { x3ml: this.x3ml })
+            .then(res => res.json())
+            .then(json => {
+              x3ml_str = json.x3ml;
+              const url = window.URL.createObjectURL(new Blob([x3ml_str]));
+              const link = document.createElement('a');
+              link.href = url;
+              link.setAttribute('download', 'mapping.x3ml');
+              document.body.appendChild(link);
+              link.click();
+              link.parentNode.removeChild(link);
+            })
+            .catch(() => alert('An error occurred while downloading the mapping file.'));
+        },
+
         resetMappings() {
           rdfEditor.setValue('', -1);
           this.getDfltX3ml();
@@ -379,7 +405,6 @@ <h2 class="accordion-header" :id="'L' + j">
             this.activeL = parseInt(attrs.iL.value);
             link = this.x3ml.mappings[this.activeM].links[this.activeL]
             this.conditions = clone(link.path.targetRelation.conditions);
-            this.conditions = clone(link.path.targetRelation.conditions);
             $('#conditionEditor').modal('show');
           }
         },
@@ -391,7 +416,6 @@ <h2 class="accordion-header" :id="'L' + j">
             this.activeM = parseInt(attrs.iM.value);
             domain = this.x3ml.mappings[this.activeM].domain
             this.conditions = clone(domain.targetNode.conditions);
-            this.conditions = clone(domain.targetNode.conditions);
             $('#conditionEditor').modal('show');
           }
         },
@@ -491,7 +515,8 @@ <h2 class="accordion-header" :id="'L' + j">
         conditions.push(clone(conditions.at(-1)));
       }
       else {
-        conditions.push({ attributes: {}, tag: "equals", value: "a value", xpath: "a path" } );
+        // Create a default condition
+        conditions.push({ attributes: {}, tag: "equals", value: "a value", xpath: "a path" });
       }
     }