Skip to content

4 avoid duplicates #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
deradre wants to merge 8 commits into
base: master
Choose a base branch
from
Open

4 avoid duplicates #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
01e3bc6
avoid duplicates
deradre Sep 11, 2019
d553f44
move to movie
deradre Sep 14, 2019
d1cb84c
make the move to es6 modules
deradre Sep 18, 2019
fb5c791
add unit tests for avoiding duplicate movies
deradre Oct 31, 2019
6f27590
add Karma test runner to execute frontend js tests
deradre Oct 31, 2019
e7f3be2
fix broken search (merge mistake)
deradre Oct 31, 2019
9324faf
update cypress to have a newer chrome browser
deradre Oct 31, 2019
d373425
exit karma when tests are done
deradre Oct 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 0 additions & 160 deletions services/gui/app/views/public/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,165 +1,5 @@
//prepare modal to delete a title
function prepareDeleteModal(name, id) {
//set name of modal
$("#deleteModalName").text(name);
//set action to id of title
$("#deleteModalForm").attr("action", "/title/" + id + "/?_method=DELETE");
//show delete modal
$("#deleteModal").modal("show");
}

//clicking the magnifier activates the search bar
function activateSearchBar() {
$("#searchNewTitle").focus();
}

//trigger fadeout of flash messages
window.onload = function() {
$("#successAlert").fadeOut(5000);
$("#errorAlert").fadeOut(5000);
};

//update a title as seen or unseen
function toggleSeenStatus(id, name, seen) {
let form = document.createElement("form");
form.action = "/title/" + id + "/?_method=PUT";
form.method = "POST";
if (seen) {
form.innerHTML =
'<input name="title[seen]" value="true"> <input name="title[seenOn]" value="' +
Date.now() +
'">';
} else {
form.innerHTML = '<input name="title[seen]" value="false">';
}

//the form must be in the document to submit it, but should be invisible
form.hidden = true;
document.body.append(form);

form.submit();
}

//suggestions from IMDB (via omdb api) for adding a new title
//needs to be globally available
var omdbRequest = null;
function suggestTitle() {
var searchString = $("#searchNewTitle").val();
if (searchString.length > 2) {
//ask omdb to find a title based on the input provided
omdbRequest = jQuery.ajax({
type: "GET",
url: `https://www.omdbapi.com/?s=${searchString}&apikey=b50af808`,
beforeSend: function() {
//if there is an unfinished request to omdb, abort it, to avoid overlapping responses
if (omdbRequest != null) {
omdbRequest.abort();
}
},
success: function(response) {
if (response.Response === "True" && response.Search.length > 0) {
const results = $("#results");
//clear suggestion list
results.html("");
for (let suggestion of response.Search) {
//some titles have no cover and some covers are hosted at imdb, seems like they don't allow external usage of those, we replace those with a default one
if (
suggestion.Poster === "N/A" ||
suggestion.Poster.includes("media-imdb.com") ||
suggestion.Poster.includes("images-na")
) {
suggestion.Poster = "/nocover.png";
}
//build string for suggestion
let suggestionHtml = `
<div class="suggestion flex-parent">
<div class="flex-child short-and-fixed my-auto d-flex">
<i class="fas fa-plus-circle addSuggestionButton my-auto ml-2"></i>
<img loading="lazy" class="ml-2 my-auto" src="${suggestion.Poster}" width="33px" height="50px">
</div>
<div class="flex-child long-and-truncated-with-child my-auto ml-2">
<h4 class="my-1">${suggestion.Title}</h4>
<p class="text-muted my-1">(${suggestion.Year})</p>
</div>
</div>
`;
results.append(suggestionHtml);
results
.children()
.last()
.click(() =>
addTitle(
suggestion.Title,
suggestion.imdbID,
suggestion.Year,
suggestion.Poster
)
);
}
results.show();
}
},
error: function(err, errText) {
//aborting a request also calls the error function - crazy people
if (errText != "abort") {
console.log(`ERR: oMDB failed us, here is the reason: ${errText}`);
$("#results").html(
"<p style='padding:5px;'> 😰ooops we can't get results from iMDB, please notify us!</p>"
);
$("#results").show();
}
}
});
} else {
$("#results").hide(0);
}
}

//add a new title
function addTitle(name, imdbID, year, poster, genres) {
let form = document.createElement("form");
form.action = "/title";
form.method = "POST";

var ratingRequest = new XMLHttpRequest();
ratingRequest.onreadystatechange = function() {
if (ratingRequest.readyState == 4 && ratingRequest.status == 200) {
let genreArray = JSON.parse(ratingRequest.responseText).Genre.split(",");
let genreInput = "";
for (let i = 0; i < genreArray.length; i++) {
genreInput += `<input name="title[genres][${i}]" value="${genreArray[i]}"></input>`;
}

form.innerHTML = `
<input name="title[name]" value="${name}">
<input name="title[tomatoURL]" value="${
JSON.parse(ratingRequest.responseText).tomatoURL
}">
<input name="title[imdbRating]" value="${
JSON.parse(ratingRequest.responseText).imdbRating
}">
<input name="title[imdbID]" value="${imdbID}">
<input name="title[year]" value="${year}">
<input name="title[poster]" value="${poster}">
${genreInput}
`;
//the form must be in the document to submit it, but should be invisible
form.hidden = true;
document.body.append(form);
form.submit();
}
};

ratingRequest.open(
"GET",
"https://www.omdbapi.com/?i=" + imdbID + "&apikey=b50af808&tomatoes=true"
);
ratingRequest.send();
}

//hide suggestions when search field loses focus
function hideSuggestions() {
setTimeout(function() {
$("#results").hide(0);
}, 200);
}
15 changes: 15 additions & 0 deletions services/gui/app/views/public/moveez.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {
prepareDeleteModal,
activateSearchBar,
toggleSeenStatus,
suggestTitle,
hideSuggestions
} from "/title.js";

export const moveez = (window.moveez = {
prepareDeleteModal,
activateSearchBar,
toggleSeenStatus,
suggestTitle,
hideSuggestions
});
181 changes: 181 additions & 0 deletions services/gui/app/views/public/title.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
//prepare modal to delete a title
export function prepareDeleteModal(name, id) {
//set name of modal
$("#deleteModalName").text(name);
//set action to id of title
$("#deleteModalForm").attr("action", "/title/" + id + "/?_method=DELETE");
//show delete modal
$("#deleteModal").modal("show");
}

//clicking the magnifier activates the search bar
export function activateSearchBar() {
$("#searchNewTitle").focus();
}

//update a title as seen or unseen
export function toggleSeenStatus(id, name, seen) {
let form = document.createElement("form");
form.action = "/title/" + id + "/?_method=PUT";
form.method = "POST";
if (seen) {
form.innerHTML =
'<input name="title[seen]" value="true"> <input name="title[seenOn]" value="' +
Date.now() +
'">';
} else {
form.innerHTML = '<input name="title[seen]" value="false">';
}

//the form must be in the document to submit it, but should be invisible
form.hidden = true;
document.body.append(form);

form.submit();
}

//suggestions from IMDB (via omdb api) for adding a new title
//needs to be globally available
var omdbRequest = null;
export function suggestTitle() {
var searchString = $("#searchNewTitle").val();
if (searchString.length > 2) {
//ask omdb to find a title based on the input provided
omdbRequest = jQuery.ajax({
type: "GET",
url: `https://www.omdbapi.com/?s=${searchString}&apikey=b50af808`,
beforeSend: function() {
//if there is an unfinished request to omdb, abort it, to avoid overlapping responses
if (omdbRequest != null) {
omdbRequest.abort();
}
},
success: function(response) {
if (response.Response === "True" && response.Search.length > 0) {
const results = $("#results");
//clear suggestion list
results.html("");
for (let suggestion of response.Search) {
//some titles have no cover and some covers are hosted at imdb, seems like they don't allow external usage of those, we replace those with a default one
if (
suggestion.Poster === "N/A" ||
suggestion.Poster.includes("media-imdb.com") ||
suggestion.Poster.includes("images-na")
) {
suggestion.Poster = "/nocover.png";
}
//build string for suggestion
let suggestionHtml = renderSuggestion(suggestion);
results.append(suggestionHtml);
results
.children()
.last()
.click(() => onSuggestionSelected(suggestion));
}
results.show();
}
},
error: function(err, errText) {
//aborting a request also calls the error function - crazy people
if (errText != "abort") {
console.log(`ERR: oMDB failed us, here is the reason: ${errText}`);
$("#results").html(
"<p style='padding:5px;'> 😰ooops we can't get results from iMDB, please notify us!</p>"
);
$("#results").show();
}
}
});
} else {
$("#results").hide(0);
}
}

const renderSuggestion = suggestion => {
const bIsInWatchlist = isInWatchList(suggestion);
return `
<div class="suggestion flex-parent">
<div class="flex-child short-and-fixed my-auto d-flex">
<a ${
bIsInWatchlist ? `href='#watch-list-item-${suggestion.imdbID}'` : ""
} class=" my-auto ml-2">
<i class="fas ${
bIsInWatchlist
? "fa-arrow-alt-circle-down text-secondary"
: "fa-plus-circle"
} addSuggestionButton"></i>
</a>
<img loading="lazy" class="ml-2 my-auto" src="${
suggestion.Poster
}" width="33px" height="50px">
</div>
<div class="flex-child long-and-truncated-with-child my-auto ml-2">
<h4 class="my-1">${suggestion.Title}</h4>
<p class="text-muted my-1">(${suggestion.Year})</p>
</div>
</div>
`;
};

const onSuggestionSelected = suggestion => {
if (!isInWatchList(suggestion)) {
addTitle(
suggestion.Title,
suggestion.imdbID,
suggestion.Year,
suggestion.Poster
);
}
};

export const isInWatchList = suggestion =>
moveez.titles.some(title => title.imdbID === suggestion.imdbID);

//add a new title
export function addTitle(name, imdbID, year, poster, genres) {
let form = document.createElement("form");
form.action = "/title";
form.method = "POST";

var ratingRequest = new XMLHttpRequest();
ratingRequest.onreadystatechange = function() {
if (ratingRequest.readyState == 4 && ratingRequest.status == 200) {
let genreArray = JSON.parse(ratingRequest.responseText).Genre.split(",");
let genreInput = "";
for (let i = 0; i < genreArray.length; i++) {
genreInput += `<input name="title[genres][${i}]" value="${genreArray[i]}"></input>`;
}

form.innerHTML = `
<input name="title[name]" value="${name}">
<input name="title[tomatoURL]" value="${
JSON.parse(ratingRequest.responseText).tomatoURL
}">
<input name="title[imdbRating]" value="${
JSON.parse(ratingRequest.responseText).imdbRating
}">
<input name="title[imdbID]" value="${imdbID}">
<input name="title[year]" value="${year}">
<input name="title[poster]" value="${poster}">
${genreInput}
`;
//the form must be in the document to submit it, but should be invisible
form.hidden = true;
document.body.append(form);
form.submit();
}
};

ratingRequest.open(
"GET",
"https://www.omdbapi.com/?i=" + imdbID + "&apikey=b50af808&tomatoes=true"
);
ratingRequest.send();
}

//hide suggestions when search field loses focus
export function hideSuggestions() {
setTimeout(function() {
$("#results").hide(0);
}, 200);
}
Loading