<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> <dt>Timer</dt> <dd>{{loop_timer}} (up: {{uptime}})</dd> </dl> </div> <div class='hugvey' v-for="hv in hugveys" :class="[{'hugvey--on': hv.status != 'off'},'hugvey--' + hv.status, 'hugvey--light-' + hv.light_on]" @click="showHugvey(hv)" > <h1> {{ hv.id }} </h1> <div class='status'>{{ hv.status }}</div> <div v-if="hv.status != 'off' && hv.status != 'gone' && hv.status != 'loading'"> <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'> <img class='icon' src="/images/icon-clock.svg" title="timer"> {{ timer(hv, 'duration') }} </div> </div> <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> <!-- <div class='light'> {{ hv.light }} </div> --> <div class='light'> Light: <input type="number" step="1" :value="hv.light_id" @change="change_light" :data-hvid="hv.id" v-on:click.stop> <input type="checkbox" v-model="hv.light_on" @change="change_light_status" :data-hvid="hv.id" v-on:click.stop> </div> </div> </div> </div> <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> <div :class="['content', log.origin]"> <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> </div> </div> <script type='application/javascript' src="/js/hugvey_console.js"></script> </body> </html>