modtool/src/components/TheModels.vue

<!-- eslint-disable no-fallthrough -->
<script setup lang="ts">
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 newDialogDisabled = ref(false);
const projectType = ref("ua");

async function exportProject() {
  const blob = await store.addressSpace?.export();
  if (blob)
    downloadBlob(blob, "proj.zip");
}

function downloadBlob(blob: Blob, filename: string) {
  let link = document.createElement('a')
  link.href = window.URL.createObjectURL(blob)
  link.download = filename
  document.body.appendChild(link);
  link.click()
  document.body.removeChild(link);
}

async function newProject() {
  newDialogDisabled.value=true;
  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;
  newDialogDisabled.value=false;
}

async function handleDrop(e:DragEvent) {
  if(!e.dataTransfer)
    return;
  for(let file of e.dataTransfer.files) {
      let xmlString= await file.text();
      store.addNodeset(await UANodeSet.parse(xmlString, file.name));
  }
}
</script>

<template>
  <div v-if="store.addressSpace" >
    <div class="card" @drop.prevent="handleDrop($event)" dropzone="copy" @dragover="$event.preventDefault();">
      <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>
      </div>
    </div>
    <button class="btn btn-light" @click.prevent="exportProject()">Export</button>
    <button class="btn btn-light" @click="newDialogOpen = true">New project</button>
  </div>

  <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()" :disabled="newDialogDisabled">OK</button>
    <button @click="newDialogOpen = false" :disabled="newDialogDisabled">Cancel</button>
  </v-dialog>
</template>


<style></style>