modtool/src/components/TheInstance.vue

<script setup lang="ts">
import { useStore } from '@/store'
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
import VCollaps from './VCollaps.vue';
const store = useStore()
const { selectedNode } = storeToRefs(store)
const nameSpaceName = computed(() => {
  if(!selectedNode.value)
    return "";
  let nsIdx=selectedNode.value.nodeId.namespace;
  return store.addressSpace?.nst.getUri(nsIdx);
})

const displayName=computed(() => {
  if(!selectedNode.value)
    return "";
  for( const dn of selectedNode.value.displayName) { //TODO: locale handling
    return dn.text;
  }
  return "";
})

function okPressed() {
  console.log('TODO: Handle OK Button');
}
defineExpose({ okPressed })
</script>

<template>
  <VCollaps :selected=true name="Node">
    <div class="card-text" v-if="selectedNode">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default">DisplayName</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="displayName">
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default">BrowseName</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="selectedNode.browseName">
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default">NodeId</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="selectedNode.nodeId">
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default">NodeClass</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="selectedNode.nodeClass">
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default">Namespace</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" v-model="nameSpaceName">
      </div>
    </div>
  </VCollaps>
</template>


<style scoped>

</style>