status menu

punch_list/backlogManage.js

@@ -91,6 +91,10 @@ function genList(punchList, element) {
 	var list = '<ol id="sortable">';
 
 	for (i = 0; i < listLength; i++) {
+			if (punchList[i].progress.toLowerCase() === "in progress") { var style = "inProgress" }
+			else if (punchList[i].progress.toLowerCase() === "waiting") { var style = "waiting" }
+			else { var style = "punch-default" }
+
 		if (window.tagFilterItem != undefined) {
 			console.log('in tags filter');
 			if (punchList[i].tags != undefined && punchList[i].tags.includes(window.tagFilterItem)) {
@@ -103,11 +107,23 @@ function genList(punchList, element) {
 					list += '<div class="backlog-list-header">';
 					list += '<div class="one column">' +punchList[i].priority + '</div><div class="ten columns subject">' + punchList[i].subject + '</div>';
 					list += '<div class="two columns ' + style + '">' + punchList[i].progress + '</div>';
+					// status dropdown
+					list += '<div class="dropdown one column">';
+					list += '<img class="top dropbtn" onclick=progressMenuDrop("' + punchList[i].uuid + '") src="images/down-carrot.png">';
+					list += '<div id="progressDropdown-' + punchList[i].uuid + '" class="dropdown-content punch-default">';
+					list += '<a href="#" onClick=mkPunchNew("' + punchList[i].uuid + '")>New</a>';
+					list += '<a href="#" onClick=startPunch("' + punchList[i].uuid + '")>Start</a>';
+					list += '<a href="#" onClick=waitingPunch("' + punchList[i].uuid + '")>Waiting</a>';
+					list += '<a href="#" onClick=completePunch("' + punchList[i].uuid + '")>Finish</a>';
+					list += '</div>';
+					list += '</div>';
+/*
 					if (style === "inProgress") {
 						list += '<div class="two columns ' + style + '"><a class="punch-default" href="#" onClick=completePunch("' + punchList[i].uuid + '")>Finish</a></div>';
 					} else if (style === "punch-default") {
 						list += '<div class="two columns ' + style + '"><a class="punch-default" href="#" onClick=startPunch("' + punchList[i].uuid + '")>Start</a></div>';
 					}
+*/
 					if ( punchList[i].nDate != null && punchList[i].nDate != undefined && punchList[i].nDate != '' ) {
 						list += '<div class="three columns punch-default">' + punchList[i].nDate + '</div>';
 					} else {
@@ -133,6 +149,11 @@ function genList(punchList, element) {
 					}
 					list += '</div>';
 					list += '<div class="backlog-list-content"><div style="punch-list-backlog-details">';
+					if ( punchList[i].startTime != undefined ) {
+						list += '<div class="three columns punch-default">';
+						list += new Date(punchList[i].startTime);
+						list += '</div>';
+					}
 					if ( punchList[i].notes != "" ) {
 						list += '<textarea class="edit-text-box" readonly>' + punchList[i].notes + '</textarea><br />';
 					}
@@ -142,20 +163,32 @@ function genList(punchList, element) {
 			}
 		} else {
 			console.log('in no tags filter');
-			if (punchList[i].progress.toLowerCase() === "in progress") { var style = "inProgress" } else { var style = "punch-default" }
+
 			if (punchList[i].progress.toLowerCase() === "done" && punchList[i].priority != 99999) {
 				setPriority(punchList[i].uuid, 99999);
 			} else if (punchList[i].progress.toLowerCase() != "done"){
 				list += '<li class="' + style + '">';
 				list += '<div class="portlet">';
 				list += '<div class="backlog-list-header">';
-				list += '<div class="one column">' +punchList[i].priority + '</div><div class=subject>' + punchList[i].subject + '</div>';
+				list += '<div class="one column">' + punchList[i].priority + '</div><div class=subject>' + punchList[i].subject + '</div>';
 				list += '<div class="two columns ' + style + '">' + punchList[i].progress + '</div>';
+				// status dropdown
+				list += '<div class="dropdown one column">';
+				list += '<img class="top dropbtn" onclick=progressMenuDrop("' + punchList[i].uuid + '") src="images/down-carrot.png">';
+				list += '<div id="progressDropdown-' + punchList[i].uuid + '" class="dropdown-content punch-default">';
+				list += '<a href="#" onClick=mkPunchNew("' + punchList[i].uuid + '")>New</a>';
+				list += '<a href="#" onClick=startPunch("' + punchList[i].uuid + '")>Start</a>';
+				list += '<a href="#" onClick=waitingPunch("' + punchList[i].uuid + '")>Waiting</a>';
+				list += '<a href="#" onClick=completePunch("' + punchList[i].uuid + '")>Finish</a>';
+				list += '</div>';
+				list += '</div>';
+/*
 				if (style === "inProgress") {
 					list += '<div class="two columns ' + style + '"><a class="punch-default" href="#" onClick=completePunch("' + punchList[i].uuid + '")>Finish</a></div>';
 				} else if (style === "punch-default") {
 					list += '<div class="two columns ' + style + '"><a class="punch-default" href="#" onClick=startPunch("' + punchList[i].uuid + '")>Start</a></div>';
 				}
+*/
 				if ( punchList[i].nDate != null && punchList[i].nDate != undefined && punchList[i].nDate != '' ) {
 					list += '<div class="three columns punch-default">' + punchList[i].nDate + '</div>';
 				} else {
@@ -181,8 +214,15 @@ function genList(punchList, element) {
 				}
 				list += '</div>';
 				list += '<div class="backlog-list-content"><div style="punch-list-backlog-details">';
+				if ( punchList[i].startTime != undefined ) {
+					list += '<div class="twelve columns punch-default" style="padding-left: 30px; padding-top: 10px; padding-bottom: 10px;">Started: ';
+					list += new Date(punchList[i].startTime);
+					list += '</div>';
+				}
 				if ( punchList[i].notes != "" ) {
+					list += '<div class="twelve columns">';
 					list += '<textarea class="edit-text-box" readonly>' + punchList[i].notes + '</textarea><br />';
+					list += '</div>';
 				}
 				list += '<button class="button" onClick=editPunch("' + punchList[i].uuid + '")>edit</button>';
 				list += '</div></div></div></li>';
@@ -194,6 +234,26 @@ function genList(punchList, element) {
 	document.getElementById(element).innerHTML = list;
 
 mkSortable();
+enableDrop();
+}
+
+function progressMenuDrop(uuid) {
+	document.getElementById("progressDropdown-" + uuid).classList.toggle("show");
+}
+
+function enableDrop() {
+	window.onclick = function(event) {
+		if (!event.target.matches('.dropbtn')) {
+			var dropdowns = document.getElementsByClassName("dropdown-content");
+			var i;
+			for (i = 0; i < dropdowns.length; i++) {
+				var openDropdown = dropdowns[i];
+				if (openDropdown.classList.contains('show')) {
+					openDropdown.classList.remove('show');
+				}
+			}
+		}
+	}
 }
 
 function mkSortable() {
@@ -254,6 +314,10 @@ function startPunch(uuid) {
 	var punchList = window.punches;
 	item = findArrayId(uuid);
 
+	if ( punchList[item].startTime === undefined ) {
+		punchList[item].startTime = new Date().getTime();
+	}
+
 	punchList[item].progress = "In Progress";
 
 	jsonStr = JSON.stringify(punchList);
@@ -263,12 +327,37 @@ function startPunch(uuid) {
 function completePunch(uuid) {
 	var punchList = window.punches;
 	item = findArrayId(uuid);
+
+	if ( punchList[item].doneTime === undefined ) {
+		punchList[item].doneTime = new Date().getTime();
+	}
+
 	punchList[item].progress = "Done";
 
 	jsonStr = JSON.stringify(punchList);
 	putJson(jsonStr);
 }
 
+function waitingPunch(uuid) {
+	var punchList = window.punches;
+	item = findArrayId(uuid);
+
+	punchList[item].progress = "Waiting";
+
+	jsonStr = JSON.stringify(punchList);
+	putJson(jsonStr);
+}
+
+function mkPunchNew(uuid) {
+	var punchList = window.punches;
+	item = findArrayId(uuid);
+
+	punchList[item].progress = "New";
+
+	jsonStr = JSON.stringify(punchList);
+	putJson(jsonStr);
+}
+
 function enablePunchDetail(uuid) {
 	var punchList = window.punches;
 	item = findArrayId(uuid);
@@ -453,14 +542,14 @@ function submitEditPunch(uuid) {
 	var priorityField = document.getElementById("editPriority").value;
 	var progressField = document.getElementById("editProgress").innerHTML;
 	var nDateField = document.getElementById("timepickerEdit").value;
-	var tagsField = document.getElementById("editTags").value.toLowerCase();
+	//var tagsField = document.getElementById("editTags").value.toLowerCase();
 	var notesField = document.getElementById("editNotes").value;
 
 	punchList[id].subject = subjectField;
 	punchList[id].priority = priorityField;
 	punchList[id].progress = progressField;
 	punchList[id].nDate = nDateField;
-	punchList[id].tags = tagsField;
+	//punchList[id].tags = tagsField;
 	punchList[id].notes = notesField;
 
 	jsonStr = JSON.stringify(punchList);

punch_list/css/custom.css

@@ -34,9 +34,20 @@ a.punch-default { color: #00BFFF; font-size: 12px; text-decoration: none;}
 a.punch-default:hover { color: #00FFFF; text-shadow: 0px 0px 23px #FFF; }
 .punch-default { border: 0px solid #AAA; color: #aaa; font-size: 12px; }
 .inProgress { color: orange; font-size: 12px; }
-.overdue { color: red; }
+.waiting { color: red; font-size: 12px; }
-.duesoon { color: yellow; }
+.overdue { color: red; font-size: 12px; }
+.duesoon { color: yellow; font-size: 12px;}
 .hide { display: none; }
+i {
+  border: solid black;
+  border-width: 0 3px 3px 0;
+  display: inline-block;
+  padding: 3px;
+}
+.down {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
 .punch-list-backlog-details {
 	font-size: 18px;
 	color: #aaa;
@@ -113,53 +124,57 @@ textarea {
   text-decoration: none;
 }
 
-.dropdown {
+.top { vertical-align: top; padding: 0px; margin: 0px; }
-  float: left;
-  overflow: hidden;
-}
 
-.dropdown .dropbtn {
+/* Dropdown Button */
-  cursor: pointer;
+.dropbtn {
-	vertical-align: middle;
+	height: 15px;
-  font-size: 16px;
+/*	background-image: url("../images/down-carrot.png"); */
-  border: none;
+	vertical-align: top;
-  outline: none;
+  background-color: #3498DB;
   color: white;
-  padding: 14px 16px;
+  padding: 6px;
-  background-color: inherit;
+  font-size: 10px;
-  font-family: inherit;
+  cursor: pointer;
-  margin: 0;
+	border: 0px;
 }
 
-.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
+/* Dropdown button on hover & focus */
-  background-color: red;
+.dropbtn:hover, .dropbtn:focus {
+  background-color: #2980B9;
 }
 
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+	height: 20px;
+}
+
+/* Dropdown Content (Hidden by Default) */
 .dropdown-content {
   display: none;
   position: absolute;
-  background-color: #f9f9f9;
+  background-color: #f1f1f1;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }
 
+/* Links inside the dropdown */
 .dropdown-content a {
-  float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
-  text-align: left;
 }
 
-.dropdown-content a:hover {
+/* Change color of dropdown links on hover */
-  background-color: #ddd;
+.dropdown-content a:hover {background-color: #ddd}
-}
+
+/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+.show {display:block;}
 
-.show {
-  display: block;
-}
 .warn	{ color: yellow; }
 .green	{ color: lime; }
 .over	{ color: red; }

punch_list/metadata.js

@@ -1,4 +1,4 @@
-var version = "0.6.032",
+var version = "0.7.001",
 		debug = false,
 		jsonUrl = "https://api.myjson.com/bins/1dodsj",
 		showDone = false,