initial
This commit is contained in:
6
ui/css/base.css
Normal file
6
ui/css/base.css
Normal file
@@ -0,0 +1,6 @@
|
||||
/* Reset */
|
||||
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,dir,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}ol{list-style:decimal}ul{list-style:disc}ul ul{list-style:circle}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{text-decoration:underline}mark{background:none}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select,a img{vertical-align:middle}
|
||||
/* Typography */
|
||||
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%}html{height:100%;font-size:100%;font-family:Verdana, sans-serif;overflow-y:scroll;-webkit-text-size-adjust:100%}body{margin:0;min-height:100%;overflow:hidden}body,pre,label,input,button,select,textarea{font:normal 100%/1.25 Verdana, sans-serif;vertical-align:top}a{display:inline-block}p,ul,ol{margin:1.25em 0}h1{font-size:2em;line-height:1.25em;margin:0.625em 0}h2{font-size:1.5em;line-height:1.6667em;margin:0.8333em 0}h3{font-size:1.25em;line-height:1em;margin:1em 0}h4{font-size:1em;line-height:1.25em;margin:1.25em 0}h5{font-size:0.8125em;line-height:1.5385em;margin:1.5385em 0}h6{font-size:0.6875em;line-height:1.8182em;margin:1.8182em 0}blockquote{margin:0 3em}caption{font-weight:bold}ul,ol,dir,menu,dd{margin-left:3em}ul,dir,menu{list-style:disc}ol{list-style:decimal}sub,sup{font-size:75%;line-height:0;vertical-align:baseline;position:relative}sub{top:0.5em}sup{top:-0.5em}label{display:inline-block}input[type="text"],input[type="password"],input[type="file"]{padding:1px;border:1px solid #999;margin:-4px 0 0 0}select,textarea{padding:0;border:1px solid #999;margin:-4px 0 0 0}fieldset{padding:0.625em;border:1px solid #ccc;margin-bottom:0.625em}input[type="radio"],input[type="checkbox"]{height:1em;vertical-align:top;margin:0.125em}div,table{overflow:hidden}
|
||||
/* Fluid Fonts */
|
||||
@media screen and (max-width:960px){body{font-size:0.81255em}}
|
||||
4
ui/css/font-awesome.min.css
vendored
Normal file
4
ui/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
96
ui/css/theme.css
Normal file
96
ui/css/theme.css
Normal file
@@ -0,0 +1,96 @@
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Verdana, sans-serif;
|
||||
font-size: 14px;
|
||||
background-color: #979ea5;
|
||||
}
|
||||
|
||||
div.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 10px;
|
||||
border: 1px solid grey;
|
||||
margin-bottom: 10px;
|
||||
background: #a7a7a7;
|
||||
}
|
||||
input:focus {
|
||||
outline: none !important;
|
||||
border-color: #719ECE;
|
||||
box-shadow: 0 0 10px #719ECE;
|
||||
}
|
||||
textarea:focus {
|
||||
outline: none !important;
|
||||
border-color: #719ECE;
|
||||
box-shadow: 0 0 10px #719ECE;
|
||||
}
|
||||
|
||||
.addbtn {
|
||||
border: 1px solid grey;
|
||||
background-color: #a7a7a7;
|
||||
padding: 5px;
|
||||
margin: 3px;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
.darker {
|
||||
background-image: linear-gradient(#b1b1b1, #868686);
|
||||
padding: 4px 7px;
|
||||
}
|
||||
input, textarea {
|
||||
background-color: #979ea5;
|
||||
margin: 10px !important;
|
||||
border: 1px solid grey !important;
|
||||
|
||||
}
|
||||
|
||||
#app {text-align: center;}
|
||||
|
||||
.messages {
|
||||
color: green;
|
||||
padding: 5px;
|
||||
border: 1px solid green;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.messages.error {
|
||||
color: #c72f2f;
|
||||
border: 1px solid #c72f2f;
|
||||
}
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Verdana, sans-serif;
|
||||
font-size: 14px;
|
||||
/*text-transform: capitalize;*/
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 20px;
|
||||
background-image: url(/ui/images/btn.png);
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
text-decoration: none;
|
||||
color: #111;
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.button div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media screen and (max-width:48em) {
|
||||
|
||||
body {
|
||||
font-size:1em;
|
||||
}
|
||||
|
||||
}
|
||||
BIN
ui/fonts/FontAwesome.otf
Normal file
BIN
ui/fonts/FontAwesome.otf
Normal file
Binary file not shown.
BIN
ui/fonts/fontawesome-webfont.eot
Normal file
BIN
ui/fonts/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
ui/fonts/fontawesome-webfont.svg
Normal file
2671
ui/fonts/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
BIN
ui/fonts/fontawesome-webfont.ttf
Normal file
BIN
ui/fonts/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
ui/fonts/fontawesome-webfont.woff
Normal file
BIN
ui/fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
ui/fonts/fontawesome-webfont.woff2
Normal file
BIN
ui/fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
190
ui/home.htm
Normal file
190
ui/home.htm
Normal 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>
|
||||
BIN
ui/images/btn.png
Normal file
BIN
ui/images/btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
ui/images/homescreen.png
Normal file
BIN
ui/images/homescreen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
3
ui/js/axios.min.js
vendored
Normal file
3
ui/js/axios.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
11965
ui/js/vue.js
Normal file
11965
ui/js/vue.js
Normal file
File diff suppressed because it is too large
Load Diff
29
ui/layout.htm
Normal file
29
ui/layout.htm
Normal file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="<?php echo $ENCODING; ?>" />
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="application-name" content="IZZ Control">
|
||||
<meta name="apple-mobile-web-app-title" content="IZZ Control">
|
||||
<meta name="theme-color" content="#979ea5">
|
||||
<meta name="msapplication-navbutton-color" content="#979ea5">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="msapplication-starturl" content="/192.168.0.200">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>IzzoControl</title>
|
||||
<base href="<?php echo $SCHEME.'://'.$HOST.':'.$PORT.$BASE.'/'; ?>" />
|
||||
<link rel="stylesheet" href="lib/code.css" type="text/css" />
|
||||
<link rel="stylesheet" href="ui/css/base.css" type="text/css" />
|
||||
<link rel="stylesheet" href="ui/css/theme.css" type="text/css" />
|
||||
<link rel="stylesheet" href="ui/css/font-awesome.min.css" type="text/css" />
|
||||
<script src="ui/js/vue.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="ui/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<?php echo $this->render(Base::instance()->get('template')); ?>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user