<script setup>
import { ref } from "vue";
import { TDGageServiceClient }  from "@/serviceClients/thk/ThkGaugeServiceClient";

const gage = new TDGageServiceClient();
gage.Init("api/ThkGauge","127.0.0.1:5540");

const targetpos = ref(0);

async function scan(){
  await gage.Scan();
}
async function org(){
  await gage.Home();
}
async function forw(){
  await gage.Forward();
}
async function backw(){
  await gage.Backward();
}
async function stop(){
  await gage.Stop();
}
async function runto(){
  await gage.Runto(targetpos.value);
}
function disconnect(){
  gage.Dispose();
}
function connect(){
  gage.ReConnect();
}
</script>

<template>
  <div >
    <h1>Test TDGageServiceClient</h1>
    <div style="display: flex; flex-direction: row;">
      <button style="padding: 5px 20px; margin: 5px;" @click="connect()" >CONNECT</button>
      <button style="padding: 5px 20px; margin: 5px;" @click="disconnect()" >DISCONNECT</button>
    </div>
    <p style="margin: 3px;">TDGageServiceClient.Data = {{gage.Data}}</p>
    <div style="display: flex; flex-direction: row; margin: 3px;" v-for="(value, key) in gage.Data.DynArea">
        <label style="width: 150px;">{{key}}</label>
        <span style="margin-left: 20px; padding-left: 5px; padding-right: 5px;" >{{ gage.Data.DynArea[key] }}</span>
      </div>
    <div style="display: flex; flex-direction: row;">
      <button style="padding: 5px 20px; margin: 5px;" @click="scan()" >SCAN</button>
      <button style="padding: 5px 20px; margin: 5px;" @click="org()" >ORG</button>
      <button style="padding: 5px 20px; margin: 5px;" @click="forw()" >FORW</button>
      <button style="padding: 5px 20px; margin: 5px;" @click="backw()" >BACKW</button>
      <button style="padding: 5px 20px; margin: 5px;" @click="stop()" >STOP</button>
    </div>
    <div style="display: flex; flex-direction: row;">
      <button style="padding: 5px 20px; margin: 5px;" @click="runto()" >RUNTO</button>
      <input type="text" v-model="targetpos">
    </div>

  </div>
</template>

<style scoped>

</style>
