KevinMidboe/Node-Com-Handler
1
0
Fork 0
mirror of https://github.com/KevinMidboe/Node-Com-Handler.git synced 2025-10-29 09:40:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Done with most of the requests of movies and started most of the dyn loading of elements

Browse Source
This commit is contained in:
Kevin
2017-02-09 00:41:15 +01:00
parent e7f806655d
commit 9e64a2d53a
11 changed files with 194 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
html/css/style.css Normal file
View File

@@ -0,0 +1,45 @@
.onoffswitch {
position: relative; width: 85px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #FFFFFF; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 32px; padding: 0; line-height: 32px;
font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Movies";
padding-left: 9px;
background-color: #21D278; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "Shows";
padding-right: 9px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 23px; margin: 4.5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 49px;
border: 2px solid #FFFFFF; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

33
html/js/searchBar.js
View File

@@ -6,6 +6,25 @@ button.onclick = function () {
queryTMDB(text);
}
function clearSearchResults() {
var displayNode = document.getElementById("display");
while (displayNode.firstChild) {
displayNode.removeChild(displayNode.firstChild);
}
}
function toggle(button) {
toggleNode = document.getElementById("myonoffswitch");
console.log(toggleNode);
if(toggleNode.value=="movies"){
toggleNode.value="shows";}
else if(toggleNode.value=="shows"){
toggleNode.value="movies";}
}
function queryTMDB(query) {
var data = "{}";
@@ -14,6 +33,8 @@ function queryTMDB(query) {
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
clearSearchResults()
var display = document.getElementById("display");
var jsonObj = JSON.parse(this.responseText);
console.log(jsonObj.movies);
@@ -27,14 +48,19 @@ function queryTMDB(query) {
var poster_path = "http://image.tmdb.org/t/p/w500"+jsonObj.movies[key].poster_path;
else
var poster_path = "images/image_nf.svg";
var exists = jsonObj.movies[key].exists;
var node = document.createElement("li"); // Create a <li> node
var imageNode = document.createElement('img');
var textNode = document.createTextNode(title); // Create a text node
var buttonNode = document.createElement("span");
var button2Node = document.createElement("span");
buttonNode.innerHTML = '<button onclick="request('+ id +')">REQUEST</button>';
button2Node.innerHTML = '<button onclick="request('+ id +')">FORCE REQUEST</button>';
if (!exists) {
buttonNode.innerHTML = '<button onclick="request('+ id +')">REQUEST</button>';
}
else
button2Node.innerHTML = '<button onclick="request('+ id +')">FORCE REQUEST</button>';
imageNode.src = poster_path;
imageNode.style.width = "500px";
@@ -48,6 +74,9 @@ function queryTMDB(query) {
});
}
else {
console.log("404");
}
});
xhr.open("GET", "http://localhost:63590/api/v1/plex/request?query="+query);

10
html/searchDisplay.html
View File

@@ -2,10 +2,20 @@
<html>
<head>
<title>tmdb.org Search Displayer</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<input type='text' id='link_id'>
<input type='button' id='btnSearch' value='Search' onClick="search(this)"'>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" value="movies" onClick="toggle(this)" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<p id="display"></p>
</body>