move js to it's own file

This commit is contained in:
Kameron Kenny 2019-06-04 17:00:12 -04:00
parent e2da3dcc44
commit 3bd89970a4
2 changed files with 189 additions and 176 deletions

View File

@ -1,3 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font --> <!-- Font -->
@ -11,171 +13,32 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> <meta http-equiv="Expires" content="0">
<script src="metadata.js"></script>
<script src="eventManage.js"></script>
</head> </head>
<body onLoad="getJson(genList)"> <body onLoad="getJson(genList)">
<div id="eventList"></div> <div id="eventList"></div>
<div id="newEventList"></div> <div id="newEventList"></div>
<div id="newEvent"><input type="text" id="newSubject" value="Subject"><input type="text" id="newStartDate" value="June 04, 2019 00:00:00"><input type="text" id="newNotes" value="Notes"><input onClick="createNewEvent()" id="test" type="button" value="Create" /></div> <div id="newEvent">
<div id="editEvent"><input type=hidden id=editID><input type="text" id="editSubject" value=""><input type="text" id="editStartDate" value=""><input type="text" id="editNotes" value=""><input onClick="submitEditEvent()" id="test" type="button" value="Update" /></div> <input type="text" id="newSubject" value="Subject">
<input type="text" id="newStartDate" value="June 04, 2019 00:00:00">
<input type="text" id="newNotes" value="Notes">
<input onClick="createNewEvent()" id="test" type="button" value="Create" />
</div>
<div id="editEvent">
<input type=hidden id=editID>
<input type="text" id="editSubject" value="">
<input type="text" id="editStartDate" value="">
<input type="text" id="editNotes" value="">
<input onClick="submitEditEvent()" id="test" type="button" value="Update" />
</div>
<!-- <textarea id="data"></textarea><br /> -->
<input onClick="getJson(genList)" id="getJson" type="button" value="Get" /> <input onClick="getJson(genList)" id="getJson" type="button" value="Get" />
<input onClick="enableElement('newEvent')" id="put" type="button" value="New Event" /> <input onClick="enableElement('newEvent')" id="put" type="button" value="New Event" />
<p id="result"></p> <p id="result"></p>
</body> </body>
</html>
<script>
var events, eventsList, listLength, object;
function isItArray(object) {
console.log(`is ${object} Array = ${Array.isArray(object)}`);
// return Array.isArray(object);
}
function conLog(object) {
console.log(`${object}`);
}
function test() {
d = document.getElementById("data").value;
document.getElementById("result").innerHTML = d;
}
function putJson(data) {
// var data = document.getElementById("data").value;
let req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (req.readyState == XMLHttpRequest.DONE) {
document.getElementById("result").innerHTML = new Date().getTime() + " - " + req.status;
getJson(genList);
}
};
req.open("PUT", "https://api.myjson.com/bins/k0abr", true);
req.setRequestHeader("Content-type", "application/json");
req.send(data);
}
function getJson(callback) {
console.log(`getJson`);
let req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (req.readyState == XMLHttpRequest.DONE) {
window.events = JSON.parse(req.responseText);
window.events.sort(function(a, b){return new Date(a.date).getTime() - new Date(b.date).getTime()});
callback(window.events);
}
};
req.open("GET", "https://api.myjson.com/bins/k0abr", true);
req.send();
}
function genList(eventsList) {
console.log(`inside gen list `);
var eventStyle = "events";
// isItArray(eventsList);
// eventsList.sort(function(a, b){return new Date(a.date).getTime() - new Date(b.date).getTime()});
listLength = eventsList.length;
// conLog("listLength = " + listLength);
list = "<table class=events><th class=events>ID</th><th class=events>Event</th><th class=events>Time</th><th></th>";
for (i = 0; i < listLength; i++) {
list += "<tr><td class=" + eventStyle + ">" + i + "<td class=" + eventStyle + ">" + eventsList[i].subject + "</td><td class=" + eventStyle + ">" + eventsList[i].date + "</td><td class=" + eventStyle + "><a onClick=deleteEvent(" + i + ")>delete</a>|<a onClick=editEvent(" + i + ")>edit</a></td></tr>";
}
list += "</table>";
document.getElementById("eventList").innerHTML = list;
}
function createNewEvent() {
// console.log(`${eventsList}`);
// console.log(`${window.events}`);
eventsList = window.events;
var subjectField = document.getElementById("newSubject").value;
var dateField = document.getElementById("newStartDate").value;
var notesField = document.getElementById("newNotes").value;
console.log(`${subjectField}`);
console.log(`${dateField}`);
console.log(`${notesField}`);
var newEventJson = { date: dateField, subject: subjectField, notes: notesField };
eventsList.push(newEventJson);
jsonStr = JSON.stringify(eventsList);
putJson(jsonStr);
disableElement("newEvent");
// document.getElementById("newEventList").innerHTML = jsonStr;
}
function deleteEvent(item) {
// console.log(`${eventsList}`);
// console.log(`${window.events}`);
eventsList = window.events;
console.log(`splicing ${item}`);
eventsList.splice(item, 1);
jsonStr = JSON.stringify(eventsList);
putJson(jsonStr);
// document.getElementById("newEventList").innerHTML = jsonStr;
}
function editEvent(item) {
// console.log(`${eventsList}`);
// console.log(`${window.events}`);
enableElement("editEvent");
eventsList = window.events;
console.log(`editing ${item}`);
var id = item;
var d = eventsList[item].date;
var s = eventsList[item].subject;
var n = eventsList[item].notes;
document.getElementById("editID").value = id;
document.getElementById("editSubject").value = s;
document.getElementById("editStartDate").value = d;
document.getElementById("editNotes").value = n;
}
function submitEditEvent() {
// console.log(`${eventsList}`);
// console.log(`${window.events}`);
eventsList = window.events;
var id = document.getElementById("editID").value;
var s = document.getElementById("editSubject").value;
var d = document.getElementById("editStartDate").value;
var n = document.getElementById("editNotes").value;
eventsList[id].date = d;
eventsList[id].subject = s;
eventsList[id].notes = n;
jsonStr = JSON.stringify(eventsList);
putJson(jsonStr);
disableElement("editEvent");
// document.getElementById("newEventList").innerHTML = jsonStr;
}
function enableElement(element) {
document.getElementById(element).style.display = "block";
}
function disableElement(element) {
document.getElementById(element).style.display = "none";
}
</script>

View File

@ -0,0 +1,150 @@
var events, eventsList, listLength, object;
function isItArray(object) {
console.log(`is ${object} Array = ${Array.isArray(object)}`);
// return Array.isArray(object);
}
function conLog(object) {
console.log(`${object}`);
}
function test() {
d = document.getElementById("data").value;
document.getElementById("result").innerHTML = d;
}
function putJson(data) {
// var data = document.getElementById("data").value;
let req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (req.readyState == XMLHttpRequest.DONE) {
document.getElementById("result").innerHTML = new Date().getTime() + " - " + req.status;
getJson(genList);
}
};
req.open("PUT", "https://api.myjson.com/bins/k0abr", true);
req.setRequestHeader("Content-type", "application/json");
req.send(data);
}
function getJson(callback) {
console.log(`getJson`);
let req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (req.readyState == XMLHttpRequest.DONE) {
window.events = JSON.parse(req.responseText);
window.events.sort(function(a, b){return new Date(a.date).getTime() - new Date(b.date).getTime()});
callback(window.events);
}
};
req.open("GET", "https://api.myjson.com/bins/k0abr", true);
req.send();
}
function genList(eventsList) {
console.log(`inside gen list `);
var eventStyle = "events";
// isItArray(eventsList);
// eventsList.sort(function(a, b){return new Date(a.date).getTime() - new Date(b.date).getTime()});
listLength = eventsList.length;
// conLog("listLength = " + listLength);
list = "<table class=events><th class=events>ID</th><th class=events>Event</th><th class=events>Time</th><th></th>";
for (i = 0; i < listLength; i++) {
list += "<tr><td class=" + eventStyle + ">" + i + "<td class=" + eventStyle + ">" + eventsList[i].subject + "</td><td class=" + eventStyle + ">" + eventsList[i].date + "</td><td class=" + eventStyle + "><a onClick=deleteEvent(" + i + ")>delete</a>|<a onClick=editEvent(" + i + ")>edit</a></td></tr>";
}
list += "</table>";
document.getElementById("eventList").innerHTML = list;
}
function createNewEvent() {
// console.log(`${eventsList}`);
// console.log(`${window.events}`);
eventsList = window.events;
var subjectField = document.getElementById("newSubject").value;
var dateField = document.getElementById("newStartDate").value;
var notesField = document.getElementById("newNotes").value;
console.log(`${subjectField}`);
console.log(`${dateField}`);
console.log(`${notesField}`);
var newEventJson = { date: dateField, subject: subjectField, notes: notesField };
eventsList.push(newEventJson);
jsonStr = JSON.stringify(eventsList);
putJson(jsonStr);
disableElement("newEvent");
// document.getElementById("newEventList").innerHTML = jsonStr;
}
function deleteEvent(item) {
// console.log(`${eventsList}`);
// console.log(`${window.events}`);
eventsList = window.events;
console.log(`splicing ${item}`);
eventsList.splice(item, 1);
jsonStr = JSON.stringify(eventsList);
putJson(jsonStr);
// document.getElementById("newEventList").innerHTML = jsonStr;
}
function editEvent(item) {
// console.log(`${eventsList}`);
// console.log(`${window.events}`);
enableElement("editEvent");
eventsList = window.events;
console.log(`editing ${item}`);
var id = item;
var d = eventsList[item].date;
var s = eventsList[item].subject;
var n = eventsList[item].notes;
document.getElementById("editID").value = id;
document.getElementById("editSubject").value = s;
document.getElementById("editStartDate").value = d;
document.getElementById("editNotes").value = n;
}
function submitEditEvent() {
// console.log(`${eventsList}`);
// console.log(`${window.events}`);
eventsList = window.events;
var id = document.getElementById("editID").value;
var s = document.getElementById("editSubject").value;
var d = document.getElementById("editStartDate").value;
var n = document.getElementById("editNotes").value;
eventsList[id].date = d;
eventsList[id].subject = s;
eventsList[id].notes = n;
jsonStr = JSON.stringify(eventsList);
putJson(jsonStr);
disableElement("editEvent");
// document.getElementById("newEventList").innerHTML = jsonStr;
}
function enableElement(element) {
document.getElementById(element).style.display = "block";
}
function disableElement(element) {
document.getElementById(element).style.display = "none";
}