%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="computers-container">
<div class="row">
<div class="col-sm-1 text-center" v-for="computer in computers" v-bind:key="computers.id"
@click="selectComputer(computer)">
<span class="fa fa-tv fa-3x" v-bind:class="getComputerStatus(computer)"></span>
<span>{{computer.code}}</span>
</div>
</div>
<div class="in-order" v-if="selectedComputer && selectedComputer.id">
<div class="row">
<div class="col-sm-12">
<h4 class="text-center">{{selectedComputer.code}}</h4>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<button class="btn btn-success" v-bind:disabled="selectedComputer.has_active_order || !selectedComputer.is_enabled"
@click="startOrder(selectedComputer)">
<span class="fa fa-play"></span>
</button>
<button class="btn btn-warning" v-bind:disabled="!selectedComputer.has_active_order || !selectedComputer.is_enabled"
@click="endOrder(selectedComputer)">
<span class="fa fa-stop"></span>
</button>
<div v-if="selectedComputer.has_active_order">
{{beingUsedFor}}
</div>
</div>
<div class="col-sm-2">
<button class="btn btn-success btn-block" v-bind:disabled="selectedComputer.is_enabled"
@click="enable(selectedComputer)">Enable
</button>
<button class="btn btn-danger btn-block" v-bind:disabled="!selectedComputer.is_enabled"
@click="disable(selectedComputer)">Disable
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment';
export default {
name: 'Computers',
data() {
return {
computers: [],
beingUsedFor: '',
selectedComputer: {}
};
},
methods: {
getComputers: function () {
const vm = this;
vm.axios.get('api/computers').then(function (response) {
vm.computers = response.data.data;
});
},
getComputerStatus: function (computer) {
if (!computer.is_enabled) {
return 'disabled';
}
if (computer.is_selected) {
return 'is-selected';
}
if (computer.has_active_order) {
return 'is-being-used';
}
},
selectComputer: function (computer) {
this.computers.map(function (c) {
c.is_selected = c.id === computer.id;
});
this.selectedComputer = computer;
this.$forceUpdate();
},
disable: function (computer) {
const vm = this;
vm.axios.put(`api/computers/${computer.id}/actions/disable`).then(function () {
vm.selectedComputer = {};
const i = vm.computers.findIndex(function (c) {
return c.id === computer.id;
});
vm.computers[i].is_enabled = false;
vm.computers[i].is_selected = false;
vm.$forceUpdate();
});
},
enable: function (computer) {
const vm = this;
vm.axios.put(`api/computers/${computer.id}/actions/enable`).then(function () {
const i = vm.computers.findIndex(function (c) {
return c.id === computer.id;
});
vm.computers[i].is_enabled = true;
vm.computers[i].is_selected = false;
vm.$forceUpdate();
});
},
startOrder: function (computer) {
const vm = this;
vm.axios.post(`api/computers/${computer.id}/actions/startOrder`).then(function (response) {
const i = vm.computers.findIndex(function (c) {
return c.id === computer.id;
});
vm.computers[i].has_active_order = response.data.data.has_active_order;
vm.selectedComputer.has_active_order = response.data.data.has_active_order;
vm.$forceUpdate();
});
},
endOrder: function (computer) {
const vm = this;
vm.axios.post(`api/computers/${computer.id}/actions/endOrder`).then(function (response) {
const i = vm.computers.findIndex(function (c) {
return c.id === computer.id;
});
vm.computers[i].has_active_order = response.data.data.has_active_order;
vm.selectedComputer.has_active_order = response.data.data.has_active_order;
vm.$forceUpdate();
});
},
readableDate: function (date) {
return moment.duration(moment(moment(), "DD/MM/YYYY HH:mm:ss").diff(moment(moment(date), "DD/MM/YYYY HH:mm:ss")));
}
},
mounted() {
const vm = this;
vm.getComputers();
setInterval(function () {
if (vm.selectedComputer && vm.selectedComputer.usage && vm.selectedComputer.usage.started_at) {
const d = vm.readableDate(vm.selectedComputer.usage.started_at);
vm.beingUsedFor = `${d.hours()}:${d.minutes()}:${d.seconds()}`;
} else {
vm.beingUsedFor = '';
}
}, 1000);
}
}
</script>
Zerion Mini Shell 1.0