summaryrefslogtreecommitdiff
path: root/modules/timetrack3/timetrack.html
diff options
context:
space:
mode:
authorTom Smeding <tom@tomsmeding.com>2022-09-06 23:11:57 +0200
committerTom Smeding <tom@tomsmeding.com>2022-09-06 23:11:57 +0200
commitefb81ae3be0ec88193847f2865df124c1a2c6543 (patch)
treebb603c68c07cae231f846c73bd28ff3ae2e15bfa /modules/timetrack3/timetrack.html
parentee25ef17677c9360bb03b2d665d5e33ba0d7b9bc (diff)
timetrack3
Diffstat (limited to 'modules/timetrack3/timetrack.html')
-rw-r--r--modules/timetrack3/timetrack.html431
1 files changed, 431 insertions, 0 deletions
diff --git a/modules/timetrack3/timetrack.html b/modules/timetrack3/timetrack.html
new file mode 100644
index 0000000..3790f43
--- /dev/null
+++ b/modules/timetrack3/timetrack.html
@@ -0,0 +1,431 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>TimeTrack</title>
+<script>
+"use strict";
+
+var ROOT_ENDPOINT="/timetrack3";
+
+var lastlist=null;
+
+function fetch(method,url,data/*?*/,creds/*?*/,cb){
+ if(!creds){
+ cb=data;
+ data=undefined;
+ creds=undefined;
+ } else if(!cb){
+ cb=creds;
+ creds=undefined;
+ }
+ if(!cb)throw new Error("No callback passed to fetch");
+ var xhr=new XMLHttpRequest();
+ xhr.onreadystatechange=function(ev){
+ if(xhr.readyState<4)return;
+ cb(xhr.status,xhr.responseText);
+ };
+ if(creds){
+ xhr.open(method,url,true,creds[0],creds[1]);
+ } else {
+ xhr.open(method,url);
+ }
+ xhr.send(data);
+}
+
+function pad(s,n,c){
+ if(c==null)c=" ";
+ else c=c[0];
+ s=s+"";
+ while(s.length<n)s=c+s;
+ return s;
+}
+
+function toinputdate(date) {
+ return date.getFullYear() + "-" +
+ pad(date.getMonth()+1,2,"0") + "-" +
+ pad(date.getDate(),2,"0") + " " +
+ pad(date.getHours(),2,"0") + ":" +
+ pad(date.getMinutes(),2,"0") + ":" +
+ pad(date.getSeconds(),2,"0");
+}
+
+function daystart(date){
+ return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function shiftdays(date, off) {
+ var d = new Date(date);
+ d.setDate(d.getDate() + off);
+ return d;
+}
+
+function weekstart(date){
+ return shiftdays(daystart(date), -(date.getDay() + 6) % 7);
+}
+
+var monthnames=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+var weekdays=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
+
+function formatdate(date) {
+ return weekdays[(date.getDay() + 6) % 7] + ", " + toinputdate(date);
+}
+
+function formatdaterange(d1, d2) {
+ var s1 = formatdate(d1);
+ if (daystart(d1).getTime() == daystart(d2).getTime()) {
+ return formatdate(d1) + " - " +
+ pad(d2.getHours(), 2, "0") + ":" +
+ pad(d2.getMinutes(), 2, "0") + ":" +
+ pad(d2.getSeconds(), 2, "0")
+ } else {
+ return formatdate(d1) + " - " + formatdate(d2);
+ }
+}
+
+function formatduration(secs) {
+ var r = "";
+ if (secs % 60 != 0) r = secs % 60 + "s" + r;
+ secs = ~~(secs / 60);
+ if (secs % 60 != 0) r = secs % 60 + "m" + r;
+ secs = ~~(secs / 60);
+ if (secs % 24 != 0) r = secs % 24 + "h" + r;
+ secs = ~~(secs / 24);
+ if (secs != 0) r = secs + "d" + r;
+ if (r == "") r = "0s";
+ return r;
+}
+
+function tablerowfor(ev){
+ var div=document.createElement("div");
+ div.classList.add("event");
+
+ var e,e2;
+
+ e=document.createElement("span");
+ e.classList.add("eventsheet");
+ e.appendChild(document.createTextNode(ev.sheet));
+ div.appendChild(e);
+
+ if (ev.descr != "") {
+ e=document.createElement("span");
+ e.classList.add("eventdescr");
+ e.appendChild(document.createTextNode("(" + ev.descr + ")"));
+ div.appendChild(e);
+ }
+
+ var float=document.createElement("div");
+ float.classList.add("eventfloat");
+
+ e=document.createElement("span");
+ e.classList.add("eventdate");
+ e.appendChild(document.createTextNode(formatdaterange(ev.indate,ev.outdate) + " (" + formatduration(~~((ev.outdate - ev.indate) / 1000)) + ")"));
+ e.setAttribute("title",ev.indate.toString() + " - " + ev.outdate.toString());
+ float.appendChild(e);
+
+ e=document.createElement("div");
+ e.classList.add("eventbuttons");
+ e2=document.createElement("span");
+ e2.classList.add("eventdelete");
+ e2.appendChild(document.createTextNode("X"));
+ e2.addEventListener("click",function(){
+ if(!confirm("Really delete event \""+ev.sheet+"\" (\""+ev.descr+"\") at "+formatdate(ev.indate)+"?"))return;
+ fetch("DELETE",ROOT_ENDPOINT+"/event",ev.id,function(status,body){
+ if(status==200){getlist(false); getsheets();}
+ else alert("Delete failed: "+body);
+ });
+ });
+ e.appendChild(e2);
+ float.appendChild(e);
+
+ div.appendChild(float);
+
+ return div;
+}
+
+function refreshlist(list){
+ var listelem = document.getElementById("eventlist");
+ listelem.innerHTML = "";
+
+ if (list.length == 0) {
+ var div = document.createElement("div");
+ div.classList.add("noevents");
+ div.appendChild(document.createTextNode("No events yet"));
+ listelem.appendChild(div);
+ return;
+ }
+
+ for (var i = 0; i < list.length; i++) {
+ listelem.appendChild(tablerowfor(list[i]));
+ }
+}
+
+function handleReceivedList(list){
+ lastlist = list;
+ refreshlist(list);
+}
+
+function updateCurrentBox(current) {
+ var sheet = current ? current.sheet : "";
+ var descr = current ? current.descr : "";
+ var indate = current ? toinputdate(current.indate) : "";
+
+ var e = document.getElementById("currentsheet");
+ e.innerHTML = "";
+ e.appendChild(document.createTextNode(sheet));
+ e = document.getElementById("currentdescr");
+ e.innerHTML = "";
+ e.appendChild(document.createTextNode(descr));
+ e = document.getElementById("currentindate");
+ e.innerHTML = "";
+ e.appendChild(document.createTextNode(indate));
+
+ var box = document.getElementById("currentbox");
+ var inputs = box.getElementsByTagName("input");
+ if (current == null) {
+ for (var i = 0; i < inputs.length; i++) inputs[i].setAttribute("disabled", "");
+ box.classList.add("disabled");
+ box.classList.remove("enabled");
+ } else {
+ for (var i = 0; i < inputs.length; i++) inputs[i].removeAttribute("disabled");
+ box.classList.add("enabled");
+ box.classList.remove("disabled");
+ }
+}
+
+function getlist(isinitial){
+ fetch("GET", ROOT_ENDPOINT + "/recent", function(status, body) {
+ if (status != 200) {
+ alert("Error: "+body);
+ return;
+ }
+ var obj;
+ try {
+ obj = JSON.parse(body);
+ } catch(e){
+ alert("An error occurred!");
+ return;
+ }
+ for (var i = 0; i < obj.length; i++) {
+ obj[i].indate = new Date(obj[i].indate * 1000);
+ obj[i].outdate = new Date(obj[i].outdate * 1000);
+ }
+ handleReceivedList(obj);
+ if (isinitial) document.getElementById("checkinbox").scrollIntoView();
+ });
+
+ fetch("GET", ROOT_ENDPOINT + "/current", function(status, body) {
+ if (status != 200) {
+ alert("Error: "+body);
+ return;
+ }
+ var obj;
+ try {
+ obj = JSON.parse(body);
+ } catch(e){
+ alert("An error occurred!");
+ return;
+ }
+ if (obj.sheet) {
+ obj.indate = new Date(obj.indate * 1000);
+ updateCurrentBox(obj);
+ } else {
+ updateCurrentBox(null);
+ }
+ dateToNow("checkindate");
+ dateToNow("checkoutdate");
+ });
+}
+
+function getsheets() {
+ fetch("GET",ROOT_ENDPOINT+"/sheets",function(status,body){
+ if(status!=200){
+ // alert("Error: "+body);
+ return;
+ }
+ var sheets;
+ try {
+ sheets=JSON.parse(body);
+ } catch(e){
+ // alert("An error occurred!");
+ return;
+ }
+
+ var el=document.getElementById("sheetselect");
+ el.innerHTML = "<option value=\"\" selected></option>";
+
+ var totbox_html = "";
+ var totbox = document.getElementById("totalsbox");
+ totbox.innerHTML = "";
+
+ for (var i = 0; i < sheets.length; i++) {
+ var opt = document.createElement("option");
+ opt.value = sheets[i].sheet;
+ opt.innerHTML = sheets[i].sheet;
+ el.appendChild(opt);
+
+ totbox.appendChild(document.createTextNode(sheets[i].sheet + ": " + formatduration(sheets[i].total)));
+ totbox.appendChild(document.createElement("br"));
+ }
+ });
+}
+
+function doCheckin(atdate) {
+ if (atdate) atdate = new Date(document.getElementById("checkindate").value);
+ else atdate = new Date();
+ var sheet = document.getElementById("checkinsheet").value;
+ var descr = document.getElementById("checkindescr").value;
+ fetch("POST", ROOT_ENDPOINT + "/checkin", JSON.stringify({
+ sheet: sheet,
+ descr: descr,
+ date: ~~(atdate.getTime() / 1000)
+ }), function(status, body) {
+ if (status != 200) {
+ alert("Error performing check-in: " + body);
+ return;
+ }
+ getlist(false);
+ getsheets();
+ });
+}
+
+function doCheckout(atdate) {
+ if (atdate) atdate = new Date(document.getElementById("checkoutdate").value);
+ else atdate = new Date();
+ fetch("POST", ROOT_ENDPOINT + "/checkout", JSON.stringify({
+ date: ~~(atdate.getTime() / 1000)
+ }), function(status, body) {
+ if (status != 200) {
+ alert("Error performing check-out: " + body);
+ return;
+ }
+ getlist(false);
+ getsheets();
+ });
+}
+
+function setSheetFromSelect() {
+ document.getElementById("checkinsheet").value =
+ document.getElementById("sheetselect").value;
+}
+
+function logoutReload(){
+ fetch("GET", ROOT_ENDPOINT + "/authfail", undefined, ["x", "x"], function(status, body) {
+ location.href = location.href;
+ });
+}
+
+function dateToNow(textboxid) {
+ document.getElementById(textboxid).value = toinputdate(new Date());
+}
+
+window.addEventListener("load", function() {
+ getlist(true);
+ getsheets();
+ dateToNow("checkindate");
+ dateToNow("checkoutdate");
+});
+</script>
+<style>
+body{
+ font-family:Georgia,Times,serif;
+ font-size:14px;
+}
+.event{
+ border:1px #ddd solid;
+ border-bottom-width:0px;
+ padding:0px 9px;
+ background-color:#f8f8f8;
+ width:550px;
+}
+.event:last-child{
+ border-bottom-width:1px;
+}
+.eventsheet{
+ font-size:20px;
+ margin-left:10px;
+}
+.eventdescr{
+ font-size:15px;
+ margin-left:10px;
+ width:150px;
+ display:inline-block;
+}
+.eventfloat{
+ float:right;
+ text-align:right;
+}
+.eventdate{
+ font-size:12px;
+ font-style:italic;
+ display:inline-block;
+ margin-top:6px;
+}
+.eventbuttons{
+ display:inline-block;
+ margin-left:60px;
+ font-size:10px;
+ vertical-align:middle;
+ width:10px;
+ text-align:center;
+}
+.eventdelete{
+ margin-bottom:5px;
+ font-size:10px;
+ font-family:sans-serif;
+ color:red;
+ cursor:pointer;
+}
+#currentbox.enabled{
+ background-color: #dfd;
+}
+#currentbox.disabled{
+ background-color: #eee;
+}
+#currentsheet{
+ font-weight: bold;
+}
+#checkinbox, #currentbox, #totalsbox{
+ border:1px #ddd solid;
+ display:inline-block;
+ padding:5px;
+}
+#checkinbox > input[type="text"], #currentbox > input[type="text"] {
+ margin-bottom: 5px;
+}
+#logoutwrapper{
+ float:right;
+}
+</style>
+</head>
+<body>
+<div id="logoutwrapper">
+ <input type="button" onclick="logoutReload();" value="Logout">
+</div>
+<h1>TimeTrack</h1>
+<div id="eventlist"></div>
+<br><br>
+<div id="currentbox">
+ Checked into: <span id="currentsheet"></span> (<span id="currentdescr"></span>)<br>
+ Check-in at: <span id="currentindate"></span><br><br>
+
+ <input type="button" onclick="doCheckout(false)" value="Check out now"><br>
+ Or: <input type="datetime" id="checkoutdate" placeholder="YYYY-MM-DD HH:MM:SS" size="25">
+ <input type="button" onclick="dateToNow('checkoutdate')" value="now"><br>
+ <input type="button" onclick="doCheckout(true)" value="Check out at date">
+</div>
+<br><br>
+<div id="checkinbox">
+ Sheet: <input type="text" id="checkinsheet" placeholder="Sheet">
+ <select id="sheetselect" onchange="setSheetFromSelect()"></select> <br>
+ Text: <input type="text" id="checkindescr" placeholder="Text"> (optional) <br>
+
+ <input type="button" onclick="doCheckin(false)" value="Check in now"><br>
+ Or: <input type="datetime" id="checkindate" placeholder="YYYY-MM-DD HH:MM:SS" size="25">
+ <input type="button" onclick="dateToNow('checkindate')" value="now"><br>
+ <input type="button" onclick="doCheckin(true)" value="Check in at date">
+</div>
+<br><br>
+<div id="totalsbox"></div>
+</body>
+</html>
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-03 13:12:15 +0200