< div id = "app" >
< div v-for = "message in messages" :class = "{'error': !message.success}" class = "messages" > {{message.message}}< / div >
< p v-show = "sending" style = "position:absolute;top: 10px; right: 10px;" > Parancs küldése, kérem várjon.< / p >
< p > <?= date('Y.m.d H:i') ?> < / p >
< p v-if = "loading" > No equipments, please add one.< / p >
< div class = "buttons" v-else >
< div class = "button" v-for = "item in items" >
< div >
< p > {{item.name}}< / p >
< / div >
< div >
< a v-on:click = "sendsignal(item, item.oncommand, 'on')" href = "javascript:void(0)" class = "addbtn darker" > < i class = "fa fa-play" aria-hidden = "true" > < / i > < / a >
< a v-on:click = "sendsignal(item, item.offcommand, 'off')" href = "javascript:void(0)" class = "addbtn darker" > < i class = "fa fa-stop" aria-hidden = "true" > < / i > < / a >
< / div >
< div v-show = "admin" >
< a v-on:click = "delitem(item)" href = "javascript:void(0)" class = "addbtn darker" > < i class = "fa fa-trash" aria-hidden = "true" > < / i > < / a >
< a v-on:click = "showinfo(item)" href = "javascript:void(0)" class = "addbtn darker" > < i class = "fa fa-info" aria-hidden = "true" > < / i > < / a >
< / div >
< / div >
< / div >
< div v-if = "admin" >
< a href = "javascript:void(0)" class = "addbtn" v-on:click = "add" > {{addtext}}< / a >
< div class = "add" v-show = "adding" >
< form >
< div >
< div >
< label for = "channel" >
Channel< br >
< label > UDP< br > < input type = "radio" name = "channel" value = "udp" v-model = "newitem.channel" > < / label >
< label > TELNET< br > < input type = "radio" name = "channel" value = "telnet" v-model = "newitem.channel" > < / label >
< label > ON/OFF< br > < input type = "radio" name = "channel" value = "wol" v-model = "newitem.channel" > < / label >
< / label >
< / div >
< label for = "name" v-show = "newitem.channel != ''" >
Add a name for this resource< br >
< input type = "text" name = "name" v-model = "newitem.name" > < br >
< / label >
< label for = "oncommand" v-show = "['udp', 'telnet'].indexOf(newitem.channel) >= 0" >
What is the on command?< br >
< input type = "text" name = "oncommand" v-model = "newitem.oncommand" > < br >
< / label >
< label for = "ontime" v-show = "['udp', 'telnet', 'wol'].indexOf(newitem.channel) >= 0" >
When to send the on command?< br >
< input type = "time" name = "ontime" v-model = "newitem.ontime" > < br >
< / label >
< label for = "offcommand" v-show = "['udp', 'telnet'].indexOf(newitem.channel) >= 0" >
What is the off command?< br >
< input type = "text" name = "offcommand" v-model = "newitem.offcommand" > < br >
< / label >
< label for = "offtime" v-show = "['udp', 'telnet','shutdown', 'wol'].indexOf(newitem.channel) >= 0" >
When to send the off command?< br >
< input type = "time" name = "offtime" v-model = "newitem.offtime" > < br >
< / label >
< div v-show = "newitem.channel != ''" >
< label for = "days" >
Days< br >
< label > monday< br > < input type = "checkbox" v-model = "newitem.days" value = "Monday" > < / label >
< label > tuesday< br > < input type = "checkbox" v-model = "newitem.days" value = "Tuesday" > < / label >
< label > wednesday< br > < input type = "checkbox" v-model = "newitem.days" value = "Wednesday" > < / label >
< label > thursday< br > < input type = "checkbox" v-model = "newitem.days" value = "Thursday" > < / label >
< label > friday< br > < input type = "checkbox" v-model = "newitem.days" value = "Friday" > < / label >
< label > saturday< br > < input type = "checkbox" v-model = "newitem.days" value = "Saturday" > < / label >
< label > sunday< br > < input type = "checkbox" v-model = "newitem.days" value = "Sunday" > < / label >
< / label >
< / div >
< div v-show = "['udp', 'telnet','shutdown', 'wol'].indexOf(newitem.channel) >= 0" >
< label for = "ip" >
What ip-s to send the signal to? (Each IP: new line!)< br >
< small v-show = "newitem.channel === 'wol'" > Enter < strong > username:password@IP.AD.RESS< / strong > < br > < / small >
< textarea name = "ip" v-model = "newitem.ip" rows = "10" >
< / textarea >
< / label >
< label for = "port" v-show = "newitem.channel != ''" >
What is the network port?< br >
< input type = "text" name = "port" v-model = "newitem.port" > < br >
< / label >
< / div >
< div v-show = "newitem.channel === 'wol'" >
< label for = "macAdress" >
What MAC:Add:ress:es to send the signal to? (Each MAC Address: new line!)< br >
< textarea name = "macAdress" v-model = "newitem.macAddress" rows = "10" >
< / textarea >
< / label >
< label for = "broadcastIP" >
What is the network Broadcast IP? (usually 255.255.255.255)< br >
< input type = "text" name = "broadcastIP" v-model = "newitem.broadcastIP" > < br >
< / label >
< / div >
< a class = "addbtn" v-show = "submittable" href = "javascript:void(0)" v-on:click = "plug" > < i class = "fa fa-plug" aria-hidden = "true" > < / i > Plug it in!< / a >
< / div >
< / form >
< / div >
< / div >
< / div >
< script >
var app = new Vue({
el: '#app',
data: {
items: [],
admin: <?php echo ($admin) ? 'true' : 'false' ?> ,
sending: false,
adding: false,
messages: [],
newitem: {
name: '',
oncommand: '',
ontime: '',
offcommand: '',
offtime: '',
days: [],
channel: '',
port: '',
ip: '',
broadcastIP: '',
macAddress: ''
},
},
mounted () {
this.getitems()
},
computed: {
loading() {return this.items.length === 0},
addtext: function() {
if (this.adding == false) { return 'Add new group or element'} else {return 'Back'}
},
submittable: function() {
if (
this.newitem.name != '' & &
this.newitem.channel != ''
) {return true} else {return false}
}
},
methods: {
add: function() {
this.adding = !this.adding
},
sendsignal: function(item, action, label) {
if (this.sending) { return alert('Please wait, the signal is sending')}
this.sending = true
console.log(`sending signal ${action} to ${item.name}`)
axios
.post('sendsignal', {'item': item, 'action': action, 'label': label}).then(response => {
this.messages = response.data
this.sending = false
}, error => {
alert(error)
this.sending = false
})
},
delitem: function(item) {
if (confirm('Are you sure?')) {
axios
.post('del', item).then(response => {
this.getitems()
})
}
},
showinfo: function(item) {
this.newitem = item;
this.adding = true;
// alert(this.dump(item,2))
},
dump: function(arr,level) {
var dumped_text = "";
if(!level) level = 0;
//The padding given at the beginning of the line.
var level_padding = "";
for(var j=0;j< level + 1 ; j + + ) level_padding + = " " ;
if(typeof(arr) == 'object') { //Array/Hashes/Objects
for(var item in arr) {
var value = arr[item];
if(typeof(value) == 'object') { //If it is an array,
dumped_text += level_padding + "'" + item + "' ...\n";
dumped_text += this.dump(value,level+1);
} else {
dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
}
}
} else { //Stings/Chars/Numbers etc.
dumped_text = "===>"+arr+"< ===("+typeof(arr)+")";
}
return dumped_text;
},
getitems: function() {
axios
.get('api/items')
.then(response => (this.items = response.data))
},
plug: function() {
axios
.post('add', this.newitem).then(response => {
this.items.push(this.newitem)
})
this.adding = false
}
}
})
< / script >
