Project changed from mockup to dev

src/components/BaseComponents/ValveControl.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-card :title="valveName">
+    <v-card-text>
+      <v-row>
+        <v-col cols="6">
+          <control-button block :control-button-base-node-id="openCBNodeId">
+            Open
+          </control-button>
+        </v-col>
+        <v-col>
+          <control-button block :control-button-base-node-id="closeCBNodeId">
+            Close
+          </control-button>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { mapStores } from "pinia";
+import { useOpcuaStore } from "@/stores/opcua";
+import ControlButton from "./ControlButton.vue";
+
+export default {
+  name: "ValveControl",
+  computed: {
+    ...mapStores(useOpcuaStore),
+    openCBNodeId() {
+      return `${this.valveNodeId}.stOpenButton`;
+    },
+    closeCBNodeId() {
+      return `${this.valveNodeId}.stCloseButton`;
+    },
+  },
+  components: {
+    ControlButton,
+  },
+  props: {
+    valveNodeId: {
+      type: String,
+      required: true,
+    },
+    valveName: {
+      type: String,
+    },
+  },
+};
+</script>