enzo/izcontrol
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial

Browse Source
This commit is contained in:
Enzo Angiulli
2020-11-23 23:10:34 +01:00
commit 1af0dae049
61 changed files with 30015 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
ui/home.htm Normal file
View File

@@ -0,0 +1,190 @@
<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>
<?php if ($admin): ?>
<div>
<a v-on:click="delitem(item)" href="javascript:void(0)" class="addbtn darker"><i class="fa fa-trash" aria-hidden="true"></i></a>
</div>
<?php endif ?>
</div>
</div>
<?php if ($admin): ?>
<div>
<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>
<?php endif ?>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
items: [],
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()
})
}
},
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>