tags and lists filtering
This commit is contained in:
parent
b9e93e0d98
commit
1c533e2a54
|
@ -11,17 +11,16 @@ function putJson(data) {
|
||||||
req.onreadystatechange = () => {
|
req.onreadystatechange = () => {
|
||||||
if (req.readyState == XMLHttpRequest.DONE) {
|
if (req.readyState == XMLHttpRequest.DONE) {
|
||||||
document.getElementById("result").innerHTML = new Date().getTime() + " - " + req.status;
|
document.getElementById("result").innerHTML = new Date().getTime() + " - " + req.status;
|
||||||
getJson(genList);
|
getJson();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
req.open("PUT", jsonUrl, true);
|
req.open("PUT", jsonUrl, true);
|
||||||
req.setRequestHeader("Content-type", "application/json");
|
req.setRequestHeader("Content-type", "application/json");
|
||||||
req.send(data);
|
req.send(data);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getJson(callback) {
|
function getJson() {
|
||||||
displayMeta();
|
displayMeta();
|
||||||
console.log(`getJson`);
|
console.log(`getJson`);
|
||||||
let req = new XMLHttpRequest();
|
let req = new XMLHttpRequest();
|
||||||
|
@ -29,7 +28,8 @@ function getJson(callback) {
|
||||||
if (req.readyState == XMLHttpRequest.DONE) {
|
if (req.readyState == XMLHttpRequest.DONE) {
|
||||||
window.punches = JSON.parse(req.responseText);
|
window.punches = JSON.parse(req.responseText);
|
||||||
window.punches.sort(function(a, b){return a.priority - b.priority});
|
window.punches.sort(function(a, b){return a.priority - b.priority});
|
||||||
callback(window.punches);
|
//callback(window.punches);
|
||||||
|
genStatuses(window.punches);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -38,142 +38,110 @@ 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>";
|
document.getElementById("showDone").innerHTML = "Show Done: <a href='#' onClick='toggleShowDone()'>" + showDone + "</a>";
|
||||||
|
console.log(`current tag = ${window.tagFilterItem}`);
|
||||||
|
|
||||||
disableElement("punchDetail");
|
disableElement("punchDetail");
|
||||||
enableElement("punchListAll");
|
enableElement("punchListAll");
|
||||||
var itemStyle = "punches";
|
var itemStyle = "punches";
|
||||||
isItArray(punchList);
|
// isItArray(punchList);
|
||||||
|
|
||||||
// punchList.sort(function(a, b){return new Date(a.date).getTime() - new Date(b.date).getTime()});
|
// punchList.sort(function(a, b){return new Date(a.date).getTime() - new Date(b.date).getTime()});
|
||||||
listLength = punchList.length;
|
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 = '';
|
var list = '';
|
||||||
|
|
||||||
for (i = 0; i < listLength; i++) {
|
for (i = 0; i < listLength; i++) {
|
||||||
if (punchList[i].progress.toLowerCase() === "in progress") {
|
if (window.tagFilterItem != undefined) {
|
||||||
console.log(`in progress`);
|
if (punchList[i].tags != undefined && punchList[i].tags.includes(window.tagFilterItem)) {
|
||||||
// list += "<tr>";
|
console.log(`in tagFilterIf`);
|
||||||
list += "<div class='punchlist top-bottom-border'>"; //
|
list += "<div class='punchlist top-bottom-border'>"; //
|
||||||
list += "<div class='punchlist container top-bottom-border'>"; //
|
list += "<div class='punchlist container top-bottom-border'>"; //
|
||||||
list += "<div class='ten columns'>";
|
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='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='three columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
|
||||||
list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
|
list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
|
||||||
list += "<div class='four columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
|
list += "<div class='four columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</div>";
|
||||||
|
|
||||||
if (punchList[i].tags != undefined) {
|
if (punchList[i].tags != undefined) {
|
||||||
console.log(`Adding tags object to punchList[${item}]`);
|
list += "<div class='four columns " + itemStyle + "'>Tags: ";
|
||||||
list += "<div class='four columns " + itemStyle + "'>Tags: ";
|
for (t = 0; t < punchList[i].tags.length; t++) {
|
||||||
for (t = 0; t < punchList[i].tags.length; t++) {
|
list += "<a href='#' onClick(tagFilter(" + punchList[i].tags[t] + ")>" + punchList[i].tags[t] + "</a>, ";
|
||||||
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>";
|
||||||
|
}
|
||||||
list += "</div>";
|
list += "</div>";
|
||||||
document.getElementById("punchListInProgress").innerHTML = list;
|
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>";
|
||||||
}
|
}
|
||||||
}
|
} else {
|
||||||
|
console.log(`in tagFilterElse`);
|
||||||
// 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 top-bottom-border'>"; //
|
||||||
list += "<div class='punchlist container top-bottom-border'>"; //
|
list += "<div class='punchlist container top-bottom-border'>"; //
|
||||||
list += "<div class='ten columns'>";
|
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='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='three columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
|
||||||
list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
|
list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
|
||||||
list += "<div class='four columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</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}]`);
|
if (punchList[i].tags != undefined) {
|
||||||
list += "<div class='four columns " + itemStyle + "'>Tags: ";
|
list += "<div class='four columns " + itemStyle + "'>Tags: ";
|
||||||
for (t = 0; t < punchList[i].tags.length; t++) {
|
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>";
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
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>";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// then done
|
document.getElementById(element).innerHTML = list;
|
||||||
var list = '';
|
|
||||||
for (i = 0; i < listLength; i++) {
|
if (showDone === false) {
|
||||||
if (showDone === true) {
|
disableElement("punchListDoneWrapper");
|
||||||
enableElement("punchListDoneWrapper");
|
} else {
|
||||||
if (punchList[i].progress.toLowerCase() === "done") {
|
enableElement("punchListDoneWrapper");
|
||||||
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;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
disableElement("punchListDoneWrapper");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function startPunch(item) {
|
function startPunch(item) {
|
||||||
|
@ -200,7 +168,7 @@ function enablePunchDetail(item) {
|
||||||
enableElement("punchDetail");
|
enableElement("punchDetail");
|
||||||
console.log(`punchDetail Enabled`);
|
console.log(`punchDetail Enabled`);
|
||||||
// html = "";
|
// 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;
|
document.getElementById("punchDetail").innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -280,7 +248,7 @@ function toggleShowDone() {
|
||||||
} else {
|
} else {
|
||||||
window.showDone = false;
|
window.showDone = false;
|
||||||
}
|
}
|
||||||
getJson(genList);
|
getJson();
|
||||||
}
|
}
|
||||||
|
|
||||||
function editPunch(item) {
|
function editPunch(item) {
|
||||||
|
@ -353,4 +321,3 @@ function clearDefault(a){
|
||||||
a.value="";
|
a.value="";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
<script src="js/i18n/datepicker.en.js"></script>
|
<script src="js/i18n/datepicker.en.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onLoad="getJson(genList)">
|
<body onLoad="getJson()">
|
||||||
|
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<button class="button" onClick="disableElement('punchListAll'), disableElement('punchDetail'), enableElement('newEvent')" id="put">New Punch Item</button>
|
<button class="button" onClick="disableElement('punchListAll'), disableElement('punchDetail'), enableElement('newEvent')" id="put">New Punch Item</button>
|
||||||
|
@ -76,6 +76,7 @@
|
||||||
|
|
||||||
|
|
||||||
<p id="result"></p>
|
<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="showDone" class="grid-meta u-pull-right"></div><br />
|
||||||
<div id="meta" class="grid-meta u-pull-right"></div>
|
<div id="meta" class="grid-meta u-pull-right"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
var version = "0.3.022",
|
var version = "0.3.045",
|
||||||
debug = false,
|
debug = false,
|
||||||
jsonUrl = "https://api.myjson.com/bins/1dodsj",
|
jsonUrl = "https://api.myjson.com/bins/1dodsj",
|
||||||
showDone = false,
|
showDone = false,
|
||||||
|
|
Loading…
Reference in New Issue