You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
7.3 KiB
216 lines
7.3 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><?= 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>
|
|
|