modtool/src/App.vue

<script setup lang="ts">
import TheAddressspace from './components/TheAddressspace.vue'
import TheInstance from './components/TheInstance.vue'
import TheParent from './components/TheParent.vue'
import TheMapping from './components/TheMapping.vue'
import TheDynamics from './components/TheDynamics.vue'
import { ServerConfig } from '@/ServerConfig'
import TheModels from './components/TheModels.vue'
import { useStore } from './store';
import { AddressSpace } from './ua/AddressSpace';
import { assert } from './util/assert';
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
const store = useStore();
const { selectedNode } = storeToRefs(store);

async function load(): Promise<AddressSpace> {
    const files=['nodesets/Opc.Ua.NodeSet2.xml',
               'nodesets/Opc.Ua.Di.NodeSet2.xml',
               'nodesets/Opc.Ua.Ia.NodeSet2.xml',
               'nodesets/Opc.Ua.Machinery.NodeSet2.xml',
               'nodesets/Opc.Ua.MachineTool.Nodeset2.xml',
               'nodesets/emco_machine_tools.xml']
    const as=await AddressSpace.load(files);
    return as;
  }


  const loadData = async () => {
    const store = useStore();
    store.serverConfig = ServerConfig.load({});
    store.addressSpace=await load();
    assert(store.addressSpace)
    const rootNode=store.addressSpace.findNode("ns=0;i=84");
    assert(rootNode)
    store.rootNode=rootNode;
  }
  loadData();

  const childParentRef = ref();
  const childDetailRef = ref();
  const childEditorRef = ref();
  const childDynamicsRef = ref();

  function okPressed(){
    childParentRef.value.okPressed();
    childDetailRef.value.okPressed();
    childEditorRef.value.okPressed();
    childDynamicsRef.value.okPressed();
  }
</script>

<template>
  <div class="container text-left">
    <div class="row align-items-start">
      <div class="col col-6">
        <TheModels />
        <TheAddressspace />    
      </div>
      <div class="col col-6">
        <TheParent ref="childParentRef"/>
        <TheInstance ref="childDetailRef"/>
        <TheMapping ref="childEditorRef"/>
        <TheDynamics ref="childDynamicsRef"/>
        <button class="btn btn-light"  v-if="selectedNode!=null" @click.prevent="okPressed()">OK</button>
      </div>
    </div>
  </div>
</template>
<style>
</style>