Add clock and punch in/out buttons, add database, add branding

.gitignore

@@ -2,3 +2,4 @@ vendor
 settings.php
 nbproject/private
 *.sync-conflict*
+database.mwb.bak

action.php

@@ -3,7 +3,6 @@
 /**
  * Make things happen when buttons are pressed and forms submitted.
  */
-
 require_once __DIR__ . "/required.php";
 
 dieifnotloggedin();
@@ -25,6 +24,10 @@ function returnToSender($msg, $arg = "") {
 }
 
 switch ($VARS['action']) {
+    case "time":
+        $out = ["status" => "OK", "time" => date(TIME_FORMAT), "date" => date(LONG_DATE_FORMAT), "seconds" => date("s")];
+        header('Content-Type: application/json');
+        exit(json_encode($out));
     case "signout":
         session_destroy();
         header('Location: index.php');

api.php

@@ -31,6 +31,6 @@ switch ($VARS['action']) {
         $out = ["status" => "OK", "maxresults" => $max, "pong" => true];
         exit(json_encode($out));
     default:
-        header("HTTP/1.1 400 Bad Request");
+        http_response_code(404);
-        die("\"400 Bad Request\"");
+        die("\"404 Action not found\"");
 }

lang/en_us.php

@@ -25,4 +25,7 @@ define("STRINGS", [
     "login server user data error" => "The login server refused to provide account information.  Try again or contact technical support.",
     "captcha error" => "There was a problem with the CAPTCHA (robot test).  Try again.",
     "home" => "Home",
+    "punch in out" => "Punch In/Out",
+    "you are punched in" => "You are punched in.",
+    "you are not punched in" => "You are not on the clock."
 ]);

pages.php

@@ -5,7 +5,10 @@ define("PAGES", [
     "home" => [
         "title" => "home",
         "navbar" => true,
-        "icon" => "home"
+        "icon" => "home",
+        "scripts" => [
+            "static/js/home.js"
+        ]
     ],
     "404" => [
         "title" => "404 error"

pages/home.php

@@ -1 +1,40 @@
-<h1>Hello World</h1>
+<div class="row">
+    
+    <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-2">
+        <div class="panel panel-default">
+            <div class="panel-body" style="text-align: center;">
+                <h2 id="server_time"><?php echo date(TIME_FORMAT); ?></h2>
+                <h4 id="server_date"><?php echo date(LONG_DATE_FORMAT); ?></h4>
+            </div>
+            <div id="seconds_bar" style="width: 100%; height: 5px; padding-bottom: 5px;">
+                <div style="background-color: #ffc107; height: 5px; width: <?php echo round(date('s') * 1 / 60 * 100, 4); ?>%;"></div>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="col-xs-12 col-sm-6 col-md-4">
+        <div class="panel panel-blue">
+            <div class="panel-heading">
+                <h3 class="panel-title">
+                    <i class="fa fa-clock-o"></i> <?php lang("punch in out"); ?>
+                </h3>
+            </div>
+            <div class="panel-body">
+                <a href="action.php?action=punchin" class="btn btn-block btn-success btn-lg"><i class="fa fa-play"></i> <?php lang("punch in"); ?></a>
+                <br />
+                <a href="action.php?action=punchout" class="btn btn-block btn-danger btn-lg"><i class="fa fa-stop"></i> <?php lang("punch out"); ?></a>
+            </div>
+            <div class="panel-footer">
+                <i class="fa fa-info-circle"></i> <?php
+                if ($database->has('punches', ['AND' => ['uid' => $_SESSION['uid'], 'out' => null]])) {
+                    lang("you are punched in");
+                } else {
+                    lang("you are not punched in");
+                }
+                ?>
+            </div>
+        </div>
+    </div>
+
+</div>

pages/punches.php

@@ -0,0 +1 @@
+<h1>Hello World</h1>

settings.template.php

@@ -35,6 +35,17 @@ define("PORTAL_KEY", "123");
 // For supported values, see http://php.net/manual/en/timezones.php
 define("TIMEZONE", "America/Denver");
 
+// See http://php.net/manual/en/function.date.php
+define("TIME_FORMAT", "g:i A"); // 12 hour time
+#define("TIME_FORMAT", "G:i"); // 24 hour time
+
+// Used in many places
+define("DATETIME_FORMAT", "M j Y g:i:s A"); // 12 hour time
+#define("DATETIME_FORMAT", "M j Y G:i:s"); // 24 hour time
+
+// Used on the clock widget
+define("LONG_DATE_FORMAT", "l F j");
+
 // Base URL for site links.
 define('URL', 'http://localhost/qwikclock');
 

static/img/logo.svg

@@ -16,19 +16,11 @@
    version="1.1"
    inkscape:version="0.91 r13725"
    sodipodi:docname="logo.svg"
-   inkscape:export-filename="/home/skylar/Documents/Projects/Sources/WebAppTemplate/static/img/logo.png"
+   inkscape:export-filename="/home/skylar/Documents/Projects/Assets/QwikClock/logo_64.png"
-   inkscape:export-xdpi="90"
+   inkscape:export-xdpi="11.25"
-   inkscape:export-ydpi="90">
+   inkscape:export-ydpi="11.25">
   <defs
-     id="defs4">
+     id="defs4" />
-    <inkscape:perspective
-       sodipodi:type="inkscape:persp3d"
-       inkscape:vp_x="-493.3276 : 245.89848 : 1"
-       inkscape:vp_y="0 : 1000 : 0"
-       inkscape:vp_z="464.45088 : 245.89848 : 1"
-       inkscape:persp3d-origin="-14.438371 : 160.56515 : 1"
-       id="perspective4236" />
-  </defs>
   <sodipodi:namedview
      id="base"
      pagecolor="#ffffff"
@@ -37,7 +29,7 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="0.49497475"
-     inkscape:cx="-135.9681"
+     inkscape:cx="163.44061"
      inkscape:cy="352.66131"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
@@ -61,7 +53,7 @@
      id="layer1"
      transform="translate(0,-540.36216)">
     <rect
-       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:20;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.74509804"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="rect4726"
        width="512"
        height="512"
@@ -69,10 +61,58 @@
        y="540.36218"
        rx="50"
        ry="50" />
-    <path
+    <g
-       id="path4348"
+       id="g4951"
-       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:9.87128067;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(9.2608029,0,0,9.2608029,-3841.4127,-9435.8076)">
-       d="m 132.93564,682.51771 213.96788,-43.14304 0,313.97496 -213.96788,-37.9643 z m 213.96788,-43.14304 0,313.97496 32.16084,-45.18373 0,-217.44396 z m -213.96788,43.14304 213.96788,-43.14304 32.16084,51.34727 -167.21823,22.47784 z m 78.91049,30.68207 167.21823,-22.47784 0,217.44396 -167.21823,-19.77968 z m -78.91049,-30.68207 0,232.86762 78.91049,-26.99911 0,-175.18644 z m 0,232.86762 213.96788,37.9643 32.16084,-45.18373 -167.21823,-19.77968 z"
+      <circle
-       inkscape:connector-curvature="0" />
+         r="20"
+         cy="1104.8901"
+         cx="442.44681"
+         id="path4138"
+         style="opacity:1;fill:none;fill-opacity:1;stroke:#2196f3;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)"
+         y="465.91809"
+         x="1093.4521"
+         height="5"
+         width="30"
+         id="rect4174"
+         style="opacity:1;fill:#ffd740;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <g
+         style="fill:#90caf9;fill-opacity:1"
+         id="g4243"
+         transform="translate(418.44681,76.527869)">
+        <rect
+           style="opacity:1;fill:#90caf9;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect4180"
+           width="5"
+           height="1"
+           x="7.1973362"
+           y="1027.8622" />
+        <rect
+           style="opacity:1;fill:#90caf9;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect4180-7"
+           width="5"
+           height="1"
+           x="35.906101"
+           y="1027.8622" />
+        <rect
+           style="opacity:1;fill:#90caf9;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect4180-7-5"
+           width="5"
+           height="1"
+           x="1011.4764"
+           y="-24.5"
+           transform="matrix(0,1,-1,0,0,0)" />
+        <rect
+           style="opacity:1;fill:#90caf9;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="rect4180-7-5-3"
+           width="5"
+           height="1"
+           x="1040.3921"
+           y="-24.5"
+           transform="matrix(0,1,-1,0,0,0)" />
+      </g>
+    </g>
   </g>
 </svg>

static/js/home.js

@@ -0,0 +1,45 @@
+function setClock() {
+    $.getJSON("action.php", {
+        action: "time"
+    }, function (resp) {
+        if (resp.status == "OK") {
+            $('#server_time').text(resp.time);
+            $('#server_date').text(resp.date);
+            var seconds = resp.seconds * 1;
+            var interval = 60 - seconds;
+            console.log(interval);
+            if (interval > 5) {
+                interval = 5;
+            }
+            console.log(interval);
+            console.log((((seconds + interval) / 60) * 100));
+            $('#seconds_bar div').animate({
+                width: (((seconds + interval) / 60) * 100) + "%"
+            }, 1000 * interval, "linear", function () {
+                if (interval < 5) {
+                    $('#seconds_bar div').animate({
+                        width: "0%"
+                    }, 1000, "linear", function () {
+                        $('#seconds_bar div').animate({
+                            width: (((5 - interval - 1) / 60) * 100) + "%"
+                        }, 1000 * (5 - interval - 1), "linear");
+                    });
+                }
+            });
+        }
+    });
+}
+
+function setSeconds() {
+    //$('#seconds_bar div').css("width", ((seconds / 60) * 100) + "%");
+    $('#seconds_bar div').animate({
+        width: ((seconds / 60) * 100) + "%"
+    }, 1000, "linear", function () {
+        seconds++;
+    });
+}
+
+$(document).ready(function () {
+    setClock();
+    setInterval(setClock, 5000);
+});