new project dialog

src/components/TheModels.vue

@@ -1,10 +1,18 @@
+<!-- eslint-disable no-fallthrough -->
 <script setup lang="ts">
-import {useStore} from '@/util/store'
+import { AddressSpace } from '@/ua/AddressSpace';
+import { UANodeSet } from '@/ua/UANodeSet';
+import { useStore } from '@/util/store'
+import { ref } from 'vue';
+import VDialog from './VDialog.vue'
+
 const store = useStore()
+const newDialogOpen = ref(false);
+const projectType = ref("ua");
 
 async function exportProject() {
-  const blob=await store.addressSpace?.export();
-  if(blob)
+  const blob = await store.addressSpace?.export();
+  if (blob)
     downloadBlob(blob, "proj.zip");
 }
 
@@ -17,27 +25,69 @@ function downloadBlob(blob: Blob, filename: string) {
   document.body.removeChild(link);
 }
 
+async function newProject() {
+  store.addressSpace = new AddressSpace([] as UANodeSet[])
+  let nodesets:string[]=[];
+  switch(projectType.value) {
+    case "emco":
+      nodesets.push("nodesets/emco_machine_tools.xml");
+    case "machinetool":
+      nodesets.push("nodesets/Opc.Ua.MachineTool.Nodeset2.xml");
+      nodesets.push("nodesets/Opc.Ua.Machinery.NodeSet2.xml");
+      nodesets.push("nodesets/Opc.Ua.Ia.NodeSet2.xml");
+      nodesets.push("nodesets/Opc.Ua.Di.NodeSet2.xml");
+    case "ua":
+      nodesets.push("nodesets/Opc.Ua.NodeSet2.xml");
+    default:
+      break;
+  }
+  let as= await AddressSpace.load(nodesets.reverse());
+  store.setAddressSpace(as);
+  newDialogOpen.value=false;
+}
 </script>
 
 <template>
- <div v-if="store.addressSpace">
-  <div class="card">
-    <div class="card-body" v-if="store.addressSpace">
-      <h5 class="card-title">Models</h5>
-      <p class="card-text" >
-        <ul class="list-group list-group-flush" v-for="nodeset in store.addressSpace.nodesets" v-bind:key="nodeset.models[0].modelUri">
+  <div v-if="store.addressSpace">
+    <div class="card">
+      <div class="card-body" v-if="store.addressSpace">
+        <h5 class="card-title">Models</h5>
+        <p class="card-text">
+        <ul class="list-group list-group-flush" v-for="nodeset in store.addressSpace.nodesets"
+          v-bind:key="nodeset.models[0].modelUri">
           <div v-for="model in nodeset.models" v-bind:key="model.modelUri">
             <li class="list-group-item">{{ model.modelUri }}</li>
           </div>
         </ul>
-      </p>
+        </p>
+      </div>
     </div>
+    <button class="btn btn-light" @click.prevent="exportProject()">Export</button>
+    <button class="btn btn-light" @click="newDialogOpen = true">New project</button>
   </div>
-  <button class="btn btn-light" type="submit" @click.prevent="exportProject()">Export</button>
-</div>
-</template>
 
+  <v-dialog :open="newDialogOpen" @cancel="newDialogOpen=false">
+    <p>New project</p>
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="projectType" id="empty" value="empty" v-model="projectType">
+      <label class="form-check-label" for="empty">Empty Namespace</label>
+    </div>
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="projectType" id="ua" value="ua" v-model="projectType" checked>
+      <label class="form-check-label" for="ua">http://opcfoundation.org/UA/ Namespace</label>
+    </div>
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="projectType" id="machinetool" value="machinetool" v-model="projectType">
+      <label class="form-check-label" for="machinetool">Machinetool Namespace +dependencies</label>
+    </div>
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="projectType" id="emco" value="emco" v-model="projectType">
+      <label class="form-check-label" for="emco">Full EMCO Project</label>
+    </div>
+    <button @click="newProject()">OK</button>
+    <button @click="newDialogOpen = false">Cancel</button>
+  </v-dialog>
+</template>
 
-<style>
 
-</style>
+<style></style>

src/components/VDialog.vue

@@ -0,0 +1,39 @@
+<template>
+    <dialog ref="dialog" class="v-dialog" v-bind="attrs">
+        <slot />
+    </dialog>
+</template>
+  
+<script setup lang="ts">
+import {
+    onMounted, ref, watchEffect, useAttrs,
+} from 'vue';
+
+const dialog = ref<InstanceType<any> | undefined>(null);
+const internalOpen = ref(false);
+
+const props = defineProps({
+    open: Boolean,
+});
+
+const attrs = useAttrs();
+
+
+function showHideDialog() {
+    if (!dialog?.value) return;
+    if (props.open) dialog.value.showModal();
+    else dialog.value.close();
+}
+
+onMounted(() => {
+    watchEffect(() => {
+        if (props.open !== internalOpen.value) {
+            showHideDialog();
+            internalOpen.value = props.open;
+        }
+    });
+});
+
+</script>
+<style></style>
+  

src/util/store.ts

@@ -1,4 +1,4 @@
-import type { AddressSpace } from '@/ua/AddressSpace'
+import { AddressSpace } from '@/ua/AddressSpace'
 import { UABaseNode } from '@/ua/UABaseNode'
 import { defineStore } from 'pinia'
 
@@ -10,4 +10,11 @@ export const useStore = defineStore('user', {
       selectedNode: null as UABaseNode | null
     }
   },
+  actions: {
+    setAddressSpace(as: AddressSpace) {
+      this.addressSpace=as;
+      this.rootNode=as.findNode("ns=0;i=84")||null;
+      this.selectedNode=null;
+    }
+  }
 })