izcontrol/ui/home.htm

<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>