css

punch_list/css/custom.css

@@ -11,6 +11,67 @@ textarea {
 	display: none;}
 #editEvent {
 	display: none; }
+.navbar {
+  overflow: hidden;
+  background-color: #333;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.navbar a {
+  float: left;
+  font-size: 16px;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.dropdown {
+  float: left;
+  overflow: hidden;
+}
+
+.dropdown .dropbtn {
+  cursor: pointer;
+  font-size: 16px;
+  border: none;
+  outline: none;
+  color: white;
+  padding: 14px 16px;
+  background-color: inherit;
+  font-family: inherit;
+  margin: 0;
+}
+
+.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
+  background-color: red;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  float: none;
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  text-align: left;
+}
+
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+
+.show {
+  display: block;
+}
 .warn	{ color: yellow; }
 .green	{ color: lime; }
 .over	{ color: red; }
@@ -51,14 +112,28 @@ table.punches {
   color: #AAA;
   padding: 5px;
   margin-bottom: 0px; }
+.centerMiddle {
+	height: 100%;
+	width: 100%;
+	padding:0px;
+	text-align: center;
+	vertical-align: center;
+	margin-top: 50%; }
 .button {
+	display: block;
+	padding: 0px;
+	text-align: center;
+	text-decoration: none;
+	font-size: 2rem;
 	vertical-align: middle;
   border: 1px solid #333;
   background-color:  #4CAF50;
-  margin-top: 0px;
+  margin-top: auto;
-  margin-bottom: 0px;
+  margin-bottom: auto;
-  width: 150px;
+	margin-left: auto;
-  height: 90px;}
+	margin-right: auto;
+  width: 98%;
+  height: 70px;}
 .nav-button {
 	vertical-align: middle;
   float: right }
@@ -83,11 +158,13 @@ table.punches {
 /* Larger than phone */
 @media (min-width: 550px) {
   .button {
+		padding: 0px;
 		vertical-align: middle;
     border: 1px solid #333;
     background-color:  #4CAF50;
     margin-top: 10px;
     margin-bottom: 0px;
+		width: 150px;
     height: 45px; }
   .nav-button {
 		vertical-align: middle;

punch_list/eventManage.js

@@ -22,6 +22,7 @@ function putJson(data) {
 }
 
 function getJson(callback) {
+	displayMeta();
 	console.log(`getJson`);
 	let req = new XMLHttpRequest();
 	req.onreadystatechange = () => {
@@ -50,7 +51,7 @@ function genList(punchList) {
 	list = "<table id=punchListTable class=punches><th class=punches>Punch Item</th><th class=punches>Status</th><th class=punches>Priority</th><th>Action</th>";
 
 	for (i = 0; i < listLength; i++) {
-		list += "<tr onClick=enablePunchDetail(" + i + ")><td onClick=enablePunchDetail(" + i + ") class=" + itemStyle + ">" + punchList[i].subject + "</td><td class=" + itemStyle + ">" + punchList[i].progress + "</td><td class=" + itemStyle + ">" + punchList[i].priority + "</td><td class=" + itemStyle + "><a onClick=startPunch(" + i +")>start</a> | <a onClick=completePunch(" + i + ")>done</a> | <a onClick=editPunch(" + i + ")>edit</a> | <a onClick=deletePunch(" + i + ")>delete</a></td></tr>";
+		list += "<tr><td onClick=enablePunchDetail(" + i + ") class=" + itemStyle + ">" + punchList[i].subject + "</td><td class=" + itemStyle + ">" + punchList[i].progress + "</td><td class=" + itemStyle + ">" + punchList[i].priority + "</td><td><div class=dropdown><button class=dropbtn onClick=dropMenu(" + i + ")>Act<i class='fa fa-caret-down'></i></button><div class=dropdown-content id='myDropdown" + i + "'><a onClick=startPunch(" + i + ")>start</a><a onClick=completePunch(" + i + ")>done</a><a onClick=editPunch(" + i + ")>edit</a><a onClick=deletePunch(" + i + ")>delete</a></div></div></div></td></tr>";
 	}
 
 	list += "</table>";
@@ -131,3 +132,24 @@ function disableElement(element) {
 	console.log(`disabling ${element}`);
 	document.getElementById(element).style.display = "none";
 }
+
+function displayMeta() {
+	document.getElementById("meta").innerHTML = "Version: " + version ;
+}
+
+/* When the user clicks on the button,
+toggle between hiding and showing the dropdown content */
+function dropMenu(item) {
+	window.dropId = "myDropdown" + item;
+  document.getElementById(window.dropId).classList.toggle("show");
+}
+
+// Close the dropdown if the user clicks outside of it
+window.onclick = function(e) {
+  if (!e.target.matches('.dropbtn')) {
+  var myDropdown = document.getElementById(window.dropId);
+    if (myDropdown.classList.contains('show')) {
+      myDropdown.classList.remove('show');
+    }
+  }
+}

punch_list/index.html

@@ -26,9 +26,9 @@
 	<body onLoad="getJson(genList)">
 
 		<div class="u-full-width u-max-full-width container row">
-			<a class="button" onClick="disableElement('punchList'), disableElement('punchDetail'), enableElement('newEvent')" id="put">New Punch Item</a>
+			<button class="button" onClick="disableElement('punchList'), disableElement('punchDetail'), enableElement('newEvent')" id="put">New Punch Item</button>
-			<a class="button" onClick="getJson(genList)" id="getJson">Refresh</a>
+			<button class="button" onClick="getJson(genList)" id="getJson">Refresh</button>
-			<a class="button" href="https://thelinux.pro/broadcast_timer">Time Boxer</a>
+			<button class="button" href="https://thelinux.pro/broadcast_timer">Time Boxer</button>
 		</div><br />
 
 		<div class="row" id="editEvent">
@@ -56,5 +56,6 @@
 		<div id="punchDetail"></div>
 
 		<p id="result"></p>
+		<div id="meta" class="grid-meta u-pull-right"></div>
 	</body>
 </html>

punch_list/metadata.js

@@ -1,4 +1,4 @@
-var version = "0.0.001",
+var version = "0.0.231",
 		debug = false,
 		jsonUrl = "https://api.myjson.com/bins/1dodsj",
 		items,