tags and lists filtering

This commit is contained in:
Kameron Kenny 2019-06-17 13:42:27 -04:00
parent b9e93e0d98
commit 1c533e2a54
3 changed files with 88 additions and 120 deletions

View File

@ -11,17 +11,16 @@ function putJson(data) {
req.onreadystatechange = () => {
if (req.readyState == XMLHttpRequest.DONE) {
document.getElementById("result").innerHTML = new Date().getTime() + " - " + req.status;
getJson(genList);
getJson();
}
};
req.open("PUT", jsonUrl, true);
req.setRequestHeader("Content-type", "application/json");
req.send(data);
}
function getJson(callback) {
function getJson() {
displayMeta();
console.log(`getJson`);
let req = new XMLHttpRequest();
@ -29,7 +28,8 @@ function getJson(callback) {
if (req.readyState == XMLHttpRequest.DONE) {
window.punches = JSON.parse(req.responseText);
window.punches.sort(function(a, b){return a.priority - b.priority});
callback(window.punches);
//callback(window.punches);
genStatuses(window.punches);
}
};
@ -38,26 +38,46 @@ function getJson(callback) {
}
function genList(punchList) {
function tagFilter(tagItem) {
console.log(`In tagFilter function`);
window.tagFilterItem = tagItem;
getJson();
}
function clearTagFilter() {
console.log(`Clear Tags`);
window.tagFilterItem = undefined;
getJson();
}
function getStatus(punchList, statusFilter) {
return punchList.filter(function(punch) { return punch.progress.toLowerCase() === statusFilter; });
}
function genStatuses(punchList) {
genList(getStatus(punchList, "in progress"), "punchListInProgress");
genList(getStatus(punchList, "new"), "punchListNew");
genList(getStatus(punchList, "done"), "punchListDone");
}
function genList(punchList, element) {
document.getElementById("showDone").innerHTML = "Show Done: <a href='#' onClick='toggleShowDone()'>" + showDone + "</a>";
console.log(`current tag = ${window.tagFilterItem}`);
disableElement("punchDetail");
enableElement("punchListAll");
var itemStyle = "punches";
isItArray(punchList);
// isItArray(punchList);
// punchList.sort(function(a, b){return new Date(a.date).getTime() - new Date(b.date).getTime()});
listLength = punchList.length;
// 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>";
//prioritize in-progress
var list = '';
for (i = 0; i < listLength; i++) {
if (punchList[i].progress.toLowerCase() === "in progress") {
console.log(`in progress`);
// list += "<tr>";
if (window.tagFilterItem != undefined) {
if (punchList[i].tags != undefined && punchList[i].tags.includes(window.tagFilterItem)) {
console.log(`in tagFilterIf`);
list += "<div class='punchlist top-bottom-border'>"; //
list += "<div class='punchlist container top-bottom-border'>"; //
list += "<div class='ten columns'>";
@ -67,10 +87,9 @@ function genList(punchList) {
list += "<div class='four columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
if (punchList[i].tags != undefined) {
console.log(`Adding tags object to punchList[${item}]`);
list += "<div class='four columns " + itemStyle + "'>Tags: ";
for (t = 0; t < punchList[i].tags.length; t++) {
list += punchList[i].tags[t] + ", ";
list += "<a href='#' onClick(tagFilter(" + punchList[i].tags[t] + ")>" + punchList[i].tags[t] + "</a>, ";
}
list += "</div>";
}
@ -83,97 +102,46 @@ function genList(punchList) {
list += "<a onClick=completePunch(" + i + ")>done</a>";
list += "<a onClick=editPunch(" + i + ")>edit</a>";
list += "<a onClick=deletePunch(" + i + ")>delete</a>";
list += "</div>";
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>"; //
list += "<div class='three columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
list += "<div class='four columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
if (punchList[i].tags != undefined) {
console.log(`Adding tags object to punchList[${item}]`);
list += "<div class='four columns " + itemStyle + "'>Tags: ";
for (t = 0; t < punchList[i].tags.length; t++) {
list += punchList[i].tags[t] + ", ";
}
list += "</div>";
}
list += "</div>";
list += "<div class='two columns'>";
list += "<div class=dropdown>";
list += "<button class=dropbtn onClick=dropMenu(" + i + ")>Act<i class='fa fa-caret-down'></i></button>";
list += "<div class=dropdown-content id='myDropdown" + i + "'>";
list += "<a onClick=startPunch(" + i + ")>start</a>";
list += "<a onClick=completePunch(" + i + ")>done</a>";
list += "<a onClick=editPunch(" + i + ")>edit</a>";
list += "<a onClick=deletePunch(" + i + ")>delete</a>";
list += "</div>";
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>"; //
list += "<div class='three columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
list += "<div class='four columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
if (punchList[i].tags != undefined) {
console.log(`Adding tags object to punchList[${item}]`);
list += "<div class='four columns " + itemStyle + "'>Tags: ";
for (t = 0; t < punchList[i].tags.length; t++) {
list += punchList[i].tags[t] + ", ";
}
list += "</div>";
}
list += "</div>";
list += "<div class='two columns'>";
list += "<div class=dropdown>";
list += "<button class=dropbtn onClick=dropMenu(" + i + ")>Act<i class='fa fa-caret-down'></i></button>";
list += "<div class=dropdown-content id='myDropdown" + i + "'>";
list += "<a onClick=startPunch(" + i + ")>start</a>";
list += "<a onClick=completePunch(" + i + ")>done</a>";
list += "<a onClick=editPunch(" + i + ")>edit</a>";
list += "<a onClick=deletePunch(" + i + ")>delete</a>";
list += "</div>";
list += "</div>";
list += "</div>";
list += "</div>";
list += "</div>";
document.getElementById("punchListDone").innerHTML = list;
list += "</div></div></div></div></div>";
}
} else {
console.log(`in tagFilterElse`);
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>"; //
list += "<div class='three columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
list += "<div class='four columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
if (punchList[i].tags != undefined) {
list += "<div class='four columns " + itemStyle + "'>Tags: ";
for (t = 0; t < punchList[i].tags.length; t++) {
list += "<a href='#' onClick=tagFilter(\"" + punchList[i].tags[t] + "\")>" + punchList[i].tags[t] + "</a>, ";
}
list += "</div>";
}
list += "</div>";
list += "<div class='two columns'>";
list += "<div class=dropdown>";
list += "<button class=dropbtn onClick=dropMenu(" + i + ")>Act<i class='fa fa-caret-down'></i></button>";
list += "<div class=dropdown-content id='myDropdown" + i + "'>";
list += "<a onClick=startPunch(" + i + ")>start</a>";
list += "<a onClick=completePunch(" + i + ")>done</a>";
list += "<a onClick=editPunch(" + i + ")>edit</a>";
list += "<a onClick=deletePunch(" + i + ")>delete</a>";
list += "</div></div></div></div></div>";
}
}
document.getElementById(element).innerHTML = list;
if (showDone === false) {
disableElement("punchListDoneWrapper");
} else {
enableElement("punchListDoneWrapper");
}
}
}
function startPunch(item) {
@ -200,7 +168,7 @@ function enablePunchDetail(item) {
enableElement("punchDetail");
console.log(`punchDetail Enabled`);
// html = "";
html = "<p>subject: " + punchList[item].subject + "<br />Created: " + punchList[item].cDate + "<br />Modified Date: " + punchList[item].mDate + "<br />Priority: " + punchList[item].priority + "<br />Progress: " + punchList[item].progress + "<br /><textarea>" + punchList[item].notes + "</textarea><br /><input onfocus='clearDefault(this)' type='text' id='tag' value='Add tag'><input onClick='addTag()' type=button value='Add' /></p><input type=button value=close onClick=getJson(genList)>";
html = "<p>subject: " + punchList[item].subject + "<br />Created: " + punchList[item].cDate + "<br />Modified Date: " + punchList[item].mDate + "<br />Priority: " + punchList[item].priority + "<br />Progress: " + punchList[item].progress + "<br /><textarea>" + punchList[item].notes + "</textarea><br /><input onfocus='clearDefault(this)' type='text' id='tag' value='Add tag'><input onClick='addTag()' type=button value='Add' /></p><input type=button value=close onClick=getJson()>";
document.getElementById("punchDetail").innerHTML = html;
}
@ -280,7 +248,7 @@ function toggleShowDone() {
} else {
window.showDone = false;
}
getJson(genList);
getJson();
}
function editPunch(item) {
@ -353,4 +321,3 @@ function clearDefault(a){
a.value="";
}
}

View File

@ -23,7 +23,7 @@
<script src="js/i18n/datepicker.en.js"></script>
</head>
<body onLoad="getJson(genList)">
<body onLoad="getJson()">
<div class="column">
<button class="button" onClick="disableElement('punchListAll'), disableElement('punchDetail'), enableElement('newEvent')" id="put">New Punch Item</button>
@ -76,6 +76,7 @@
<p id="result"></p>
<div id="clearTags" class="grid-meta u-pull-right"><a href="#" onClick="clearTagFilter()">Clear Tags</a></div><br />
<div id="showDone" class="grid-meta u-pull-right"></div><br />
<div id="meta" class="grid-meta u-pull-right"></div>
</body>

View File

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