diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..d96e45e --- /dev/null +++ b/css/style.css @@ -0,0 +1,62 @@ + +.categories { + font-size: 1.7rem; + font-weight: bold; +} + +.filters { + font-size: 1.7rem; + font-weight: bold; +} + +.number-of-entries { + font-size: 1.7rem; + font-weight: bold; +} + +hr{ + margin-left: 10px; + margin-right: 10px; + border: 0; + height: 1px; + background: #333; + background-image: linear-gradient(to right, #ccc, rgb(114, 114, 114), #ccc); +} + +.primary-title { + font-size: 1.5rem; + font-weight: bold; +} + +.original-title { + color: rgb(161, 159, 159); + font-size: 0.8rem; +} + +.rating-cat { + font-size: 1.2rem; + font-weight: bold; +} + +.entry-cat { + font-size: 1.1rem; + font-weight: bold; +} + +.entry-val { + font-size: 1rem; +} + +.genres-cat { + font-weight: bold; + cursor: pointer; +} + +.genres-filter { + font-weight: bold; + cursor: pointer; +} + +em { + text-decoration: underline; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..7fde12a --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + The HTML5 Herald + + + + + + + + + + + +
+ +
+ logo +
+
+ + + + +
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..d94824d --- /dev/null +++ b/js/script.js @@ -0,0 +1,302 @@ +$(function () { + + var currentUrl = window.location; + let searchParams = new URLSearchParams(currentUrl.search); + let paramSearch = searchParams.get('search') + + queryUrl = 'http://localhost:8983/solr/imdb/select?facet.field=genres&facet=on&hl.fl=primaryTitle&hl=on&' + + // if (paramSearch === '') { + // httpGet(queryUrl + "q=*:*") + // } + // else { + // httpGet(queryUrl + "q=primaryTitle:\"" + paramSearch.replace('+', ' ') + "\"") + // } + + var queryParams = {} + queryParams.primaryTitle = paramSearch + queryParams.rows = 50 + queryParams.start = 0 + queryParams.selectedPage = 1 + queryParams.genres = new Set() + + $('#search-title').keypress(function (e) { + if (e.which === 13) { + queryParams.primaryTitle = $('#search-title').val() + queryParams.selectedPage = 1 + refresh() + } + }); + + $('body').on('click', '.genres-cat', function () { + queryParams.genres.add($(this).text().replace(': ', '')) + queryParams.selectedPage = 1 + refresh() + }); + + $('body').on('click', '.genres-filter', function () { + queryParams.genres.delete($(this).text()) + queryParams.selectedPage = 1 + refresh() + }); + + $('body').on('click', '.page-item', function () { + el = $(this) + if (!el.hasClass('active') && !el.hasClass('disabled')) { + queryParams.selectedPage = parseInt(el.find('a').text()) + refresh() + } + }); + + refresh() + + function refresh() { + getUrl = queryUrl + if (queryParams.primaryTitle && queryParams.primaryTitle !== '') { + getUrl += 'q=(primaryTitle:' + queryParams.primaryTitle + ')' + $('#search-title').val(queryParams.primaryTitle) + } + else { + getUrl += 'q=primaryTitle:' + '*' + $('#search-title').val('') + } + + if (queryParams.genres.size > 0) { + queryParams.genres.forEach(element => { + getUrl += ' AND genres:' + element + }) + } + + startEl = (queryParams.selectedPage -1) * queryParams.rows + + getUrl += '&rows=' + queryParams.rows + getUrl += '&start=' + startEl + + httpGet(getUrl) + } + + function httpGet(url) { + let xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + fillEntries(xhttp.responseText) + } + }; + xhttp.open("GET", url, true); + xhttp.setRequestHeader("Content-type", "application/json"); + xhttp.send(); + } + + function getStarRating(ratingValue) { + let html = '
' + ratingValue = ratingValue / 2 + for (let i = 0; i < 5; i++) { + let rating = ratingValue - i + if (rating < 0) { + html += '' + } + else if (rating < 0.5) { + html += '' + } + else { + html += '' + } + } + html = html + '
' + return html; + } + + function drawPagination(elNum) { + + pgNum = Math.ceil(1.0 * elNum / queryParams.rows) + + let paginationEl = $('.pagination') + paginationEl.empty() + + html = '' + if (pgNum > 9) { + if (queryParams.selectedPage > 3 && queryParams.selectedPage < pgNum - 2) { + for (let i = 0; i < 3; i++) { + if (i + 1 == queryParams.selectedPage) { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + else { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + } + html += '
  • ...
    • ' + for (let i = queryParams.selectedPage - 2; i < queryParams.selectedPage + 1; i++) { + if (i + 1 == queryParams.selectedPage) { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + else { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + } + html += '
  • ...
    • ' + for (let i = pgNum - 3; i < pgNum; i++) { + if (i + 1 == queryParams.selectedPage) { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + else { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + } + } + else { + for (let i = 0; i < 4; i++) { + if (i + 1 == queryParams.selectedPage) { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + else { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + } + html += '
  • ...
    • ' + for (let i = pgNum - 4; i < pgNum; i++) { + if (i + 1 == queryParams.selectedPage) { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + else { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + } + } + } + if (pgNum > 0 && pgNum < 10) { + for (let i = 0; i < pgNum; i++) { + if (i + 1 == queryParams.selectedPage) { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + else { + html += '
  • ' + (i + 1).toString() + '
    • ' + } + } + } + + paginationEl.html(html) + } + + function fillEntries(json) { + + const responseObject = JSON.parse(json); + + //var template = document.getElementById("entry-template"); + + let template = $('
    ' + $('#entry-template').html() + '
    ') + + //let entries = document.getElementById("entry-list") + let entries = $('#entry-list') + + entries.empty() + + entries.innerHTML = '' + + let first = true + + $('#number-of-entries').text(responseObject.response.numFound) + + + responseObject.response.docs.forEach(element => { + $.get('http://localhost:8983/solr/imdb_ratings/select?q=tconst:' + element.tconst[0], function (data) { + if (first == false) { + entries.append('
    ') + } + if (responseObject.highlighting[element.id].primaryTitle) { + template.find('.primary-title').html(responseObject.highlighting[element.id].primaryTitle[0]) + } + else { + template.find('.primary-title').text(element.primaryTitle[0]) + } + template.find('.original-title').text(element.originalTitle[0]) + if (data.response.numFound == 1) { + template.find('.rating-val').html(getStarRating(data.response.docs[0].averageRating)) + } + else { + template.find('.rating-val').empty() + } + template.find('.val-start-year').text(element.startYear) + template.find('.val-runtime-minutes').text(element.runtimeMinutes) + let genres = '' + element.genres.forEach(element => { + genres += "
    " + element + "
    " + }) + template.find('.val-genres')[0].innerHTML = genres + entries.append(template.html()) + first = false + }) + }); + + + let facets = responseObject.facet_counts.facet_fields.genres + + let categories = $('#categories') + categories.empty() + for (i = 0; i < facets.length; i += 2) { + if (facets[i + 1] > 0) { + el = '
    ' + facets[i] + ': ' + facets[i + 1].toString() + '
    ' + categories.append(el) + } + } + + let filters = $('#filters') + filters.empty() + queryParams.genres.forEach(element => { + el = '
    ' + element + '
    ' + filters.append(el) + }) + + drawPagination(responseObject.response.numFound) + } + + +}); + + + + + +// var currentUrl = window.location; +// let searchParams = new URLSearchParams(currentUrl.search); +// let paramSearch = searchParams.get('search') + +// httpGet("a") + +// function httpGet(url) { +// let xhttp = new XMLHttpRequest(); +// xhttp.onreadystatechange = function () { +// if (this.readyState == 4 && this.status == 200) { +// fillEntries(xhttp.responseText) +// } +// }; +// xhttp.open("GET", "http://localhost:8983/solr/imdb/select?q=*%3A*", true); +// xhttp.setRequestHeader("Content-type", "application/json"); +// xhttp.send(); +// } + +// function fillEntries(json) { +// let url = 'http://localhost:8983/solr/imdb/select'; + +// const responseObject = JSON.parse(json); + +// var template = document.getElementById("entry-template"); + +// let entries = document.getElementById("entry-list") + +// entries.innerHTML = '' + +// let first = true + +// responseObject.response.docs.forEach(element => { +// if (first == false) { +// entries.innerHTML += '
    ' +// } +// let a = template.getElementsByClassName('primary-title') +// a[0].innerHTML=element.primaryTitle[0] +// entries.innerHTML += template.innerHTML +// first = false +// }); + + + +// } \ No newline at end of file diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..a36459b Binary files /dev/null and b/logo.png differ diff --git a/logo2.png b/logo2.png new file mode 100644 index 0000000..70628cc Binary files /dev/null and b/logo2.png differ diff --git a/search.html b/search.html new file mode 100644 index 0000000..67e4041 --- /dev/null +++ b/search.html @@ -0,0 +1,145 @@ + + + + + + The HTML5 Herald + + + + + + + + + + + + +
    + +
    +
    +
    +
    + Znaleziono: 22 +
    +
    +
    +
    +
    +
    + +
    +

    + Kategorie: +

    +
    + +
    +
    + +
    + +
    +

    + Filtry: +

    +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    +
    + +
    + + + + + + + + + + + \ No newline at end of file