css
This commit is contained in:
parent
5e40a4a5f4
commit
f9d4274206
|
@ -11,6 +11,18 @@ textarea {
|
|||
display: none;}
|
||||
#editEvent {
|
||||
display: none; }
|
||||
.punchlist {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: table;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee; }
|
||||
.punchlist::after {
|
||||
content: "";
|
||||
clear: both; }
|
||||
.top-bottom-border {
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee; }
|
||||
.navbar {
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
|
@ -33,6 +45,7 @@ textarea {
|
|||
|
||||
.dropdown .dropbtn {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
@ -113,18 +126,15 @@ table.punches {
|
|||
padding: 5px;
|
||||
margin-bottom: 0px; }
|
||||
.centerMiddle {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding:0px;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
margin-top: 50%; }
|
||||
vertical-align: middle; }
|
||||
.button {
|
||||
display: block;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 2rem;
|
||||
font-size: 1.5rem;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #333;
|
||||
background-color: #4CAF50;
|
||||
|
@ -133,7 +143,7 @@ table.punches {
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 98%;
|
||||
height: 70px;}
|
||||
height: 50px;}
|
||||
.nav-button {
|
||||
vertical-align: middle;
|
||||
float: right }
|
||||
|
@ -159,13 +169,19 @@ table.punches {
|
|||
@media (min-width: 550px) {
|
||||
.button {
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #333;
|
||||
background-color: #4CAF50;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
width: 150px;
|
||||
height: 45px; }
|
||||
border: 1px solid #333;
|
||||
background-color: #4CAF50;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 20%;
|
||||
height: 40px;
|
||||
float: right;}
|
||||
.nav-button {
|
||||
vertical-align: middle;
|
||||
float: right }
|
||||
|
|
|
@ -39,7 +39,8 @@ function getJson(callback) {
|
|||
}
|
||||
|
||||
function genList(punchList) {
|
||||
console.log(`inside gen list `);
|
||||
document.getElementById("showDone").innerHTML = "Show Done: <a href='#' onClick='toggleShowDone()'>" + showDone + "</a>";
|
||||
|
||||
disableElement("punchDetail");
|
||||
enableElement("punchList");
|
||||
var itemStyle = "punches";
|
||||
|
@ -48,13 +49,94 @@ function genList(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>";
|
||||
// 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
|
||||
for (i = 0; i < listLength; i++) {
|
||||
list += "<tr><td onClick=enablePunchDetail(" + i + ") class=" + itemStyle + ">" + punchList[i].subject + "</td><td class=" + itemStyle + ">" + punchList[i].progress + "</td><td class=" + itemStyle + ">" + punchList[i].priority + "</td><td><div class=dropdown><button class=dropbtn onClick=dropMenu(" + i + ")>Act<i class='fa fa-caret-down'></i></button><div class=dropdown-content id='myDropdown" + i + "'><a onClick=startPunch(" + i + ")>start</a><a onClick=completePunch(" + i + ")>done</a><a onClick=editPunch(" + i + ")>edit</a><a onClick=deletePunch(" + i + ")>delete</a></div></div></div></td></tr>";
|
||||
if (punchList[i].progress.toLowerCase() === "in progress") {
|
||||
console.log(`in progress`);
|
||||
// list += "<tr>";
|
||||
list += "<div class='punchlist top-bottom-border'>"; //
|
||||
list += "<div class='ten columns'>";
|
||||
list += "<div class='container " + itemStyle + "' onClick=enablePunchDetail(" + i + ")>" + punchList[i].subject + "</div>"; //
|
||||
list += "<div class='two columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
|
||||
list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
|
||||
list += "<div class='three columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</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 += "</table>";
|
||||
// then !done
|
||||
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='ten columns'>";
|
||||
list += "<div class='container " + itemStyle + "' onClick=enablePunchDetail(" + i + ")>" + punchList[i].subject + "</div>"; //
|
||||
list += "<div class='two columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
|
||||
list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
|
||||
list += "<div class='three columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</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>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// then done
|
||||
for (i = 0; i < listLength; i++) {
|
||||
if (showDone === true) {
|
||||
if (punchList[i].progress.toLowerCase() === "done") {
|
||||
console.log(`show done.`);
|
||||
list += "<div class='punchlist top-bottom-border'>"; //
|
||||
list += "<div class='ten columns'>";
|
||||
list += "<div class='container " + itemStyle + "' onClick=enablePunchDetail(" + i + ")>" + punchList[i].subject + "</div>"; //
|
||||
list += "<div class='two columns " + itemStyle + "'>Status: " + punchList[i].progress + "</div>";
|
||||
list += "<div class='two columns " + itemStyle + "'>Priority: " + punchList[i].priority + "</div>";
|
||||
list += "<div class='three columns " + itemStyle + "'>Need By: " + punchList[i].nDate + "</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("punchList").innerHTML = list;
|
||||
}
|
||||
|
||||
|
@ -153,3 +235,15 @@ window.onclick = function(e) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toggleShowDone() {
|
||||
if (showDone === false) {
|
||||
window.showDone = true;
|
||||
} else if (showDone === true) {
|
||||
window.showDone = false;
|
||||
} else {
|
||||
window.showDone = false;
|
||||
}
|
||||
getJson(genList);
|
||||
}
|
||||
|
||||
|
|
|
@ -25,11 +25,11 @@
|
|||
|
||||
<body onLoad="getJson(genList)">
|
||||
|
||||
<div class="u-full-width u-max-full-width container row">
|
||||
<div class="column">
|
||||
<button class="button" onClick="disableElement('punchList'), disableElement('punchDetail'), enableElement('newEvent')" id="put">New Punch Item</button>
|
||||
<button class="button" onClick="getJson(genList)" id="getJson">Refresh</button>
|
||||
<button class="button" href="https://thelinux.pro/broadcast_timer">Time Boxer</button>
|
||||
</div><br />
|
||||
</div>
|
||||
|
||||
<div class="row" id="editEvent">
|
||||
<input type=hidden id=editID>
|
||||
|
@ -56,6 +56,7 @@
|
|||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
var version = "0.0.231",
|
||||
var version = "0.1.302",
|
||||
debug = false,
|
||||
jsonUrl = "https://api.myjson.com/bins/1dodsj",
|
||||
showDone = false,
|
||||
items,
|
||||
item,
|
||||
notes,
|
||||
|
|
Loading…
Reference in New Issue