2020-11-08 15:21:51 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>Juggl</title>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<link rel="shortcut icon" type="image/ico" href="/assets/logo.ico" />
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap"
|
|
|
|
|
rel="stylesheet">
|
|
|
|
|
<link href="css/style.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
<script src="js/umbrella.min.js"></script>
|
|
|
|
|
<script src="js/visibility.js"></script>
|
|
|
|
|
<script src="js/auth.js"></script>
|
|
|
|
|
<script src="js/api.js"></script>
|
|
|
|
|
<script src="js/helper.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
2020-11-09 14:22:34 +01:00
|
|
|
var intervallId = undefined;
|
|
|
|
|
window.onblur = () => {
|
|
|
|
|
stopBackgroundUpdates();
|
|
|
|
|
}
|
|
|
|
|
window.onfocus = () => {
|
|
|
|
|
startBackgroundUpdates();
|
|
|
|
|
}
|
2020-11-08 15:21:51 +01:00
|
|
|
window.onload = () => {
|
|
|
|
|
// Create Callbacks
|
2020-11-09 14:22:34 +01:00
|
|
|
callbacks.entering[States.RECORDING] = () => {
|
|
|
|
|
updateProgess();
|
2020-11-08 15:21:51 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
initState();
|
2020-11-09 14:22:34 +01:00
|
|
|
onLogIn();
|
2020-11-08 15:21:51 +01:00
|
|
|
updateVisibility();
|
|
|
|
|
updateAuthBtnText();
|
2020-11-09 14:22:34 +01:00
|
|
|
startBackgroundUpdates();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onLogIn() {
|
|
|
|
|
loadProjectList().then(() => {
|
|
|
|
|
checkForUpdate();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function checkForUpdate() {
|
|
|
|
|
if (currentRecord !== undefined) {
|
|
|
|
|
updateProgess();
|
|
|
|
|
} else {
|
|
|
|
|
initRunningRecords().then(() => {
|
|
|
|
|
if (currentRecord !== undefined) {
|
|
|
|
|
setState(States.RECORDING);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateProgess () {
|
|
|
|
|
if (currentRecord === undefined) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
updateCurrentRecord().then((record) => {
|
|
|
|
|
if (record.end_time != null) {
|
|
|
|
|
currentRecord = undefined;
|
|
|
|
|
setState(States.IDLE);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
u("#current-project-name").text(currentProject.name);
|
|
|
|
|
u("#current-record-duration").text((parseInt(record.duration) / 60).toFixed(1) + " min.");
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function startBackgroundUpdates () {
|
|
|
|
|
if (intervallId !== undefined) return;
|
|
|
|
|
intervallId = setInterval(checkForUpdate, 30000);
|
|
|
|
|
checkForUpdate();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function stopBackgroundUpdates () {
|
|
|
|
|
clearInterval(intervallId);
|
|
|
|
|
intervallId = undefined;
|
2020-11-08 15:21:51 +01:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<ul id="header-container">
|
|
|
|
|
<li>
|
|
|
|
|
<img src="assets/logo_title.png">
|
|
|
|
|
</li>
|
|
|
|
|
<li style="float: right">
|
2020-11-09 14:22:34 +01:00
|
|
|
<input id="user-id" class="public hidden" type="text" placeholder="User ID" />
|
|
|
|
|
<input id="api-key" class="public hidden" type="password" placeholder="API Key" />
|
2020-11-08 15:21:51 +01:00
|
|
|
<button id="auth-btn" onclick="handleAuthBtn()">Log In</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</header>
|
|
|
|
|
<main>
|
2020-11-09 14:22:34 +01:00
|
|
|
<div class="idle hidden" style="text-align: center;">
|
2020-11-08 21:40:07 +01:00
|
|
|
<h1>
|
|
|
|
|
Select project to track
|
|
|
|
|
</h1>
|
|
|
|
|
<div id="project-list">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-11-09 14:22:34 +01:00
|
|
|
<div class="recording hidden" style="text-align: center;">
|
|
|
|
|
<h1>
|
|
|
|
|
Tracking <span id="current-project-name"></span>
|
|
|
|
|
</h1>
|
|
|
|
|
<h2 id="current-record-duration" style="color: red;"></h2>
|
|
|
|
|
<small id="update-notice" >Updated every 30 seconds</small><br/>
|
|
|
|
|
<button id="stop-btn" onclick="stopRecord()">Stop</button>
|
|
|
|
|
</div>
|
2020-11-08 15:21:51 +01:00
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
