jrd/floorbell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Format status box

Browse Source
This commit is contained in:
Jared Burce
2020-10-28 21:41:29 -07:00
parent be65559f87
commit 59e0643902
1 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
static/main.html
View File

@@ -4,25 +4,50 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Fáfnir Doorbell</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<style>
body {
background-color: black;
color: white;
}
#status_box {
margin: auto;
width: 30%;
border-style: ridge;
border-color: yellow;
border-width: 5px;
padding: 15px;
}
.status {
font-family: monospace;
font-size: 250%;
font-variant: small-caps;
}
.connected {
color: green;
}
.disconnected {
color: red;
}
</style>
</head>
<body>
<section id="status">
<section id="status_box">
Status:
<span id="status_line"></span>
</section>
<section id="log">
<h1>Incoming Events</h1>
<br><br>
Last Ring: <span id="last_ring" class="status"></span>
</section>
<audio id="chime" src="indoor.mp3"></audio>
<template id="connected">
<span class="connected">Connected</span>
<span class="status connected">Connected</span>
</template>
<template id="disconnected">
<span class="disconnected">Disconnected</span>
</template>
<template id="ring">
<p>Ring!
<span class="status disconnected">Disconnected</span>
</template>
<script>
"use strict";
@@ -66,8 +91,16 @@
if (chime.paused) {
chime.play();
}
const template = get_template('ring');
$('#log').append(template);
let now = new Date();
let hours = now.getHours();
let hours12 = (hours + 11) % 12 + 1;
let mins = now.getMinutes();
mins = (mins < 10) ? '0' + mins : mins;
let secs = now.getSeconds();
secs = (secs < 10) ? '0' + secs : secs;
let demidiemity = (hours / 12)|0 ? 'PM' : 'AM';
$('#last_ring').text(`${hours12}:${mins}:${secs} ${demidiemity}`);
});
};