IZcontrol is a server side application that makes it possible to easily control remote appliances over the network using telnet, UDP and other protocols.
 
 
 
 

211 lines
7.0 KiB

<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 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)" 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)" 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>WOL<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="newitem.channel != ''">
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'].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'].indexOf(newitem.channel) >= 0">
<label for="ip">
What ip-s to send the signal to? (Each IP: new line!)<br>
<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 Addresses 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) {
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}).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) {
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>