fixes

punch_list/css/custom.css

@@ -7,6 +7,18 @@ textarea {
 	height:50%;
 	color: lime;
 	border: 1px solid #999; }
+.listWrapper:after {
+	content: "";
+	clear: both; }
+.listWrapper {
+	margin: 5px;
+	margin-bottom: 10px;
+	border: 1px solid #999; }
+.punchListHeader {
+	color: #00bfff;
+	padding: 4px;
+	font-size: 2rem;
+	font-weight: 999; }
 	.one.column,
 	.one.columns                    { width: 4.66666666667%; }
 	.two.columns                    { width: 13.3333333333%; }

punch_list/eventManage.js

@@ -42,7 +42,7 @@ function genList(punchList) {
 	document.getElementById("showDone").innerHTML = "Show Done: <a href='#' onClick='toggleShowDone()'>" + showDone + "</a>";
 
 	disableElement("punchDetail");
-	enableElement("punchList");
+	enableElement("punchListAll");
 	var itemStyle = "punches";
 	isItArray(punchList);
 
@@ -52,12 +52,13 @@ 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>";
 
 
-			list = "<div class='punchlist top-bottom-border'>"; //
 //prioritize in-progress
+	var list = '';
 	for (i = 0; i < listLength; i++) {
 		if (punchList[i].progress.toLowerCase() === "in progress") {
 			console.log(`in progress`);
 //			list += "<tr>";
+			list += "<div class='punchlist top-bottom-border'>"; //
 			list += "<div class='punchlist container top-bottom-border'>"; //
 				list += "<div class='ten columns'>";
 					list += "<div class='12 columns " + itemStyle + "' onClick=enablePunchDetail(" + i + ")><span class=subject>" + punchList[i].subject + "</span></div>"; //
@@ -77,14 +78,18 @@ function genList(punchList) {
 					list += "</div>";
 				list += "</div>";
 				list += "</div>";
+			list += "</div>";
+			document.getElementById("punchListInProgress").innerHTML = list;
 		}
 	}
 
 // then !done
+	var list = '';
 	for (i = 0; i < listLength; i++) {
 		if (punchList[i].progress.toLowerCase() != "in progress") {
 			if (punchList[i].progress.toLowerCase() != "done") {
 				console.log(`not in progress or not done`);
+			list += "<div class='punchlist top-bottom-border'>"; //
 			list += "<div class='punchlist container top-bottom-border'>"; //
 				list += "<div class='ten columns'>";
 					list += "<div class='12 columns " + itemStyle + "' onClick=enablePunchDetail(" + i + ")><span class=subject>" + punchList[i].subject + "</span></div>"; //
@@ -104,15 +109,20 @@ function genList(punchList) {
 					list += "</div>";
 				list += "</div>";
 				list += "</div>";
+				list += "</div>";
+				document.getElementById("punchListNew").innerHTML = list;
 			}
 		}
 	}
 
 // then done
+	var list = '';
 	for (i = 0; i < listLength; i++) {
 		if (showDone === true) {
+			enableElement("punchListDoneWrapper");
 			if (punchList[i].progress.toLowerCase() === "done") {
 				console.log(`show done.`);
+				list += "<div class='punchlist top-bottom-border'>"; //
 				list += "<div class='punchlist container top-bottom-border'>"; //
 				list += "<div class='ten columns'>";
 					list += "<div class='12 columns " + itemStyle + "' onClick=enablePunchDetail(" + i + ")><span class=subject>" + punchList[i].subject + "</span></div>"; //
@@ -132,12 +142,13 @@ function genList(punchList) {
 					list += "</div>";
 				list += "</div>";
 				list += "</div>";
-			}
-		}
-	}
-
 				list += "</div>";
-	document.getElementById("punchList").innerHTML = list;
+				document.getElementById("punchListDone").innerHTML = list;
+			}
+		} else {
+			disableElement("punchListDoneWrapper");
+		}
+	}
 }
 
 function startPunch(item) {
@@ -159,7 +170,7 @@ function completePunch(item) {
 function enablePunchDetail(item) {
 	var punchList = window.punches;
 	console.log(`inside enablePunchDetail`);
-	disableElement("punchList");
+	disableElement("punchListAll");
 	console.log(`punchList Disabled`);
 	enableElement("punchDetail");
 	console.log(`punchDetail Enabled`);
@@ -186,7 +197,7 @@ function createNewEvent() {
 	jsonStr = JSON.stringify(punchList);
 	putJson(jsonStr);
 	disableElement("newEvent");
-	enableElement("punchList");
+	enableElement("punchListAll");
 //	document.getElementById("newEventList").innerHTML = jsonStr;
 }
 
@@ -249,7 +260,7 @@ function toggleShowDone() {
 
 function editPunch(item) {
 	disableElement("newEvent");
-	disableElement("punchList");
+	disableElement("punchListAll");
 	enableElement("editPunch");
 
 	punchList = window.punches;

punch_list/index.html

@@ -47,16 +47,32 @@
 					<input class="u-full-width" type="text" id="newPriority" value="priority">
 					<input type="hidden" id="newProgress" value="new">
 					<input type='text' id='timepickerCreate' class='datepicker-here u-full-width' data-timepicker='true' data-language='en' value="date">
-					<!-- <div class="datepicker-here" data-timepicker="true" data-language='en'></div> -->
-
-					<!-- <input type="text" id="newStartDate" value="June 04, 2019 00:00:00"> -->
 					<textarea class="u-full-width" id="newNotes" value="Notes"></textarea>
 					<input class="u-full-width" onClick="createNewEvent()" id="test" type="button" value="Update" />
 				</form>
 		</div>
-		<div id="punchList"></div>
+
+		<div id="punchListAll">
+			<div id="punchListInProgressWrapper" class="listWrapper">
+			<span class="punchListHeader">In Progress</span>
+				<div id="punchListInProgress"></div>
+			</div>
+
+			<div id="punchListNewWrapper" class="listWrapper">
+			<span class="punchListHeader">New</span>
+				<div id="punchListNew"></div>
+			</div>
+
+			<div id="punchListDoneWrapper" class="listWrapper">
+			<span class="punchListHeader">Done</span>
+				<div id="punchListDone"></div>
+			</div>
+		</div>
+
 		<div id="punchDetail"></div>
 
+
+
 		<p id="result"></p>
 		<div id="showDone" class="grid-meta u-pull-right"></div><br />
 		<div id="meta" class="grid-meta u-pull-right"></div>