feat: input through URL query, closes #34

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pld-progression-grouper-app",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -11,6 +11,7 @@
     "chart.js": "^4.4.0",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
+    "vue-router": "^4.2.5",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/App.vue

@@ -272,6 +272,9 @@
 // import the necessary components from Vue.js
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
 
+// Import the router
+import { useRouter, useRoute } from 'vue-router';
+
 // import the necessary components from Chart.js
 import { Chart, registerables } from 'chart.js';
 
@@ -296,12 +299,46 @@ Chart.register(...registerables);
 export default {
   mixins: [disclaimerMixin, footerMixin],
   setup() {
+    // Router and route references
+    const router = useRouter();
+    const route = useRoute();
+
     // Extract the version from the package.json
     const version = packageInfo.version;
 
     // Reference for the last commit hash
     const lastCommitHash = ref('');
 
+    const getUrlQueryParams = async () => {
+      //router is async so we wait for it to be ready
+      await router.isReady();
+
+      // Parse URL parameters and set initial data
+      if (route.query.acknowledgeBanner === "true") {
+        showModal.value = false;
+      }
+
+      // Set the data points from the URL query parameters
+      if (route.query.patientId) {
+        patientId.value = route.query.patientId;
+      }
+
+      // Set the data points from the URL query parameters
+      if (route.query.age) {
+        age.value = route.query.age;
+      }
+
+      // Set the data points from the URL query parameters
+      if (route.query.tlv) {
+        totalLiverVolume.value = route.query.tlv;
+      }
+
+      // Add the data point if all the parameters are available
+      if (route.query.patientId && route.query.age && route.query.tlv) {
+        addDataPoint();
+      }
+    };
+
     // Fetch the last commit hash
     const fetchLastCommit = async () => {
       try {
@@ -637,6 +674,9 @@ export default {
     // Lifecycle hook to set up the chart after the component is mounted
     // Update meta tags and initialize chart on component mount
     onMounted(() => {
+      // Get the URL query parameters
+      getUrlQueryParams();
+
       // Set the CSS variables for the modal
       document.documentElement.style.setProperty('--modal-max-width', CONFIG.MODAL_MAX_WIDTH);
       document.documentElement.style.setProperty('--modal-max-height', CONFIG.MODAL_MAX_HEIGHT);
@@ -656,10 +696,13 @@ export default {
       // Add author meta tags
       updateMetaTag('author', 'Bernt Popp, Ria Schönauer, Dana Sierks, Jan Halbritter');
       updateMetaTag('creator', 'Bernt Popp, Ria Schönauer, Dana Sierks, Jan Halbritter');
-
-      // Initialize the chart
+      
+      // Set up the chart
       setupChart();
+
+      // Add event listener for window resize
       window.addEventListener('resize', handleResize);
+
     });
 
     // Lifecycle hook to remove event listeners when the component is unmounted

src/main.js

@@ -1,4 +1,6 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+// main.js
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app');

src/router/index.js

@@ -0,0 +1,18 @@
+// router/index.js
+import { createWebHistory, createRouter, useRoute } from "vue-router";
+import Home from "@/App.vue";
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;