2019-01-18 19:39:35 +01:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2019-04-27 12:13:34 +02:00
|
|
|
<title>Pillow Talk Editor</title>
|
2019-01-18 19:39:35 +01:00
|
|
|
<!-- development version, includes helpful console warnings -->
|
2019-01-23 15:26:44 +01:00
|
|
|
<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>
|
2019-01-25 10:43:55 +01:00
|
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
2019-04-25 19:08:27 +02:00
|
|
|
|
2019-01-23 15:26:44 +01:00
|
|
|
<link rel="stylesheet" href="/css/styles.css"></link>
|
2019-01-22 08:59:45 +01:00
|
|
|
|
2019-01-18 19:39:35 +01:00
|
|
|
</head>
|
2019-04-27 12:13:34 +02:00
|
|
|
<body class='dark editor'>
|
2019-01-24 14:27:04 +01:00
|
|
|
<div id="interface" class='showStatus'>
|
2019-01-23 15:26:44 +01:00
|
|
|
<div id='status'>
|
|
|
|
|
<div id='overview'>
|
2019-07-10 15:24:02 +02:00
|
|
|
<span class="loop_time" onclick="document.getElementById('time_update').classList.toggle('visible')">{{loop_timer}}</span> (up: {{uptime}})
|
|
|
|
|
<div id='time_update'>
|
2019-07-10 15:31:47 +02:00
|
|
|
<input type="text" value="00:00:00" name="loop_time_value" id="loop_time_value" />
|
2019-07-10 15:24:02 +02:00
|
|
|
<input type="button" onclick="panopticon.change_loop_time(document.getElementById('loop_time_value').value)" value="set time">
|
|
|
|
|
</div>
|
|
|
|
|
|
2019-01-25 10:43:55 +01:00
|
|
|
|
2019-01-24 14:27:04 +01:00
|
|
|
<ul id='languages'>
|
|
|
|
|
<li v-for="lang in languages" :title="lang.file"
|
2019-11-11 12:45:08 +01:00
|
|
|
:id="'lang-' + lang.code">
|
|
|
|
|
<span :class="['flag-icon', lang.code]"></span>
|
|
|
|
|
{{lang.code}}:
|
|
|
|
|
<span class='edit btn lang--btn' @click="loadNarrative(lang.code, lang.file)">Edit</span>
|
|
|
|
|
<span :id="'change-lang-' + lang.code" class='switch btn lang--btn' @click="changeLanguageForAvailable(lang.code)">Switch free</span>
|
|
|
|
|
</li>
|
2019-01-24 14:27:04 +01:00
|
|
|
</ul>
|
2019-11-13 12:20:32 +01:00
|
|
|
|
|
|
|
|
<div class='hvactions'>
|
2019-11-13 12:28:01 +01:00
|
|
|
<span class='btn' id='unblock-all' @click="unblockAll">Unblock all ({{blockedHugveys}})</span>
|
|
|
|
|
<span class='btn' id='start-all' @click="startAll">Start all ({{availableHugveys}})</span>
|
2019-11-13 12:20:32 +01:00
|
|
|
</div>
|
2019-05-14 17:56:43 +02:00
|
|
|
|
2019-01-23 15:26:44 +01:00
|
|
|
</div>
|
|
|
|
|
<div class='hugvey' v-for="hv in hugveys"
|
2019-06-08 17:20:47 +02:00
|
|
|
:class="[{'hugvey--on': hv.status != 'off'},'hugvey--' + hv.status, 'hugvey--light-' + hv.light_on]"
|
2019-01-25 14:10:19 +01:00
|
|
|
@click="showHugvey(hv)"
|
|
|
|
|
>
|
2019-01-23 15:26:44 +01:00
|
|
|
<h1>
|
2019-11-13 23:43:02 +01:00
|
|
|
{{ hv.light_id }} <span v-if="hv.id != hv.light_id">(#{{hv.id}})</span>
|
2019-01-23 15:26:44 +01:00
|
|
|
</h1>
|
2019-01-25 10:43:55 +01:00
|
|
|
<div class='status'>{{ hv.status }}</div>
|
2019-01-25 11:59:03 +01:00
|
|
|
<div v-if="hv.status != 'off' && hv.status != 'gone' && hv.status != 'loading'">
|
2019-04-16 14:45:32 +02:00
|
|
|
<select v-model="hv.language" @change="change_lang(hv, hv.language)" v-on:click.stop>
|
2019-01-25 11:59:03 +01:00
|
|
|
<option v-for="lang in languages" :title="lang.file"
|
|
|
|
|
:value="lang.code">
|
|
|
|
|
<span :class="['flag-icon', lang.code]"></span>
|
|
|
|
|
{{lang.code}}
|
|
|
|
|
</option>
|
|
|
|
|
</select>
|
2019-01-25 11:17:10 +01:00
|
|
|
{{ hv.language }}
|
2019-04-25 17:39:44 +02:00
|
|
|
<!-- <div v-if="hv.awaiting != false"><img class='icon' :src="'/images/icon-finished.svg'" title="Finished"> {{timer(hv,
|
|
|
|
|
'finished')}}</div> -->
|
2019-01-25 11:17:10 +01:00
|
|
|
<div class='stats'>
|
2019-01-25 10:43:55 +01:00
|
|
|
<div class='count' v-for="c, key in hv.counts">
|
|
|
|
|
<img class='icon' :src="'/images/icon-' + key + '.svg'" :title="key">
|
|
|
|
|
{{c}}
|
|
|
|
|
</div>
|
2019-01-25 11:17:10 +01:00
|
|
|
<div class='position'>
|
2019-01-25 11:59:03 +01:00
|
|
|
<img class='icon' src="/images/icon-position.svg" title="position">
|
|
|
|
|
{{ hv.msg }}
|
2019-01-25 11:17:10 +01:00
|
|
|
</div>
|
2019-11-14 16:02:51 +01:00
|
|
|
<div class='timer' v-if="hv.duration">
|
2019-04-25 13:24:08 +02:00
|
|
|
<img class='icon' src="/images/icon-clock.svg" title="timer">
|
|
|
|
|
{{ timer(hv, 'duration') }}
|
|
|
|
|
</div>
|
2019-01-23 15:26:44 +01:00
|
|
|
</div>
|
2019-04-25 17:39:44 +02:00
|
|
|
<div class='btn' v-if="hv.status == 'blocked'" @click.stop="unblock(hv)">Unblock</div>
|
2019-04-27 11:51:11 +02:00
|
|
|
<div class='btn' v-if="hv.status == 'available'" @click.stop="block(hv)">Block</div>
|
2019-05-14 17:56:43 +02:00
|
|
|
<div class='btn' v-if="hv.status == 'available' || hv.status =='blocked'" @click.stop="restart(hv)">Start</div>
|
2019-04-27 11:51:11 +02:00
|
|
|
<div class='btn' v-if="hv.status == 'running'" @click.stop="finish(hv)">Finish</div> <!-- to available state -->
|
2019-01-25 14:10:19 +01:00
|
|
|
<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>
|
2019-05-14 17:56:43 +02:00
|
|
|
|
2019-05-11 23:34:06 +02:00
|
|
|
<div class='btn' v-if="(hv.status == 'available' || hv.status == 'blocked') && hv.has_state" @click.stop="resume(hv)">Resume from save</div>
|
2019-05-14 17:56:43 +02:00
|
|
|
</div>
|
2019-01-22 08:59:45 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2019-01-23 15:26:44 +01:00
|
|
|
<div id='story'>
|
2019-07-03 18:33:31 +02:00
|
|
|
<div id="controls" :class="[{'hidden': selectedLang === null}]">
|
2019-01-25 15:45:46 +01:00
|
|
|
<span id="current_hv">{{selectedId}}</span>
|
2019-01-24 14:27:04 +01:00
|
|
|
<span id="current_lang"></span>
|
2019-01-23 15:26:44 +01:00
|
|
|
<div id="btn-save" class="btn">Save</div>
|
|
|
|
|
<div id="btn-addMsg" class="btn">Create message</div>
|
2019-03-07 20:19:43 +01:00
|
|
|
<div id="btn-diversions" class="btn">View Diversions</div>
|
2019-04-10 18:46:32 +02:00
|
|
|
<div id="btn-audio" class="btn">View Audio Files</div>
|
2019-05-12 14:54:37 +02:00
|
|
|
<div id="btn-config" class="btn">Configuration</div>
|
2019-01-23 15:26:44 +01:00
|
|
|
</div>
|
2019-01-23 15:41:40 +01:00
|
|
|
<div id="msg"></div>
|
2019-02-18 22:33:31 +01:00
|
|
|
<svg id='graph' viewbox="-640 -512 1280 1024"
|
2019-01-23 15:26:44 +01:00
|
|
|
preserveAspectRatio="xMidYMid">
|
|
|
|
|
<defs>
|
|
|
|
|
<marker markerHeight="8" markerWidth="8" refY="0"
|
|
|
|
|
refX="12" viewBox="0 -6 16 12" preserveAspectRatio="none"
|
|
|
|
|
orient="auto" id="arrowHead">
|
|
|
|
|
<path d="M0,-6L16,0L0,6" fill="black"></path></marker>
|
2019-04-11 14:22:45 +02:00
|
|
|
<marker markerHeight="8" markerWidth="8" refY="0"
|
|
|
|
|
refX="12" viewBox="0 -6 16 12" preserveAspectRatio="none"
|
|
|
|
|
orient="auto" id="arrowHeadWhite">
|
|
|
|
|
<path d="M0,-6L16,0L0,6" fill="white"></path></marker>
|
2019-01-23 15:26:44 +01:00
|
|
|
</defs>
|
|
|
|
|
<g id='container'>
|
|
|
|
|
</g>
|
|
|
|
|
</svg>
|
2019-05-11 23:34:06 +02:00
|
|
|
<ul v-for="hv in hugveys" v-if="hv.id == selectedId" id="variables">
|
|
|
|
|
<span v-if="!Object.keys(hv.variables).length">No variables set</span>
|
|
|
|
|
<li v-for="(value, name) in hv.variables">
|
|
|
|
|
<span class='name'>{{name}}</span> <span class='value'>{{value}}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
2019-01-23 15:26:44 +01:00
|
|
|
</div>
|
2019-01-22 08:59:45 +01:00
|
|
|
</div>
|
2019-01-23 15:26:44 +01:00
|
|
|
<script type='application/javascript' src="/js/hugvey_console.js"></script>
|
2019-01-18 19:39:35 +01:00
|
|
|
</body>
|
2019-05-14 17:56:43 +02:00
|
|
|
</html>
|
