lifeto-shop/src/components/OrderDisplay.vue

<template>
  <div id="order-display">
    <div id="order-titlebar"></div>
    <table>
      <tr
        v-for="v in orders.orders"
        :key="dirty"
        >
        <td>{{v.action_id}}</td>
        <td>[{{v.progress()[0]}} / {{v.progress()[1]}}]</td>
        <td>{{v.order_type}}</td>
        <td>{{v.state}}</td>
        <td>{{(((new Date()).getTime() - new Date(v.created).getTime())/(60 *1000)).toFixed(0)}} min ago</td>
        <td>
          <button
            type="button"
            id="logoutButton"
            v-on:click="tick_order(v.action_id)"
            >tick</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup>

const storeRefs = useStoreRef()
const {orders, dirty} = storeRefs;
const session = storage.GetSession()
const api:LTOApi = getLTOState(LTOApiv0, session, useStoreRef())
const tick_order = (action_id:string)=> {
  const deet = orders.value.orders[action_id]
  console.log(deet)
  if(deet){
    deet.tick(storeRefs, api)
  }else {
    console.log(`tried to send ${action_id} but undefined`)
  }
}


onMounted(()=>{
  dragElement(document.getElementById("order-display"));
  function dragElement(elmnt:any) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    document.getElementById("order-titlebar")!.onmousedown = dragMouseDown;
    function dragMouseDown(e:any) {
      e = e || window.event;
      e.preventDefault();
      // get the mouse cursor position at startup:
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = closeDragElement;
      // call a function whenever the cursor moves:
      document.onmousemove = elementDrag;
    }

    function elementDrag(e:any) {
      e = e || window.event;
      e.preventDefault();
      // calculate the new cursor position:
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      // set the element's new position:
      elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
      elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
      // stop moving when mouse button is released:
      document.onmouseup = null;
      document.onmousemove = null;
    }
  }
})

</script>

<script lang="ts">
import { onMounted, watch } from 'vue';
import { getLTOState, LTOApi, LTOApiv0 } from '../lib/lifeto';
import { storage } from '../session_storage';
import { useStoreRef } from '../state/state';

</script>





















<style>
#order-display{
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
  width: 300px;
}
#order-titlebar {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

</style>