drag-n-drop
This commit is contained in:
Kameron Kenny
parent
11cabafeb7
commit
5a62c2a656
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Font -->
|
||||
<!-- <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'> -->
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/skeleton.css">
|
||||
<link rel="stylesheet" href="css/custom.css">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
|
||||
<!-- No Cache -->
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<script src="metadata.js"></script>
|
||||
<script src="backlogManage.js"></script>
|
||||
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
||||
<script>
|
||||
$( function() {
|
||||
$( "#sortable" ).sortable();
|
||||
$( "#sortable" ).disableSelection();
|
||||
} );
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<button class="button" onClick="disableElement('punchListAll'), disableElement('punchDetail'), enableElement('newEvent')" id="put">New Punch Item</button>
|
||||
<button class="button" onClick="genDaily()" id="daily">Gen Daily</button>
|
||||
<button class="button" onClick="genWeekly()" id="daily">Gen Weekly</button>
|
||||
<button class="button" onClick="getJson(genList)" id="getJson">Refresh</button>
|
||||
<a class="button" href="https://thelinux.pro/broadcast_timer">Time Boxer</a>
|
||||
</div>
|
||||
|
||||
<div class="listWrapper" id="punchListAll">
|
||||
<div id="punchListInProgressWrapper" class="listWrapper">
|
||||
<span class="punchListHeader">Backlog</span>
|
||||
<div id="punchListBacklog"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="debug1"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,397 @@
|
|||
var punches, punchList, listLength, object;
|
||||
|
||||
function isItArray(object) {
|
||||
console.log(`is ${object} Array = ${Array.isArray(object)}`);
|
||||
// return Array.isArray(object);
|
||||
}
|
||||
|
||||
function putJson(data) {
|
||||
let req = new XMLHttpRequest();
|
||||
|
||||
req.onreadystatechange = () => {
|
||||
if (req.readyState == XMLHttpRequest.DONE) {
|
||||
//document.getElementById("result").innerHTML = new Date().getTime() + " - " + req.status;
|
||||
getJson();
|
||||
}
|
||||
};
|
||||
|
||||
req.open("PUT", jsonUrl, true);
|
||||
req.setRequestHeader("Content-type", "application/json");
|
||||
req.send(data);
|
||||
}
|
||||
|
||||
function getJson() {
|
||||
|
||||
// var GoogleAuth = gapi.auth2.init();
|
||||
// if (GoogleAuth.isSignedIn.get() === true) {
|
||||
//displayMeta();
|
||||
console.log(`getJson`);
|
||||
let req = new XMLHttpRequest();
|
||||
req.onreadystatechange = () => {
|
||||
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);
|
||||
genStatuses(window.punches);
|
||||
}
|
||||
};
|
||||
|
||||
req.open("GET", jsonUrl, true);
|
||||
req.send();
|
||||
// } else {
|
||||
// console.log('not logged in');
|
||||
// }
|
||||
}
|
||||
|
||||
function findArrayId(uid) {
|
||||
var length = window.punches.length;
|
||||
|
||||
for (x = 0; x < length; x++) {
|
||||
if (window.punches[x].uuid === uid) {
|
||||
return x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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, ""), "punchListBacklog");
|
||||
}
|
||||
|
||||
function genBacklog(punchList) {
|
||||
genList(punchList, "punchListBacklog");
|
||||
}
|
||||
|
||||
function genList(punchList, element) {
|
||||
enableElement("punchListAll");
|
||||
var itemStyle = "punches";
|
||||
// isItArray(punchList);
|
||||
|
||||
// punchList.sort(function(a, b){return new Date(a.date).getTime() - new Date(b.date).getTime()});
|
||||
listLength = punchList.length;
|
||||
|
||||
var list = '<ol id="sortable">';
|
||||
|
||||
for (i = 0; i < listLength; i++) {
|
||||
if (punchList[i].progress.toLowerCase() === "done" && punchList[i].priority != 99999) {
|
||||
setPriority(punchList[i].uuid, 99999);
|
||||
} else if (punchList[i].progress.toLowerCase() != "done"){
|
||||
list += '<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + punchList[i].subject + ' | ' + punchList[i].progress + '</li>';
|
||||
}
|
||||
}
|
||||
|
||||
list += "</ol>";
|
||||
document.getElementById(element).innerHTML = list;
|
||||
|
||||
mkSortable();
|
||||
}
|
||||
|
||||
function mkSortable() {
|
||||
punchList = window.punches;
|
||||
|
||||
$( function() {
|
||||
$( "#sortable" ).sortable({
|
||||
start: function(event, ui) {
|
||||
window.sortObjectUUID = punchList[ui.item.index()].uuid;
|
||||
console.log(`Start Position: ${ui.item.index()}`);
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
setPriority(window.sortObjectUUID, ui.item.index());
|
||||
console.log(`New Position: ${ui.item.index()}`);
|
||||
}
|
||||
});
|
||||
$( "#sortable" ).disableSelection();
|
||||
} );
|
||||
}
|
||||
|
||||
function setPriority(sortObject, newPosition) {
|
||||
var punchList = window.punches;
|
||||
item = findArrayId(sortObject);
|
||||
|
||||
for (i = 0; i < punchList.length; i++) {
|
||||
if (punchList[i].priority < 100 && punchList[i].priority >= newPosition && punchList[i].uuid != punchList[item].uuid) {
|
||||
punchList[i].priority = i;
|
||||
}
|
||||
}
|
||||
|
||||
punchList[item].priority = newPosition;
|
||||
|
||||
jsonStr = JSON.stringify(punchList);
|
||||
putJson(jsonStr);
|
||||
}
|
||||
|
||||
function startPunch(uuid) {
|
||||
var punchList = window.punches;
|
||||
item = findArrayId(uuid);
|
||||
|
||||
punchList[item].progress = "In Progress";
|
||||
|
||||
jsonStr = JSON.stringify(punchList);
|
||||
putJson(jsonStr);
|
||||
}
|
||||
|
||||
function completePunch(uuid) {
|
||||
var punchList = window.punches;
|
||||
item = findArrayId(uuid);
|
||||
punchList[item].progress = "Done";
|
||||
|
||||
jsonStr = JSON.stringify(punchList);
|
||||
putJson(jsonStr);
|
||||
}
|
||||
|
||||
function enablePunchDetail(uuid) {
|
||||
var punchList = window.punches;
|
||||
item = findArrayId(uuid);
|
||||
console.log(`inside enablePunchDetail`);
|
||||
disableElement("punchListAll");
|
||||
enableElement("punchDetail");
|
||||
// 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()>";
|
||||
document.getElementById("punchDetail").innerHTML = html;
|
||||
}
|
||||
|
||||
function createNewEvent() {
|
||||
/* Before doing this,
|
||||
Refresh the array,
|
||||
So that we don't overwrite data */
|
||||
getJson();
|
||||
|
||||
// console.log(`${punchList}`);
|
||||
// console.log(`${window.punches}`);
|
||||
// disableElement("punchList");
|
||||
// disableElement("punchDetail");
|
||||
punchList = window.punches;
|
||||
|
||||
var subjectField = document.getElementById("newSubject").value;
|
||||
var priorityField = document.getElementById("newPriority").value;
|
||||
var progressField = document.getElementById("newProgress").value;
|
||||
var nDateField = document.getElementById("timepickerCreate").value;
|
||||
var notesField = document.getElementById("newNotes").value;
|
||||
|
||||
var newEventJson = { uuid: genUid(), nDate: nDateField, subject: subjectField, priority: priorityField, progress: progressField, notes: notesField };
|
||||
punchList.push(newEventJson);
|
||||
jsonStr = JSON.stringify(punchList);
|
||||
putJson(jsonStr);
|
||||
disableElement("newEvent");
|
||||
enableElement("punchListAll");
|
||||
// document.getElementById("newEventList").innerHTML = jsonStr;
|
||||
}
|
||||
|
||||
function genDaily() {
|
||||
/* Before doing this,
|
||||
Refresh the array,
|
||||
So that we don't overwrite data */
|
||||
getJson();
|
||||
|
||||
punchList = window.punches;
|
||||
|
||||
var daily = [ "Check Workday", "Check Expenses", "Check Change Cases", "Check TD's", "Check at-mentions" ];
|
||||
console.log(`${daily[1]}`);
|
||||
|
||||
for (x = 0; x < daily.length; x++) {
|
||||
var newEventJson = { uuid: genUid(), nDate: "EOD", subject: daily[x], priority: "1", progress: "new", notes: "", tags: [ "work", "daily", "today" ] };
|
||||
punchList.push(newEventJson);
|
||||
jsonStr = JSON.stringify(punchList);
|
||||
putJson(jsonStr);
|
||||
}
|
||||
}
|
||||
|
||||
function genWeekly() {
|
||||
/* Before doing this,
|
||||
Refresh the array,
|
||||
So that we don't overwrite data */
|
||||
getJson();
|
||||
|
||||
punchList = window.punches;
|
||||
|
||||
var weekly = [ "Update ORB Notes", "Prep Weekly Meeting", "Build out Broadcast Timer" ];
|
||||
|
||||
for (x = 0; x < weekly.length; x++) {
|
||||
var newEventJson = { uuid: genUid(), nDate: "Tuesday", subject: weekly[x], priority: "1", progress: "new", notes: "", tags: [ "work", "weekly" ] };
|
||||
punchList.push(newEventJson);
|
||||
jsonStr = JSON.stringify(punchList);
|
||||
putJson(jsonStr);
|
||||
}
|
||||
}
|
||||
|
||||
function deletePunch(uuid) {
|
||||
/* Before doing this,
|
||||
Refresh the array,
|
||||
So that we don't overwrite data */
|
||||
getJson();
|
||||
|
||||
// console.log(`${punchList}`);
|
||||
// console.log(`${window.punches}`);
|
||||
punchList = window.punches;
|
||||
item = findArrayId(uuid);
|
||||
|
||||
console.log(`splicing ${item}`);
|
||||
|
||||
|
||||
punchList.splice(item, 1);
|
||||
jsonStr = JSON.stringify(punchList);
|
||||
putJson(jsonStr);
|
||||
// document.getElementById("newEventList").innerHTML = jsonStr;
|
||||
}
|
||||
|
||||
|
||||
function enableElement(element) {
|
||||
console.log(`enabling ${element}`);
|
||||
document.getElementById(element).style.display = "block";
|
||||
}
|
||||
|
||||
function disableElement(element) {
|
||||
console.log(`disabling ${element}`);
|
||||
document.getElementById(element).style.display = "none";
|
||||
}
|
||||
|
||||
function displayMeta() {
|
||||
document.getElementById("meta").innerHTML = "Version: " + version ;
|
||||
}
|
||||
|
||||
function toggleShowDone() {
|
||||
if (showDone === false) {
|
||||
window.showDone = true;
|
||||
} else if (showDone === true) {
|
||||
window.showDone = false;
|
||||
} else {
|
||||
window.showDone = false;
|
||||
}
|
||||
getJson();
|
||||
}
|
||||
|
||||
function editPunch(uuid) {
|
||||
/* Before doing this,
|
||||
Refresh the array,
|
||||
So that we don't overwrite data */
|
||||
getJson();
|
||||
|
||||
disableElement("newEvent");
|
||||
disableElement("punchListAll");
|
||||
enableElement("editPunch");
|
||||
|
||||
punchList = window.punches;
|
||||
item = findArrayId(uuid);
|
||||
|
||||
var id = item;
|
||||
|
||||
var subject = punchList[id].subject;
|
||||
var priority = punchList[id].priority;
|
||||
var progress = punchList[id].progress;
|
||||
var nDate = punchList[id].nDate;
|
||||
var notes = punchList[id].notes;
|
||||
|
||||
document.getElementById("editID").value = id;
|
||||
document.getElementById("editSubject").value = subject;
|
||||
document.getElementById("timepickerEdit").value = nDate;
|
||||
document.getElementById("editNotes").value = notes;
|
||||
document.getElementById("editProgress").value = progress;
|
||||
document.getElementById("editPriority").value = priority;
|
||||
}
|
||||
|
||||
function submitEditPunch() {
|
||||
punchList = window.punches;
|
||||
|
||||
var id = document.getElementById("editID").value;
|
||||
var subjectField = document.getElementById("editSubject").value;
|
||||
var priorityField = document.getElementById("editPriority").value;
|
||||
var progressField = document.getElementById("editProgress").value;
|
||||
var nDateField = document.getElementById("timepickerEdit").value;
|
||||
var notesField = document.getElementById("editNotes").value;
|
||||
|
||||
punchList[id].subject = subjectField;
|
||||
punchList[id].priority = priorityField;
|
||||
punchList[id].progress = progressField;
|
||||
punchList[id].nDate = nDateField;
|
||||
punchList[id].notes = notesField;
|
||||
|
||||
jsonStr = JSON.stringify(punchList);
|
||||
putJson(jsonStr);
|
||||
disableElement("editPunch");
|
||||
}
|
||||
|
||||
function addTag() {
|
||||
/* Before doing this,
|
||||
Refresh the array,
|
||||
So that we don't overwrite data */
|
||||
getJson();
|
||||
|
||||
var item = document.getElementById("editID").value;
|
||||
var newTag = document.getElementById("tag").value.toLowerCase();
|
||||
|
||||
console.log(`Item: ${item}`);
|
||||
console.log(`New Tag: ${newTag}`);
|
||||
// make sure tags object exists
|
||||
if (punchList[item].tags === undefined) {
|
||||
console.log(`Adding tags object to punchList[${item}]`);
|
||||
punchList[item].tags = [];
|
||||
}
|
||||
|
||||
punchList[item].tags.push(newTag);
|
||||
console.log(`${punchList[item].tags}`);
|
||||
|
||||
jsonStr = JSON.stringify(punchList);
|
||||
putJson(jsonStr);
|
||||
disableElement("editPunch");
|
||||
enableElement("punchListAll");
|
||||
}
|
||||
|
||||
function clearDefault(a){
|
||||
if (a.defaultValue == a.value) {
|
||||
a.value="";
|
||||
}
|
||||
}
|
||||
|
||||
function genUid() {
|
||||
function chr4() {
|
||||
return Math.random().toString(16).slice(-4);
|
||||
}
|
||||
return chr4() + chr4() +
|
||||
'-' + chr4() +
|
||||
'-' + chr4() +
|
||||
'-' + chr4() +
|
||||
'-' + chr4() + chr4() + chr4();
|
||||
}
|
||||
|
||||
//google stuff
|
||||
function onSignIn(googleUser) {
|
||||
// var profile = googleUser.getBasicProfile();
|
||||
// console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
|
||||
// console.log('Name: ' + profile.getName());
|
||||
// console.log('Image URL: ' + profile.getImageUrl());
|
||||
// console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
|
||||
// getJson();
|
||||
}
|
||||
|
||||
function signOut() {
|
||||
var auth2 = gapi.auth2.getAuthInstance();
|
||||
auth2.signOut().then(function () {
|
||||
console.log('User signed out.');
|
||||
});
|
||||
}
|
||||
|
||||
getJson();
|
||||
|
||||
$('li').on("click", function(event){
|
||||
var target = event.target,
|
||||
index = $(target).index();
|
||||
console.log(target, index);
|
||||
document.getElementById("debug1").innerHTML = target + "<br />" + index;
|
||||
});
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
|
||||
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
|
||||
#sortable li span { position: absolute; margin-left: -1.3em; }
|
||||
.hide { display: none; }
|
||||
body {
|
||||
background: #222;
|
||||
color: #AAA; }
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
var version = "0.4.015",
|
||||
var version = "0.5.132",
|
||||
debug = false,
|
||||
jsonUrl = "https://api.myjson.com/bins/1dodsj",
|
||||
showDone = false,
|
||||
|
|
|
|||
Loading…
Reference in New Issue