tags and lists filtering
This commit is contained in:
parent
b9e93e0d98
commit
1c533e2a54
|
@ -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="";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue