hugvey/www/index.html

89 lines
3.2 KiB
HTML
Raw Normal View History

2019-01-18 19:39:35 +01:00
<html>
<head>
<title>Pillow Talk Control Interface</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>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
2019-01-23 15:26:44 +01:00
<link rel="stylesheet" href="/css/styles.css"></link>
2019-01-18 19:39:35 +01:00
</head>
<body>
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'>
<dl>
<dt>Uptime</dt>
<dd>{{uptime}}</dd>
</dl>
2019-01-24 14:27:04 +01:00
<ul id='languages'>
<li v-for="lang in languages" :title="lang.file"
:id="'lang-' + lang.code" class="btn lang--btn"
@click="loadNarrative(lang.code, lang.file)"><span
:class="['flag-icon', lang.code]"></span> {{lang.code}}</li>
2019-01-24 14:27:04 +01:00
</ul>
2019-01-23 15:26:44 +01:00
</div>
<div class='hugvey' v-for="hv in hugveys"
2019-01-25 14:10:19 +01:00
:class="[{'hugvey--on': hv.status != 'off'},'hugvey--' + hv.status]"
@click="showHugvey(hv)"
>
2019-01-23 15:26:44 +01:00
<h1>
{{ hv.id }}
</h1>
<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'">
<select v-model="hv.language" @change="change_lang(hv, hv.language)">
<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 }}
<div v-if="hv.finished != false"><img class='icon' :src="'/images/icon-finished.svg'" title="Finished"> {{timer(hv,
2019-01-23 15:26:44 +01:00
'finished')}}</div>
2019-01-25 11:17:10 +01:00
<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>
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-01-23 15:26:44 +01:00
</div>
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>
<div class='btn' v-if="hv.status == 'finished'" @click.stop="restart(hv)">Restart</div>
2019-01-25 11:59:03 +01:00
</div>
</div>
</div>
2019-01-23 15:26:44 +01:00
<div id='story'>
<div id="controls">
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-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>
</defs>
<g id='container'>
</g>
</svg>
</div>
</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>
</html>