2019-04-27 10:13:34 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Pillow Talk Control Interface</title>
|
|
|
|
|
<!-- development version, includes helpful console warnings -->
|
|
|
|
|
<script src="/js/vue.js"></script>
|
|
|
|
|
<script src="/js/reconnecting-websocket.js"></script>
|
|
|
|
|
<script src="/js/moment.min.js"></script>
|
|
|
|
|
<script src="/js/d3.v5.min.js"></script>
|
|
|
|
|
<script src="/js/crel.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/css/styles.css"></link>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body class='dark panopticon'>
|
|
|
|
|
<div id="interface" class='showStatus'>
|
|
|
|
|
<div id='status'>
|
|
|
|
|
<div id='overview'>
|
|
|
|
|
<dl>
|
2019-07-03 15:54:14 +00:00
|
|
|
<dt>Timer</dt>
|
|
|
|
|
<dd>{{loop_timer}} (up: {{uptime}})</dd>
|
2019-04-27 10:13:34 +00:00
|
|
|
</dl>
|
2019-05-14 15:56:43 +00:00
|
|
|
|
2019-04-27 10:13:34 +00:00
|
|
|
</div>
|
|
|
|
|
<div class='hugvey' v-for="hv in hugveys"
|
2019-11-28 15:21:00 +00:00
|
|
|
:class="[{'hugvey--on': hv.status != 'off'},'hugvey--' + hv.status]"
|
2019-04-27 10:13:34 +00:00
|
|
|
@click="showHugvey(hv)"
|
|
|
|
|
>
|
|
|
|
|
<h1>
|
2019-11-28 15:21:00 +00:00
|
|
|
{{ hv.light_id }} <span class='light_id-hv_id' v-if="hv.id != hv.light_id">(#{{hv.id}})</span>
|
2019-04-27 10:13:34 +00:00
|
|
|
</h1>
|
|
|
|
|
<div class='status'>{{ hv.status }}</div>
|
2019-11-28 15:21:00 +00:00
|
|
|
<div v-if="hv.status != 'off' && hv.status != 'loading'">
|
|
|
|
|
<div v-if="hv.status != 'gone'">
|
|
|
|
|
<select v-model="hv.language" @change="change_lang(hv, hv.language)" v-on:click.stop>
|
|
|
|
|
<option v-for="lang in languages" :title="lang.file"
|
|
|
|
|
:value="lang.code">
|
|
|
|
|
<span :class="['flag-icon', lang.code]"></span>
|
|
|
|
|
{{lang.code}}
|
|
|
|
|
</option>
|
|
|
|
|
</select>
|
|
|
|
|
{{ hv.language }}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <div v-if="hv.awaiting != false"><img class='icon' :src="'/images/icon-finished.svg'" title="Finished"> {{timer(hv,
|
|
|
|
|
'finished')}}</div> -->
|
|
|
|
|
<div class='stats'>
|
|
|
|
|
<div class='count' v-for="c, key in hv.counts">
|
|
|
|
|
<img class='icon' :src="'/images/icon-' + key + '.svg'" :title="key">
|
|
|
|
|
{{c}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class='position'>
|
|
|
|
|
<img class='icon' src="/images/icon-position.svg" title="position">
|
|
|
|
|
{{ hv.msg }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class='timer' v-if="hv.duration">
|
|
|
|
|
<img class='icon' src="/images/icon-clock.svg" title="timer">
|
|
|
|
|
{{ timer(hv, 'duration') }}
|
|
|
|
|
</div>
|
2019-04-27 10:13:34 +00:00
|
|
|
</div>
|
2019-11-28 15:21:00 +00:00
|
|
|
<div class='btn' v-if="hv.status == 'blocked'" @click.stop="unblock(hv)">Unblock</div>
|
|
|
|
|
<div class='btn' v-if="hv.status == 'available'" @click.stop="block(hv)">Block</div>
|
|
|
|
|
<div class='btn' v-if="hv.status == 'available' || hv.status =='blocked'" @click.stop="restart(hv)">Start</div>
|
|
|
|
|
<div class='btn' v-if="hv.status == 'running'" @click.stop="finish(hv)">Finish</div> <!-- to available state -->
|
|
|
|
|
<div class='btn' v-if="hv.status == 'running'" @click.stop="pause(hv)">Pause</div>
|
|
|
|
|
<div class='btn' v-if="hv.status == 'paused'" @click.stop="resume(hv)">Resume</div>
|
|
|
|
|
|
|
|
|
|
<div class='btn' v-if="(hv.status == 'available' || hv.status == 'blocked') && hv.has_state" @click.stop="resume(hv)">Resume from save</div>
|
2019-04-27 10:13:34 +00:00
|
|
|
</div>
|
2019-06-08 15:20:47 +00:00
|
|
|
<div class='light'>
|
|
|
|
|
Light:
|
|
|
|
|
<input type="number" step="1" :value="hv.light_id" @change="change_light" :data-hvid="hv.id" v-on:click.stop>
|
2019-11-28 15:21:00 +00:00
|
|
|
<div>Intensity: {{hv.light['intensity']}}, Fade #{{hv.light['duration']}} <span v-if="hv.light['isSophie']">(sophie)</span></div>
|
2019-06-08 15:20:47 +00:00
|
|
|
</div>
|
2019-05-14 15:56:43 +00:00
|
|
|
</div>
|
2019-04-27 10:13:34 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2019-04-27 13:33:51 +00:00
|
|
|
<div id='logbook'>
|
|
|
|
|
<div v-if="logbookId">
|
|
|
|
|
<h1>Log of {{logbookId}}</h1>
|
|
|
|
|
<div v-for="log in logbook" class='log'>
|
|
|
|
|
<div class='time'>{{formatted(log.time)}}</div>
|
2019-05-10 14:59:14 +00:00
|
|
|
<div :class="['content', log.origin]">
|
2019-04-27 13:33:51 +00:00
|
|
|
<span class='origin'>{{log.origin}}</span>
|
|
|
|
|
<span class='msg'>{{log.msg}}</span>
|
|
|
|
|
<span v-if="log.extra" class='extra'>( {{log.extra}} )</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2019-05-14 15:56:43 +00:00
|
|
|
|
2019-04-27 10:13:34 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script type='application/javascript' src="/js/hugvey_console.js"></script>
|
|
|
|
|
</body>
|
2019-05-14 15:56:43 +00:00
|
|
|
</html>
|
