128 lines
2.7 KiB
Vue
128 lines
2.7 KiB
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>
|