dorian
/
ok-ready-go
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Feat: add instructions to webinterface
continuous-integration/drone/push Build was killed Details
continuous-integration/drone/tag Build was killed Details

This commit is contained in:
Dorian Zedler 2023-02-17 16:16:23 +01:00
parent c9f3883c19
commit 3d68117ff4
Signed by: dorian
GPG Key ID: 989DE36109AFA354
4 changed files with 88 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.drone.yml
View File

@ -47,6 +47,10 @@ steps:
ssh_key: ssh_key:
from_secret: gitea-ssh-key from_secret: gitea-ssh-key
trigger:
ref:
- refs/tags/v*
--- ---
kind: pipeline kind: pipeline
name: release name: release

28
web/index.css
View File

@ -28,12 +28,21 @@
animation: blinker 2s ease infinite; animation: blinker 2s ease infinite;
} }
html {
height: 100%;
}
body {
height: 100%;
}
main { main {
padding-top: 0 !important; padding-top: 0 !important;
height: 100%;
} }
.timer-container-div { .timer-container-div {
height: 100vh; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -50,4 +59,21 @@ main {
top: 0; top: 0;
left: 0; left: 0;
cursor: pointer; cursor: pointer;
}
.hide-before-init {
display: none;
}
.remote-connection-card {
position: absolute;
bottom: 10px;
left: 0;
background-color: var(--background-color);
width: 100%;
}
details {
border-bottom: 0;
padding-bottom: 0;
} }

67
web/index.html
View File

@ -30,47 +30,72 @@
</head> </head>
<body> <body>
<script> <div class="timer-container-div hide-after-init">
const event = new Event('wasm-loaded'); <h1 class="loading" aria-busy="true">Initializing...</h1>
wasm_bindgen('lib/crypto_helper_bg.wasm').then(() => { </div>
document.dispatchEvent(event); <main class="container hide-before-init" x-data>
});
</script>
<main class="container" x-data>
<div class="timer-container-div" x-show="$store.localState._state !== 5"> <div class="timer-container-div" x-show="$store.localState._state !== 5">
<div @click="$store.localState.next()" class="tap-area" x-show="$store.localState._state === 2"></div> <div @click="$store.localState.next()" class="tap-area" x-show="$store.localState._state === 2"></div>
<div @click="$store.localState.next()" class="timer-div"> <div @click="$store.localState.next()" class="timer-div">
<hgroup> <hgroup>
<h1>OK! .. READY! ... GO!</h1> <h1>OK! .. READY! ... GO!</h1>
<h2 x-text="$store.localState.stateHint"></h2> <h2><span x-text="$store.localState.stateHint"></span> <b x-show="$store.mqtt.connected">(connected)</b></h2>
</hgroup> </hgroup>
<div x-data="Timer"> <div x-data="Timer">
<p :class="'timer' + (over ? ($store.localState._state === 3 ? ' sending':' over'):'')" x-text="time + 's'"></p> <p :class="'timer' + (over ? ($store.localState._state === 3 ? ' sending':' over'):'')"
x-text="time + 's'"></p>
</div> </div>
</div> </div>
</div> </div>
<div x-show="$store.localState._state === 0"> <div x-show="$store.localState._state === 0" class="remote-connection-card">
<div class="container">
<details> <details>
<summary>Remote connection</summary> <div class="container">
<p>If you want to automatically transfer the time to a computer, follow these steps:</p>
<div x-show="!$store.mqtt.connected"> <div x-show="!$store.mqtt.connected">
<p>To send the times to a computer, please enter a password here:</p> <ul>
<form x-data="PasswordForm()" @submit.prevent="submitForm"> <li>Enter a password and press tap connect</li>
<label for="passwordForm_password">Password:</label>
<input id="passwordForm_password" type="text" x-model="formData.password" placeholder="Password" /> <li>
<small>Make sure, this is exactly the same on your computer!</small> <form x-data="PasswordForm()" @submit.prevent="submitForm">
<button type="submit">Connect</button> <label for="passwordForm_password">Password:</label>
</form> <input id="passwordForm_password" type="text" x-model="formData.password"
placeholder="Password" />
<small>Make sure, this is exactly the same on your computer!</small>
<button type="submit">Connect</button>
</form>
</li>
<li>Download the receiver tool from <a
href="https://itsblue.dev/dorian/ok-ready-go/releases/latest">here</a> to your computer
</li>
<li>Start the receiver tool on your computer</li>
<li>Enter the same password on the receiver tool and click connect</li>
<li>Done!</li>
</ul>
</div> </div>
<div x-show="$store.mqtt.connected"> <div x-show="$store.mqtt.connected">
<p>Connected</p> <ul>
<button @click="$store.localState.password = ''">Disconnect</button> <li>Download the receiver tool from <a
href="https://itsblue.dev/dorian/ok-ready-go/releases/latest">here</a> to your computer
</li>
<li>Start the receiver tool on your computer</li>
<li>Enter the password '<b x-text="$store.localState.password"></b>' on the receiver tool and click connect</li>
<li>Done!</li>
<li>
<p>If you no longer want to send the time, tap Disconnect</p>
<button @click="$store.localState.password = ''">Disconnect</button>
</li>
</ul>
</div> </div>
</div>
<summary role="button">Remote connection</summary>
</details> </details>
</div> </div>
</div>
<div class="timer-container-div" x-show="$store.localState._state === 5"> <div class="timer-container-div" x-show="$store.localState._state === 5">
<h1 class="loading" aria-busy="true">Connecting...</h1> <h1 class="loading" aria-busy="true">Connecting...</h1>

12
web/js/index.js
View File

@ -59,4 +59,14 @@ function Timer() {
}, 10); }, 10);
}, },
}; };
} }
const event = new Event('wasm-loaded');
wasm_bindgen('lib/crypto_helper_bg.wasm').then(() => {
document.dispatchEvent(event);
});
document.addEventListener("alpine:init", () => {
document.getElementsByClassName("hide-after-init").item(0).outerHTML = ""
document.getElementsByClassName("hide-before-init").item(0).classList.remove("hide-before-init")
});