Browse Source

added edit functionality to display pages

master
acmerriman 4 years ago
parent
commit
2355ea7994
13 changed files with 807 additions and 64 deletions
  1. +1
    -1
      browse.html
  2. +11
    -13
      browse.js
  3. +51
    -3
      display/companies.html
  4. +173
    -1
      display/companies.js
  5. +48
    -2
      display/display.css
  6. +46
    -3
      display/people.html
  7. +173
    -1
      display/people.js
  8. +41
    -3
      display/toys.html
  9. +218
    -1
      display/toys.js
  10. +3
    -6
      index.html
  11. +5
    -6
      index.js
  12. +36
    -9
      server.js
  13. +1
    -15
      submitEntry.js

+ 1
- 1
browse.html View File

@ -21,7 +21,7 @@
</ul>
<div id="mainContainer">
<h1>People, Toys, and Companies</h1>
<h1 id="header">People, Toys, and Companies</h1>
<hr>

+ 11
- 13
browse.js View File

@ -6,6 +6,7 @@ function main()
var category = getParameterByName("category");
if(category.toLowerCase() == "toys")
{
document.getElementById("header").innerHTML = "Toys";
var superType = getParameterByName("superType");
var subType = getParameterByName("subType");
var name = getParameterByName("name");
@ -32,6 +33,7 @@ function main()
}
else if(category.toLowerCase() == "companies")
{
document.getElementById("header").innerHTML = "Companies";
var name = getParameterByName("name");
var data = {name:name}
$.ajax({
@ -56,6 +58,7 @@ function main()
}
else //defaults to people
{
document.getElementById("header").innerHTML = "People";
var name = getParameterByName("name");
var data = {name:name}
$.ajax({
@ -89,7 +92,14 @@ function setupPage(data, category)
var html = "";
var name = data[i].name;
html += "<td>" + data[i].name + "</td>";
html += "<td><img class='tableImage' src='" + data[i].picture + "' /></td>";
if(data[i].picture && data[i].picture != "")
{
html += "<td><img class='tableImage' src='" + data[i].picture + "' /></td>";
}
else
{
html += "<td><img class='tableImage' src='missingImage.png' /></td>";
}
html += "<td>" + data[i].year + "</td>";
html += "<td>" + data[i].description + "</td>";
row.innerHTML = html;
@ -98,18 +108,6 @@ function setupPage(data, category)
row.onclick = function(e)
{
window.location.href = href;
// if(category.toLowerCase() == "toys")
// {
// window.location.href = "./display/toys?name=" + name;
// }
// else if(category.toLowerCase() == "companies")
// {
// window.location.href = "./display/companies?name=" + name;
// }
// else //defaults to people
// {
// window.location.href = "./display/people?name=" + name;
// }
}
})(row, data[i].href);
tableBody.appendChild(row);

+ 51
- 3
display/companies.html View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="display.css">
</head>
<body>
<a href="./"> <img src="../img/jpp-logo2.png" alt="JPP Logo" style="margin-left:15%;" /></a>
<a href="../"> <img src="../img/jpp-logo2.png" alt="JPP Logo" style="margin-left:15%;" /></a>
<ul class="topnav">
<li><a href="../browse.html?category=people">People</a></li>
<li><a href="../browse.html?category=toys">Toys</a></li>
@ -20,8 +20,56 @@
<li><a href="../submitEntry.html">Submit</a></li>
</ul>
<div id ="mainContainer">
<div id='infoContainer'>
</div>
<div id='displayContainer'>
<div id='infoContainer'>
</div>
<button id='editPage' onclick='editPage()'>Edit</button>
</div>
<div id='editContainer' style="display:none;">
<h1>Edit</h1>
<p><label>Name: <span class="required">*</span>
<input id="eName" type="textbox"></input>
</label>
<p><label>Founding Year:
<input id="eFoundingYear" type="textbox"></input>
</label>
<p><label>Closing Year:
<input id="eClosingYear" type="textbox"></input>
</label>
<p><label>Founding Location:
<input id="eFoundingLocation" type="textbox"></input>
</label>
<p><label>People:
<div id='ePeople'><div id='ePeopleWrapper'><div id='ePeopleContainer_0' index=0><input type='text' class='cPeople' id='ePeople_0' index=0></input><br /></div></div><button id='ePeopleAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Toys:
<div id='eToys'><div id='eToysWrapper'><div id='eToysContainer_0' index=0><input type='text' class='cToys' id='eToys_0' index=0></input><br /></div></div><button id='eToysAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Website:
<input id="eWebsite" type="textbox"></input>
</label>
<p><label>Logo:
<input id="eLogo" type="textbox"></input>
</label>
<p><label>Current Owner:
<input id="eCurrentOwner" type="textbox"></input>
</label>
<p><label>Sources:
<div id='eSources'><div id='eSourcesWrapper'><div id='eSourcesContainer_0' index=0><input type='text' class='cSources' id='eSources_0' index=0></input><br /></div></div><button id='eSourcesAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Source Titles:
<div id='eSourceTitles'><div id='eSourceTitlesWrapper'><div id='eSourceTitlesContainer_0' index=0><input type='text' class='cSourceTitles' id='eSourceTitles_0' index=0></input><br /></div></div><button id='eSourceTitlesAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Description:
<input id="eDescription" type="textbox"></input>
</label>
<p><label>Live:
<input id="eLive" type="checkbox"></input>
</label>
<br><br>
<button id='eancelEdit' onclick="cancelEdit()">Cancel</button>
<button id='submitEdit' onclick="submitEdit()">Submit</button>
</div>
</div>
</body>
</html>

+ 173
- 1
display/companies.js View File

@ -1,5 +1,7 @@
window.onload = main;
var g_data;
function main()
{
var name = getParameterByName("name");
@ -13,7 +15,7 @@ function main()
success: function(data) {
console.log('success');
console.log(data);
//g_data = data;
g_data = data;
setupPage(data);
},
@ -110,6 +112,176 @@ function setupPage(data)
htmlString += "<br/><br/><br/></div>"
document.getElementById("infoContainer").innerHTML = htmlString;
document.getElementById("eName").value = (data.Name == null ? "" : data.Name.replace(/'/g, "&#39;"));
document.getElementById("eFoundingYear").value = (data.FoundingYear == null ? "" : data.FoundingYear.replace(/'/g, "&#39;"));
document.getElementById("eClosingYear").value = (data.ClosingYear == null ? "" : data.ClosingYear.replace(/'/g, "&#39;"));
setupArrayInput("ePeople", data.People);
setupArrayInput("eToys", data.Toys);
document.getElementById("eWebsite").value = (data.Website == null ? "" : data.Website.replace(/'/g, "&#39;"));
document.getElementById("eLogo").value = (data.Logo == null ? "" : data.Logo.replace(/'/g, "&#39;"));
document.getElementById("eCurrentOwner").value = (data.CurrentOwner == null ? "" : data.CurrentOwner.replace(/'/g, "&#39;"));
setupArrayInput("eSources", data.Sources);
setupArrayInput("eSourceTitles", data.SourceTitles);
document.getElementById("eDescription").value = (data.Description == null ? "" : data.Description.replace(/'/g, "&#39;"));
document.getElementById("eLive").checked = data.Live;
var addRowButtons = document.getElementsByClassName("addRowButton");
for(var i = 0; i < addRowButtons.length; i++)
{
addRowButtons[i].onclick = function(e)
{
console.log(e);
var parentID = e.target.parentElement.id;
var wrapper = document.getElementById(parentID + "Wrapper");
var nextIndex = parseInt(wrapper.lastChild.getAttribute("index")) + 1;
var container = document.createElement("div");
container.id = parentID + "Container_" + nextIndex;
container.setAttribute("index", nextIndex);
container.innerHTML = "<input type='text' class='" + parentID + "' id='" + parentID + "_" + nextIndex + "' index=" + nextIndex + "></input><button id='" + parentID + "DeleteRow_" + nextIndex + "' index=" + nextIndex + " style='color:#e7f6ff; background-color:#228dff; text-align:center; font-size:16px; box-shadow:1px 1px 10px rgba(0,0,0,.25); border: none; padding: 7px 12px; border-radius: 5px; margin-left:15px; margin-bottom: 5px;' >-</button><br />";
wrapper.appendChild(container);
if(parentID.includes("Sources") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourceTitlesAddRow");
button.onclick({target:button, repeated:true});
}
if(parentID.includes("SourceTitles") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourcesAddRow");
button.onclick({target:button, repeated:true});
}
document.getElementById(parentID + "DeleteRow_" + nextIndex).onclick = function(e)
{
wrapper.removeChild(document.getElementById(parentID + "Container_" + nextIndex));
if(parentID.includes("Sources") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourceTitlesDeleteRow_" + nextIndex);
button.onclick({target:button, repeated:true});
}
if(parentID.includes("SourceTitles") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourcesDeleteRow_" + nextIndex);
button.onclick({target:button, repeated:true});
}
};
}
}
}
function setupArrayInput(id, array)
{
var element = document.getElementById(id);
var wrapper = document.getElementById(id + "Wrapper");
if(array.length > 0)
{
document.getElementById(id + "_0").value = (array[0] == null ? "" : array[0].replace(/'/g, "&#39;"));
}
for(var i = 1; i < array.length; i++)
{
var container = document.createElement("div");
container.id = id + "Container_" + i;
container.setAttribute("index", i);
container.innerHTML = "<input type='text' class='" + id + "' id='" + id + "_" + i + "' index=" + i + " value='" + (array[i] == null ? "" : array[i].replace(/'/g, "&#39;")) + "'></input><button id='" + id + "DeleteRow_" + i + "' index=" + i + " style='color:#e7f6ff; background-color:#228dff; text-align:center; font-size:16px; box-shadow:1px 1px 10px rgba(0,0,0,.25); border: none; padding: 7px 12px; border-radius: 5px; margin-left:15px; margin-bottom: 5px;' >-</button><br />";
wrapper.appendChild(container);
(function(i, id) {
document.getElementById(id + "DeleteRow_" + i).onclick = function(e)
{
wrapper.removeChild(document.getElementById(id + "Container_" + i));
if(id.includes("Sources") && !e.repeated)
{
var button = document.getElementById(id.substr(0,1) + "SourceTitlesDeleteRow_" + i);
button.onclick({target:button, repeated:true});
}
if(id.includes("SourceTitles") && !e.repeated)
{
var button = document.getElementById(id.substr(0,1) + "SourcesDeleteRow_" + i);
button.onclick({target:button, repeated:true});
}
};
})(i, id);
}
}
function editPage()
{
document.getElementById("displayContainer").style.display = "none";
document.getElementById("editContainer").style.display = "block";
}
function cancelEdit()
{
document.getElementById("displayContainer").style.display = "block";
document.getElementById("editContainer").style.display = "none";
}
function submitEdit()
{
var data = {};
data.Name = parseTextInput(document.getElementById("eName").value);
data.FoundingYear = parseTextInput(document.getElementById("eFoundingYear").value);
data.ClosingYear = parseTextInput(document.getElementById("eClosingYear").value);
data.FoundingLocation = parseTextInput(document.getElementById("eFoundingLocation").value);
data.People = parseArrayInput(document.getElementsByClassName("ePeople"));
data.Toys = parseArrayInput(document.getElementsByClassName("eToys"));
data.Website = parseTextInput(document.getElementById("eWebsite").value);
data.Logo = parseTextInput(document.getElementById("eLogo").value);
data.CurrentOwner = parseTextInput(document.getElementById("eCurrentOwner").value);
data.Description = parseTextInput(document.getElementById("eDescription").value);
data.Sources = parseArrayInput(document.getElementsByClassName("eSources"));
data.SourceTitles = parseArrayInput(document.getElementsByClassName("eSourceTitles"));
data.Live = document.getElementById("eLive").checked;
data.OrigName = g_data.Name;
if(data.Name == null)
{
alert("Name can't be null");
}
else
{
$.ajax({
type: "POST",
url: 'http://localhost:3000/editcompanies',
data: {data:JSON.stringify(data)},
success: function(data) {
console.log('success');
console.log(data);
location.href = "./companies?name=" + data.Name;
}//,
// error: function(data) {
// console.log('error');
// console.log(data);
// // two arguments: the id of the Timeline container (no '#')
// // and the JSON object or an instance of TL.TimelineConfig created from
// // a suitable JSON object
// //window.timeline = new TL.Timeline('timeline-embed', 'marktwain_test.json');
// }
});
}
}
function parseTextInput(text)
{
return text == "" ? null : text;
}
function parseArrayInput(list)
{
var values = [];
for (var i = 0; i < list.length; i++)
{
values.push(parseTextInput(list[i].value));
}
var string = "{\"" + values.toString() + "\"}";
return string;
}
function getParameterByName(name) {

+ 48
- 2
display/display.css View File

@ -68,15 +68,61 @@ ul.topnav li.right {float: right;}
width: 70%;
}
#year {
#submitEdit, #cancelEdit, #editPage {
border: none;
background-color: #228dff;
color: #e7f6ff;
padding: 7px;
font-size: 13px;
text-align: center;
width: 75px;
border-radius: 15px;
border-radius: 20px;
box-shadow: 2px 2px 5px rgba(0,0,0,.25);
margin: 15px;
}
label {
padding-left: 30px;
}
select, input {
margin-left: 20px;
width: 25%;
padding: 7px;
box-shadow: 1px 1px 10px rgba(0,0,0,.25);
border-radius: 5px;
border: 2px solid #dde8f0;
}
input[type="checkbox"] {
box-shadow: none;
margin-left: 0px;
padding: 0px;
width: 10%;
}
input#pBio, input#cDescription, input#tDescription {
padding: 50px;
}
.required, #required {
color: red;
}
.addRowButton {
color: #e7f6ff;
background-color: #228dff;
text-align: center;
font-size: 16px;
box-shadow: 1px 1px 10px rgba(0,0,0,.25);
border: none;
padding: 7px 12px;
border-radius: 5px;
margin: 5px;
}
#editContainer {
margin: 30px;
}
h1 {

+ 46
- 3
display/people.html View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="display.css">
</head>
<body>
<a href="./"> <img src="../img/jpp-logo2.png" alt="JPP Logo" style="margin-left:15%;" /></a>
<a href="../"> <img src="../img/jpp-logo2.png" alt="JPP Logo" style="margin-left:15%;" /></a>
<ul class="topnav">
<li><a href="../browse.html?category=people">People</a></li>
<li><a href="../browse.html?category=toys">Toys</a></li>
@ -20,8 +20,51 @@
<li><a href="../submitEntry.html">Submit</a></li>
</ul>
<div id ="mainContainer">
<div id='infoContainer'>
</div>
<div id='displayContainer'>
<div id='infoContainer'>
</div>
<button id='editPage' onclick="editPage()">Edit</button>
</div>
<div id='editContainer' style="display:none;">
<h1>Edit</h1>
<p><label>Name: <span class="required">*</span>
<input id="eFirstName" type="textbox" placeholder="First"></input>
<input id="eLastName" type="textbox" placeholder="Last"></input>
<label>
<p><label>Middle Name:
<input id="eMiddleName" type="textbox"></input>
</label>
<p><label>Birth Year:
<input id="eBirthYear" type="textbox"></input>
</label>
<p><label>Death Year:
<input id="eDeathYear" type="textbox"></input>
</label>
<p><label>Companies:
<div id='eCompanies'><div id='eCompaniesWrapper'><div id='eCompaniesContainer_0' index=0><input type='text' class='eCompanies' id='eCompanies_0' index=0></input><br /></div></div><button id='eCompaniesAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Toys:
<div id='eToys'><div id='eToysWrapper'><div id='eToysContainer_0' index=0><input type='text' class='eToys' id='eToys_0' index=0></input><br /></div></div><button id='eToysAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Picture:
<input id="ePicture" type="textbox"></input>
</label>
<p><label>Sources:
<div id='eSources'><div id='eSourcesWrapper'><div id='eSourcesContainer_0' index=0><input type='text' class='eSources' id='eSources_0' index=0></input><br /></div></div><button id='eSourcesAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Source Titles:
<div id='eSourceTitles'><div id='eSourceTitlesWrapper'><div id='eSourceTitlesContainer_0' index=0><input type='text' class='eSourceTitles' id='eSourceTitles_0' index=0></input><br /></div></div><button id='eSourceTitlesAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Bio:
<input id="eBio" type="textbox"></input>
</label>
<p><label>Live:
<input id="eLive" type="checkbox"></input>
</label>
<br><br>
<button id='cancelEdit' onclick="cancelEdit()">Cancel</button>
<button id='submitEdit' onclick="submitEdit()">Submit</button>
</div>
</div>
</body>
</html>

+ 173
- 1
display/people.js View File

@ -1,5 +1,7 @@
window.onload = main;
var g_data;
function main()
{
var firstName = getParameterByName("firstName");
@ -23,7 +25,7 @@ function main()
success: function(data) {
console.log('success');
console.log(data);
//g_data = data;
g_data = data;
setupPage(data);
},
@ -119,6 +121,176 @@ function setupPage(data)
//console.log(htmlString);
document.getElementById("infoContainer").innerHTML = htmlString;
document.getElementById("eFirstName").value = (data.FirstName == null ? "" : data.FirstName.replace(/'/g, "&#39;"));
document.getElementById("eLastName").value = (data.LastName == null ? "" : data.LastName.replace(/'/g, "&#39;"));
document.getElementById("eMiddleName").value = (data.MiddleName == null ? "" : data.MiddleName.replace(/'/g, "&#39;"));
document.getElementById("eBirthYear").value = (data.BirthYear == null ? "" : data.BirthYear.replace(/'/g, "&#39;"));
document.getElementById("eDeathYear").value = (data.DeathYear == null ? "" : data.DeathYear.replace(/'/g, "&#39;"));
setupArrayInput("eCompanies", data.Companies);
setupArrayInput("eToys", data.Toys);
document.getElementById("ePicture").value = (data.Picture == null ? "" : data.Picture.replace(/'/g, "&#39;"));
setupArrayInput("eSources", data.Sources);
setupArrayInput("eSourceTitles", data.SourceTitles);
document.getElementById("eBio").value = (data.Bio == null ? "" : data.Bio.replace(/'/g, "&#39;"));
document.getElementById("eLive").checked = data.Live;
var addRowButtons = document.getElementsByClassName("addRowButton");
for(var i = 0; i < addRowButtons.length; i++)
{
addRowButtons[i].onclick = function(e)
{
console.log(e);
var parentID = e.target.parentElement.id;
var wrapper = document.getElementById(parentID + "Wrapper");
var nextIndex = parseInt(wrapper.lastChild.getAttribute("index")) + 1;
var container = document.createElement("div");
container.id = parentID + "Container_" + nextIndex;
container.setAttribute("index", nextIndex);
container.innerHTML = "<input type='text' class='" + parentID + "' id='" + parentID + "_" + nextIndex + "' index=" + nextIndex + "></input><button id='" + parentID + "DeleteRow_" + nextIndex + "' index=" + nextIndex + " style='color:#e7f6ff; background-color:#228dff; text-align:center; font-size:16px; box-shadow:1px 1px 10px rgba(0,0,0,.25); border: none; padding: 7px 12px; border-radius: 5px; margin-left:15px; margin-bottom: 5px;' >-</button><br />";
wrapper.appendChild(container);
if(parentID.includes("Sources") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourceTitlesAddRow");
button.onclick({target:button, repeated:true});
}
if(parentID.includes("SourceTitles") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourcesAddRow");
button.onclick({target:button, repeated:true});
}
document.getElementById(parentID + "DeleteRow_" + nextIndex).onclick = function(e)
{
wrapper.removeChild(document.getElementById(parentID + "Container_" + nextIndex));
if(parentID.includes("Sources") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourceTitlesDeleteRow_" + nextIndex);
button.onclick({target:button, repeated:true});
}
if(parentID.includes("SourceTitles") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourcesDeleteRow_" + nextIndex);
button.onclick({target:button, repeated:true});
}
};
}
}
}
function setupArrayInput(id, array)
{
var element = document.getElementById(id);
var wrapper = document.getElementById(id + "Wrapper");
if(array.length > 0)
{
document.getElementById(id + "_0").value = (array[0] == null ? "" : array[0].replace(/'/g, "&#39;"));
}
for(var i = 1; i < array.length; i++)
{
var container = document.createElement("div");
container.id = id + "Container_" + i;
container.setAttribute("index", i);
container.innerHTML = "<input type='text' class='" + id + "' id='" + id + "_" + i + "' index=" + i + " value='" + (array[i] == null ? "" : array[i].replace(/'/g, "&#39;")) + "'></input><button id='" + id + "DeleteRow_" + i + "' index=" + i + " style='color:#e7f6ff; background-color:#228dff; text-align:center; font-size:16px; box-shadow:1px 1px 10px rgba(0,0,0,.25); border: none; padding: 7px 12px; border-radius: 5px; margin-left:15px; margin-bottom: 5px;' >-</button><br />";
wrapper.appendChild(container);
(function(i, id) {
document.getElementById(id + "DeleteRow_" + i).onclick = function(e)
{
wrapper.removeChild(document.getElementById(id + "Container_" + i));
if(id.includes("Sources") && !e.repeated)
{
var button = document.getElementById(id.substr(0,1) + "SourceTitlesDeleteRow_" + i);
button.onclick({target:button, repeated:true});
}
if(id.includes("SourceTitles") && !e.repeated)
{
var button = document.getElementById(id.substr(0,1) + "SourcesDeleteRow_" + i);
button.onclick({target:button, repeated:true});
}
};
})(i, id);
}
}
function editPage()
{
document.getElementById("displayContainer").style.display = "none";
document.getElementById("editContainer").style.display = "block";
}
function cancelEdit()
{
document.getElementById("displayContainer").style.display = "block";
document.getElementById("editContainer").style.display = "none";
}
function submitEdit()
{
var data = {};
data.FirstName = parseTextInput(document.getElementById("eFirstName").value);
data.MiddleName = parseTextInput(document.getElementById("eMiddleName").value);
data.LastName = parseTextInput(document.getElementById("eLastName").value);
data.BirthYear = parseTextInput(document.getElementById("eBirthYear").value);
data.DeathYear = parseTextInput(document.getElementById("eDeathYear").value);
data.Companies = parseArrayInput(document.getElementsByClassName("eCompanies"));
data.Toys = parseArrayInput(document.getElementsByClassName("eToys"));
data.Bio = parseTextInput(document.getElementById("eBio").value);
data.Picture = parseTextInput(document.getElementById("ePicture").value);
data.Sources = parseArrayInput(document.getElementsByClassName("eSources"));
data.SourceTitles = parseArrayInput(document.getElementsByClassName("eSourceTitles"));
data.Live = document.getElementById("eLive").checked;
data.OrigFirstName = g_data.FirstName;
data.OrigLastName = g_data.LastName;
if(data.FirstName == null || data.LastName == null)
{
alert("First Name and Last Name can't be null");
}
else
{
$.ajax({
type: "POST",
url: 'http://localhost:3000/editpeople',
data: {data:JSON.stringify(data)},
success: function(data) {
console.log('success');
console.log(data);
location.href = "./people?firstName=" + data.FirstName + "&lastName=" + data.LastName;
}//,
// error: function(data) {
// console.log('error');
// console.log(data);
// // two arguments: the id of the Timeline container (no '#')
// // and the JSON object or an instance of TL.TimelineConfig created from
// // a suitable JSON object
// //window.timeline = new TL.Timeline('timeline-embed', 'marktwain_test.json');
// }
});
}
}
function parseTextInput(text)
{
return text == "" ? null : text;
}
function parseArrayInput(list)
{
var values = [];
for (var i = 0; i < list.length; i++)
{
values.push(parseTextInput(list[i].value));
}
var string = "{\"" + values.toString() + "\"}";
return string;
}
function getParameterByName(name)

+ 41
- 3
display/toys.html View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="display.css">
</head>
<body>
<a href="./"> <img src="../img/jpp-logo2.png" alt="JPP Logo" style="margin-left:15%;" /></a>
<a href="../"> <img src="../img/jpp-logo2.png" alt="JPP Logo" style="margin-left:15%;" /></a>
<ul class="topnav">
<li><a href="../browse.html?category=people">People</a></li>
<li><a href="../browse.html?category=toys">Toys</a></li>
@ -20,8 +20,46 @@
<li><a href="../submitEntry.html">Submit</a></li>
</ul>
<div id ="mainContainer">
<div id='infoContainer'>
</div>
<div id='displayContainer'>
<div id='infoContainer'>
</div>
<button id='editPage' onclick='editPage()'>Edit</button>
</div>
<div id='editContainer' style="display:none;">
<h1>Edit</h1>
<p><label>Name: <span class="required">*</span>
<input id="eName" type="textbox"></input>
</label>
<p><label>Year:
<input id="eYear" type="textbox"></input>
</label>
<p><label>Companies:
<div id='eCompanies'><div id='eCompaniesWrapper'><div id='eCompaniesContainer_0' index=0><input type='eext' class='eCompanies' id='eCompanies_0' index=0></input><br /></div></div><button id='eCompaniesAddRow' class="addRowButton">+</button></div>
</label>
<p><label>People:
<div id='ePeople'><div id='ePeopleWrapper'><div id='ePeopleContainer_0' index=0><input type='eext' class='ePeople' id='ePeople_0' index=0></input><br /></div></div><button id='ePeopleAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Picture:
<input id="ePicture" type="textbox"></input>
</label>
<p><label>Sources:
<div id='eSources'><div id='eSourcesWrapper'><div id='eSourcesContainer_0' index=0><input type='eext' class='eSources' id='eSources_0' index=0></input><br /></div></div><button id='eSourcesAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Source Titles:
<div id='eSourceTitles'><div id='eSourceTitlesWrapper'><div id='eSourceTitlesContainer_0' index=0><input type='eext' class='eSourceTitles' id='eSourceTitles_0' index=0></input><br /></div></div><button id='eSourceTitlesAddRow' class="addRowButton">+</button></div>
</label>
<p><label>Description:
<input id="eDescription" type="textbox"></input>
</label>
<p><label id="typesDropdown">Type:
</label>
<p><label>Live:
<input id="eLive" type="checkbox"></input>
</label>
<br><br>
<button id='cancelEdit' onclick="cancelEdit()">Cancel</button>
<button id='submitEdit' onclick="submitEdit()">Submit</button>
</div>
</div>
</body>
</html>

+ 218
- 1
display/toys.js View File

@ -1,5 +1,7 @@
window.onload = main;
var g_data;
function main()
{
var name = getParameterByName("name");
@ -13,7 +15,25 @@ function main()
success: function(data) {
console.log('success');
console.log(data);
//g_data = data;
g_data = data;
$.ajax({
url: 'http://localhost:3000/toytypes',
success: function(data) {
console.log('success');
console.log(data);
setupToyTypesDropdown(data);
},
error: function(data) {
console.log('error');
console.log(data);
// two arguments: the id of the Timeline container (no '#')
// and the JSON object or an instance of TL.TimelineConfig created from
// a suitable JSON object
//window.timeline = new TL.Timeline('timeline-embed', 'marktwain_test.json');
}
});
setupPage(data);
},
@ -96,6 +116,203 @@ function setupPage(data)
htmlString += "<br/><br/><br/></div>"
document.getElementById("infoContainer").innerHTML = htmlString;
document.getElementById("eName").value = (data.Name == null ? "" : data.Name.replace(/'/g, "&#39;"));
document.getElementById("eYear").value = (data.Year == null ? "" : data.Year.replace(/'/g, "&#39;"));
setupArrayInput("eCompanies", data.Companies);
setupArrayInput("ePeople", data.People);
document.getElementById("ePicture").value = (data.Picture == null ? "" : data.Picture.replace(/'/g, "&#39;"));
setupArrayInput("eSources", data.Sources);
setupArrayInput("eSourceTitles", data.SourceTitles);
document.getElementById("eDescription").value = (data.Description == null ? "" : data.Description.replace(/'/g, "&#39;"));
document.getElementById("eLive").checked = data.Live;
var addRowButtons = document.getElementsByClassName("addRowButton");
for(var i = 0; i < addRowButtons.length; i++)
{
addRowButtons[i].onclick = function(e)
{
console.log(e);
var parentID = e.target.parentElement.id;
var wrapper = document.getElementById(parentID + "Wrapper");
var nextIndex = parseInt(wrapper.lastChild.getAttribute("index")) + 1;
var container = document.createElement("div");
container.id = parentID + "Container_" + nextIndex;
container.setAttribute("index", nextIndex);
container.innerHTML = "<input type='text' class='" + parentID + "' id='" + parentID + "_" + nextIndex + "' index=" + nextIndex + "></input><button id='" + parentID + "DeleteRow_" + nextIndex + "' index=" + nextIndex + " style='color:#e7f6ff; background-color:#228dff; text-align:center; font-size:16px; box-shadow:1px 1px 10px rgba(0,0,0,.25); border: none; padding: 7px 12px; border-radius: 5px; margin-left:15px; margin-bottom: 5px;' >-</button><br />";
wrapper.appendChild(container);
if(parentID.includes("Sources") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourceTitlesAddRow");
button.onclick({target:button, repeated:true});
}
if(parentID.includes("SourceTitles") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourcesAddRow");
button.onclick({target:button, repeated:true});
}
document.getElementById(parentID + "DeleteRow_" + nextIndex).onclick = function(e)
{
wrapper.removeChild(document.getElementById(parentID + "Container_" + nextIndex));
if(parentID.includes("Sources") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourceTitlesDeleteRow_" + nextIndex);
button.onclick({target:button, repeated:true});
}
if(parentID.includes("SourceTitles") && !e.repeated)
{
var button = document.getElementById(parentID.substr(0,1) + "SourcesDeleteRow_" + nextIndex);
button.onclick({target:button, repeated:true});
}
};
}
}
}
function setupArrayInput(id, array)
{
var element = document.getElementById(id);
var wrapper = document.getElementById(id + "Wrapper");
if(array.length > 0)
{
document.getElementById(id + "_0").value = (array[0] == null ? "" : array[0].replace(/'/g, "&#39;"));
}
for(var i = 1; i < array.length; i++)
{
var container = document.createElement("div");
container.id = id + "Container_" + i;
container.setAttribute("index", i);
container.innerHTML = "<input type='text' class='" + id + "' id='" + id + "_" + i + "' index=" + i + " value='" + (array[i] == null ? "" : array[i].replace(/'/g, "&#39;")) + "'></input><button id='" + id + "DeleteRow_" + i + "' index=" + i + " style='color:#e7f6ff; background-color:#228dff; text-align:center; font-size:16px; box-shadow:1px 1px 10px rgba(0,0,0,.25); border: none; padding: 7px 12px; border-radius: 5px; margin-left:15px; margin-bottom: 5px;' >-</button><br />";
wrapper.appendChild(container);
(function(i, id) {
document.getElementById(id + "DeleteRow_" + i).onclick = function(e)
{
wrapper.removeChild(document.getElementById(id + "Container_" + i));
if(id.includes("Sources") && !e.repeated)
{
var button = document.getElementById(id.substr(0,1) + "SourceTitlesDeleteRow_" + i);
button.onclick({target:button, repeated:true});
}
if(id.includes("SourceTitles") && !e.repeated)
{
var button = document.getElementById(id.substr(0,1) + "SourcesDeleteRow_" + i);
button.onclick({target:button, repeated:true});
}
};
})(i, id);
}
}
function editPage()
{
document.getElementById("displayContainer").style.display = "none";
document.getElementById("editContainer").style.display = "block";
}
function cancelEdit()
{
document.getElementById("displayContainer").style.display = "block";
document.getElementById("editContainer").style.display = "none";
}
function submitEdit()
{
var data = {};
data.Name = parseTextInput(document.getElementById("eName").value);
data.Year = parseTextInput(document.getElementById("eYear").value);
data.Companies = parseArrayInput(document.getElementsByClassName("eCompanies"));
data.People = parseArrayInput(document.getElementsByClassName("ePeople"));
data.Description = parseTextInput(document.getElementById("eDescription").value);
data.Picture = parseTextInput(document.getElementById("ePicture").value);
data.Sources = parseArrayInput(document.getElementsByClassName("eSources"));
data.SourceTitles = parseArrayInput(document.getElementsByClassName("eSourceTitles"));
data.Type = parseTextInput(document.getElementById("eType").value);
data.Live = document.getElementById("eLive").checked;
data.OrigName = g_data.Name;
console.log(document.getElementById("eType").value);
if(data.Name == null)
{
alert("Name can't be null");
}
else
{
$.ajax({
type: "POST",
url: 'http://localhost:3000/edittoys',
data: {data:JSON.stringify(data)},
success: function(data) {
console.log('success');
console.log(data);
location.href = "./toys?name=" + data.Name;
}//,
// error: function(data) {
// console.log('error');
// console.log(data);
// // two arguments: the id of the Timeline container (no '#')
// // and the JSON object or an instance of TL.TimelineConfig created from
// // a suitable JSON object
// //window.timeline = new TL.Timeline('timeline-embed', 'marktwain_test.json');
// }
});
}
}
function setupToyTypesDropdown(toyTypes)
{
console.log(toyTypes);
var dropdown = "Type:<select id='eType'>";
dropdown += "<option value=''>Select Type</option>";
for(var i = 0; i < toyTypes.length; i++)
{
dropdown += "<optgroup label='" + toyTypes[i].Name + "'>";
for(var j = 0; j < toyTypes[i].SubTypes.length; j++)
{
dropdown += "<option value='" + toyTypes[i].SubTypes[j] + "'>" + toyTypes[i].SubTypes[j] + "</option>";
}
dropdown += "</optgroup>";
}
dropdown += "</select>";
document.getElementById("typesDropdown").innerHTML = dropdown;
if(g_data.Type != null)
{
var options = document.getElementById("eType").options;
for(var j = 0; j < options.length; j++)
{
if(g_data.Type == options[j].innerHTML)
{
document.getElementById("eType").selectedIndex = j;
break;
}
}
}
}
function parseTextInput(text)
{
return text == "" ? null : text;
}
function parseArrayInput(list)
{
var values = [];
for (var i = 0; i < list.length; i++)
{
values.push(parseTextInput(list[i].value));
}
var string = "{\"" + values.toString() + "\"}";
return string;
}
function getParameterByName(name) {

+ 3
- 6
index.html View File

@ -54,15 +54,12 @@
<h3>Search The Database</h3>
<p><h4>People</h4></p>
<p><label>First Name:
<input id="firstName" type="text" >
</label></p>
<p><label>Last Name:
<input id="lastName" type="text" >
<p><label>Name:
<input id="personName" type="text" >
</label></p>
<p><h4>Toys</h4></p>
<p><label>Type:
<p><label>Name:
<input id="toyName" type="text" >
</label></p>

+ 5
- 6
index.js View File

@ -4,25 +4,24 @@ function main()
{
document.getElementById("searchButton").onclick = function()
{
var pFristName = document.getElementById("firstName").value;
var pLastName = document.getElementById("lastName").value;
var pName = document.getElementById("personName").value;
var tName = document.getElementById("toyName").value;
var cName = document.getElementById("companyName").value;
if(pFristName != "" || pLastName != "")
if(pName != "")
{
console.log("person");
window.location.href = "./display/people?firstName=" + pFristName + "&lastName=" + pLastName;
window.location.href = "./browse?category=people&name=" + pName;
}
else if (tName != "")
{
console.log("toy");
window.location.href = "./display/toys?name=" + tName;
window.location.href = "./browse?category=toys&name=" + tName;
}
else if (cName != "")
{
console.log("company");
window.location.href = "./display/companies?name=" + cName;
window.location.href = "./browse?category=companies&name=" + cName;
}
else
{

+ 36
- 9
server.js View File

@ -395,7 +395,17 @@ app.get('/browsepeople', function(req, res){
var queries = JSON.parse(req.query.data);
if(queries.name && queries.name != "")
{
var query = "SELECT * FROM \"People\" WHERE \"People\".\"FirstName\" || ' ' || \"People\".\"MiddleName\" || ' ' || \"People\".\"LastName\" ~* '.*" + queries.name + ".*' AND \"People\".\"Live\" = True";
//var query = "SELECT * FROM \"People\" WHERE \"People\".\"FirstName\" || ' ' || \"People\".\"MiddleName\" || ' ' || \"People\".\"LastName\" ~* '.*" + queries.name + ".*' AND \"People\".\"Live\" = True";
var nameArray = queries.name.split(" ");
var query = "SELECT * FROM \"People\" WHERE "
for (var i = 0; i < nameArray.length; i++)
{
query += "(\"People\".\"FirstName\" || ' ' || \"People\".\"MiddleName\" || ' ' || \"People\".\"LastName\" ~* '.*" + nameArray[i] + ".*' OR \"People\".\"FirstName\" || ' ' || \"People\".\"LastName\" ~* '.*" + nameArray[i] + ".*') AND ";
}
query += "\"People\".\"Live\" = True";
console.log(query);
@ -473,7 +483,6 @@ app.get('/browsepeople', function(req, res){
//returns all rows that fit user inputted queries
app.get('/searchpeople', function(req, res){
var queries = JSON.parse(req.query.data);
console.log(queries);
@ -622,7 +631,7 @@ app.post('/editpeople', function(req, res){
else
{
updateJSON();
res.send("people row edited!");
res.send({FirstName:row.FirstName, LastName:row.LastName});
console.log('people row edited');
}
}
@ -722,7 +731,16 @@ app.get('/browsetoys', function(req, res){
//name exists, display all toys that match the query
if(queries.name && queries.name != "")
{
var query = "SELECT * FROM \"Toys\" WHERE \"Toys\".\"Name\" ~* '.*" + queries.name + ".*' AND \"Toys\".\"Live\" = True";
var nameArray = queries.name.split(" ");
var query = "SELECT * FROM \"Toys\" WHERE ";
for (var i = 0; i < nameArray.length; i++)
{
query += "\"Toys\".\"Name\" ~* '.*" + nameArray[i] + ".*' AND ";
}
query += "\"Toys\".\"Live\" = True";
results = [];
var pquery = client.query(query);
@ -1058,8 +1076,7 @@ app.post('/edittoys', function(req, res){
else
{
updateJSON();
res.send("toys row edited!");
console.log('toys row edited');
res.send({Name:row.Name});
}
}
);
@ -1122,7 +1139,18 @@ app.get('/browsecompanies', function(req, res){
var queries = JSON.parse(req.query.data);
if(queries.name && queries.name != "")
{
var query = "SELECT * FROM \"Companies\" WHERE \"Companies\".\"Name\" ~* '.*" + queries.name + ".*' AND \"Companies\".\"Live\" = True";
var nameArray = queries.name.split(" ");
var query = "SELECT * FROM \"Companies\" WHERE ";
for (var i = 0; i < nameArray.length; i++)
{
query += "\"Companies\".\"Name\" ~* '.*" + nameArray[i] + ".*' AND ";
}
query += "\"Companies\".\"Live\" = True";
console.log(query);
results = [];
var pquery = client.query(query);
@ -1345,8 +1373,7 @@ app.post('/editcompanies', function(req, res){
else
{
updateJSON();
res.send("companies row edited!");
console.log('companies row edited');
res.send({Name:row.Name});
}
}
);

+ 1
- 15
submitEntry.js View File

@ -20,6 +20,7 @@ function main()
container.id = parentID + "Container_" + nextIndex;
container.setAttribute("index", nextIndex);
container.innerHTML = "<input type='text' class='" + parentID + "' id='" + parentID + "_" + nextIndex + "' index=" + nextIndex + "></input><button id='" + parentID + "DeleteRow_" + nextIndex + "' index=" + nextIndex + " style='color:#e7f6ff; background-color:#228dff; text-align:center; font-size:16px; box-shadow:1px 1px 10px rgba(0,0,0,.25); border: none; padding: 7px 12px; border-radius: 5px; margin-left:15px; margin-bottom: 5px;' >-</button><br />";
wrapper.appendChild(container);
if(parentID.includes("Sources") && !e.repeated)
{
@ -31,7 +32,6 @@ function main()
var button = document.getElementById(parentID.substr(0,1) + "SourcesAddRow");
button.onclick({target:button, repeated:true});
}
wrapper.appendChild(container);
document.getElementById(parentID + "DeleteRow_" + nextIndex).onclick = function(e)
{
wrapper.removeChild(document.getElementById(parentID + "Container_" + nextIndex));
@ -62,14 +62,6 @@ function main()
error: function(data) {
console.log('error');
console.log(data);
var mockData = [
{Name:"One", SubTypes:["Alpha", "Bravo"]},
{Name:"Two", SubTypes:["Charlie", "Delta"]},
{Name:"Three", SubTypes:["Echo", "Foxtrot", "Golf"]},
];
setupToyTypesDropdown(mockData);
// two arguments: the id of the Timeline container (no '#')
// and the JSON object or an instance of TL.TimelineConfig created from
// a suitable JSON object
@ -152,8 +144,6 @@ function submit()
// }
});
}
console.log(data);
}
else if(type == 'companies')
{
@ -198,8 +188,6 @@ function submit()
// }
});
}
console.log(data);
}
else if(type == 'toys')
{
@ -241,8 +229,6 @@ function submit()
// }
});
}
console.log(data);
}
}

Loading…
Cancel
Save