parse & summarize work time for today

maizy · Oct 25, 2020 · db77622 · db77622
1 parent f427cef
commit db77622
Show file tree

Hide file tree

Showing 3 changed files with 368 additions and 34 deletions.
diff --git a/css/wlb.css b/css/wlb.css
@@ -9,7 +9,7 @@ body {
 
 #grid {
   display: grid;
-  grid-template-columns: 1.75fr 1.15fr;
+  grid-template-columns: minmax(250px, 400px) minmax(200px, 1fr);
   grid-column-gap: 3em;
   grid-auto-rows: minmax(5em, auto);
 }
@@ -18,8 +18,58 @@ body {
     padding: 0.3em 0.3em;
   }
 
+  #grid #input {
+    grid-column: 1;
+  }
+
+  #grid #days {
+    grid-column: 2;
+  }
+
 textarea.input-area {
   width: 100%;
-  font-size: 3em;
+  font-size: 2em;
   height: 10em;
 }
+
+h1 .app-version {
+  color: #999999;
+  font-size: 0.3em;
+  font-weight: normal;
+  vertical-align: super;
+  margin-left: 1em;
+}
+
+pre.input-example {
+  width: 150px;
+  padding: 0.2em;
+  padding-left: 1em;
+  margin: 0;
+}
+pre.input-example:hover {
+  border: 1px dashed #111;
+  cursor: pointer;
+}
+
+table.periods-table {
+  table-layout: fixed;
+}
+  table.periods-table th {
+    text-align: left;
+  }
+  table.periods-table th,
+  table.periods-table td {
+    width: 80px;
+  }
+
+  table.periods-table .assumed {
+    font-style: italic;
+  }
+
+.summary {
+  margin-top: 2em;
+}
+
+  .summary .value-label {
+    font-weight: bold;
+  }
diff --git a/index.html b/index.html
@@ -13,22 +13,35 @@
 
 <body>
 
-  <h1>WLB</h1>
+  <h1>WLB <span class="app-version">v0.1-alpha</span></h1>
 
   <div class="warning">Use modern browser with JavaScript support.</div>
 
   <div id="grid">
     <div id="input" class="grid-cell">
       <h3>Worktime</h3>
       <textarea class="input-area" id="time-input"></textarea>
+      <div class="description">
+        <p>One work period per line. Only the 24-hour clock format is supported for now.</p>
+        <p>If an end time is ommited current time is assumed.</p>
+        <p>Try use any time format you like.</p>
+        <p>Example:<br/>
+        <pre class="input-example">9-15 14-45
+15:00 - 15:30
+16 - 17
+18</pre>
+        </p>
+        <p>All entred data are saved localy in your browser only.</p>
+      </div>
     </div>
     <div id="days" class="grid-cell">
       <div id="current-day">
         <h3>Today</h3>
+        <div id="today-periods"></div>
       </div>
-      <div id="previous-days">
-        <h3>Previous days</h3>
-      </div>
+<!--      <div id="previous-days">-->
+<!--        <h3>Previous days</h3>-->
+<!--      </div>-->
     </div>
   </div>