Externalized loading of configuration

tiramisuframework · Nov 9, 2023 · 7b32ffb · 7b32ffb
1 parent 2e78d57
commit 7b32ffb
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 17 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,20 @@
 <template>
   <main>
     <Navbar />
-    <SidebarData />
+    <SidebarData
+      :configuration="configuration"
+      :dfg="dfg"
+      @configuration="this.configuration = $event.config; this.dfg = $event.dfg"
+      />
     <div class="container">
-      <div class="row">
+      <div class="row" v-show="this.configuration != null && this.dfg != null">
         <div class="col-md-3 bg-light sidebar">
           <SidebarVisibility
-            @showBackdrop="this.showBackdrop= $event"
-            @showActivities="this.showActivities= $event"
-            @showActivityLabels="this.showActivityLabels= $event"
-            @showActivityShadows="this.showActivityShadows= $event"
-            @showEdges="this.showEdges= $event"
+            @showBackdrop="this.showBackdrop = $event"
+            @showActivities="this.showActivities = $event"
+            @showActivityLabels="this.showActivityLabels = $event"
+            @showActivityShadows="this.showActivityShadows = $event"
+            @showEdges="this.showEdges = $event"
           />
         </div>
         <div class="col-md-9 ps-3">
@@ -21,9 +25,17 @@
               :show-activity-labels="showActivityLabels"
               :show-activity-shadows="showActivityShadows"
               :show-edges="showEdges"
+              :configuration="configuration"
+              :dfg="dfg"
           />
         </div>
       </div>
+      <div class="row" v-if="configuration == null || dfg == null">
+        <div class="col-12 text-muted text-center" style="height: calc(100vh - 3.5rem); padding-top: 25vh">
+          <p class="fs-5"><em>To start the visualization it is necessary to provide the configuration data.</em></p>
+          <p><a class="btn btn-primary" data-bs-toggle="offcanvas" href="#ConfigureData">Configure data</a></p>
+        </div>
+      </div>
     </div>
   </main>
 </template>
@@ -47,7 +59,12 @@ export default {
     showActivities: true,
     showActivityLabels: true,
     showActivityShadows: false,
-    showEdges: true
+    showEdges: true,
+    configuration: null,
+    dfg: null
   }),
 };
 </script>
+
+<script setup>
+</script>
diff --git a/src/components/SidebarData.vue b/src/components/SidebarData.vue
@@ -5,15 +5,33 @@
       <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body">
-      <div>
-        Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
-      </div>
+      <p class="text-muted">Use the form below to configure the URLs of the JSON file and the URL of the DFG file.</p>
+      <form>
+        <div class="mb-3">
+          <label for="jsonConfiguration" class="form-label">URL of the JSON configuration:</label>
+          <input type="text" class="form-control" id="jsonConfiguration" v-model="this.configuration">
+        </div>
+        <div class="mb-3">
+          <label for="dfgFile" class="form-label">URL of the DFG file:</label>
+          <input type="text" class="form-control" id="dfgFile" v-model="this.dfg">
+        </div>
+        <button type="button"
+                class="btn btn-primary"
+                @click="$emit('configuration', {config: this.configuration, dfg: this.dfg})"
+                data-bs-toggle="offcanvas" href="#ConfigureData">
+          Submit
+        </button>
+      </form>
     </div>
   </div>
 </template>
 
 <script>
 export default {
   name: "SidebarData",
+  data: () => ({
+    configuration: "https://raw.githubusercontent.com/delas/tiramisu-web/master/examples/example1.json",
+    dfg: "https://raw.githubusercontent.com/delas/tiramisu/master/examples/example1.dfg"
+  }),
 };
 </script>
diff --git a/src/components/Tiramisu.vue b/src/components/Tiramisu.vue
@@ -52,7 +52,7 @@
         </text>
       </g>
 
-      <!-- activities -->
+      <!-- activity links -->
       <g v-for="(action, name, index) in images.actions" :key="name">
         <rect
             v-if="name in model.actions"
@@ -90,10 +90,10 @@ export default {
     showActivityLabels: true,
     showActivityShadows: true,
     showEdges: true,
+    configuration: null,
+    dfg: null
   },
   data: () => ({
-    configuration: "https://raw.githubusercontent.com/delas/tiramisu-web/master/examples/example1.json",
-    dfg: "https://raw.githubusercontent.com/delas/tiramisu/master/examples/example1.dfg",
     images: {
       backdrop: {
         pictogram: null,
@@ -108,6 +108,12 @@ export default {
     activeAction: null
   }),
   methods: {
+    refresh() {
+      if (this.configuration == null || this.dfg == null)
+        return;
+      this.parseConfiguration(this.configuration);
+      this.parseDFG(this.dfg);
+    },
     async parseConfiguration(url) {
       const response = await fetch(url);
       const json = await response.json();
@@ -214,9 +220,9 @@ export default {
       return { x: scaledX, y: scaledY };
     }
   },
-  mounted() {
-    this.parseConfiguration(this.configuration);
-    this.parseDFG(this.dfg);
+  watch: {
+    configuration: function() { this.refresh() },
+    dfg: function() { this.refresh() }
   }
 }
 </script>