init

2021-04-28 14:46:12 +02:00 · 2021-04-28 14:46:12 +02:00 · 39591b003a
commit 39591b003a
parent e107126b59
6 changed files with 552 additions and 0 deletions
--- a/css/style.css
+++ 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;
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,43 @@
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+
+    <title>The HTML5 Herald</title>
+    <meta name="description" content="The HTML5 Herald">
+    <meta name="author" content="SitePoint">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
+
+
+</head>
+
+<body class="bg-light">
+
+    <div class="container">
+
+        <div style="margin-top: 200px;">
+            <img style="margin: 25px;" src="logo.png" class="rounded mx-auto d-block" alt="logo">
+            <form action="search.html">
+                <div style="max-width: 60%;" class="input-group mb-3 mx-auto">
+
+                    <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
+                    <input id="search" type="text" class="form-control" placeholder="Wyszukaj film..."
+                        aria-describedby="basic-addon1" name="search">
+
+                </div>
+            </form>
+        </div>
+    </div>
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
+        crossorigin="anonymous"></script>
+    <!-- <script>src = "js/script.js"</script> -->
+</body>
+
+</html>
--- a/js/script.js
+++ 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 = '<div>'
+        ratingValue = ratingValue / 2
+        for (let i = 0; i < 5; i++) {
+            let rating = ratingValue - i
+            if (rating < 0) {
+                html += '<i class="bi bi-star"></i>'
+            }
+            else if (rating < 0.5) {
+                html += '<i class="bi bi-star-half"></i>'
+            }
+            else {
+                html += '<i class="bi bi-star-fill"></i>'
+            }
+        }
+        html = html + '</div>'
+        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 += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                    }
+                    else {
+                        html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                    }
+                }
+                html += '<li class="page-item disabled"><a class="page-link" >...</a></li>'
+                for (let i = queryParams.selectedPage - 2; i < queryParams.selectedPage + 1; i++) {
+                    if (i + 1 == queryParams.selectedPage) {
+                        html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                    }
+                    else {
+                        html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                    }
+                }
+                html += '<li class="page-item disabled"><a class="page-link" >...</a></li>'
+                for (let i = pgNum - 3; i < pgNum; i++) {
+                    if (i + 1 == queryParams.selectedPage) {
+                        html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                    }
+                    else {
+                        html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                    }
+                }
+            }
+            else {
+                for (let i = 0; i < 4; i++) {
+                    if (i + 1 == queryParams.selectedPage) {
+                        html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                    }
+                    else {
+                        html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                    }
+                }
+                html += '<li class="page-item disabled"><a class="page-link" >...</a></li>'
+                for (let i = pgNum - 4; i < pgNum; i++) {
+                    if (i + 1 == queryParams.selectedPage) {
+                        html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                    }
+                    else {
+                        html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                    }
+                }
+            }
+        }
+        if (pgNum > 0 && pgNum < 10) {
+            for (let i = 0; i < pgNum; i++) {
+                if (i + 1 == queryParams.selectedPage) {
+                    html += '<li class="page-item active"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                }
+                else {
+                    html += '<li class="page-item"><a class="page-link" >' + (i + 1).toString() + '</a></li>'
+                }
+            }
+        }
+
+        paginationEl.html(html)
+    }
+
+    function fillEntries(json) {
+
+        const responseObject = JSON.parse(json);
+
+        //var template = document.getElementById("entry-template");
+
+        let template = $('<div>' + $('#entry-template').html() + '</div>')
+
+        //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('<hr>')
+                }
+                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 += "<div>" + element + "</div>"
+                })
+                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 = '<div><span class="genres-cat">' + facets[i] + ': </span><span class="genres-val">' + facets[i + 1].toString() + '</span></div>'
+                categories.append(el)
+            }
+        }
+
+        let filters = $('#filters')
+        filters.empty()
+        queryParams.genres.forEach(element => {
+            el = '<div><span class="genres-filter">' + element + '</span></div>'
+            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 += '<hr>'
+//         }
+//         let a = template.getElementsByClassName('primary-title')
+//         a[0].innerHTML=element.primaryTitle[0]
+//         entries.innerHTML += template.innerHTML
+//         first = false
+//     });
+
+
+
+// }
--- a/logo.png
+++ b/logo.png
--- a/logo2.png
+++ b/logo2.png
--- a/search.html
+++ b/search.html
@ -0,0 +1,145 @@
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+
+    <title>The HTML5 Herald</title>
+    <meta name="description" content="The HTML5 Herald">
+    <meta name="author" content="SitePoint">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="css/style.css">
+
+</head>
+
+<body style="background-color: #f0f0f1;">
+
+    <nav class="navbar fixed-top navbar-light bg-light shadow">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#"><img style="max-height: 40px;" src="logo2.png"
+                    class="rounded mx-auto d-block" alt="logo"></a>
+            <div style="max-width: 40%; margin-right: auto;" class="input-group">
+                <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
+                <input id="search-title" type="text" class="form-control" placeholder="Wyszukaj film..." aria-describedby="basic-addon1">
+            </div>
+        </div>
+    </nav>
+    <div style="margin-top: 200px;" class="container">
+
+        <div class="row">
+            <div class="col-3"></div>
+            <div class="col-9">
+                <div class="number-of-entries">
+                    <span>Znaleziono: </span><span id="number-of-entries">22</span>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-3 p-2">
+                <div class="bg-white">
+
+                    <div class="p-3">
+                        <p class="categories">
+                            Kategorie:
+                        </p>
+                        <div id="categories">
+
+                        </div>
+                    </div>
+
+                    <hr>
+
+                    <div class="p-3">
+                        <p class="filters">
+                            Filtry:
+                        </p>
+                        <div id="filters">
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-9 p-2">
+                <div style="min-height: 300px;" id="entry-list" class="bg-white">
+                    
+                </div>
+                <ul class="pagination justify-content-center mt-4">
+                    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
+                    <li class="page-item"><a class="page-link" >1</a></li>
+                    <li class="page-item"><a class="page-link" href="#">2</a></li>
+                    <li class="page-item"><a class="page-link" href="#">3</a></li>
+                    <li class="page-item"><a class="page-link" href="#">Next</a></li>
+                  </ul>
+            </div>
+        </div>
+
+    </div>
+
+
+    <template id='entry-template'>
+        <div class="entry p-4">
+            <div class="row">
+                <div class="col-10">
+                    <div class="mb-4">
+                        <div class="primary-title">Tutuł główny</div>
+                        <div class="original-title">Tytuł oryginalny</div>
+                    </div>
+                </div>
+                <div class="col-2">
+                    <div class="rating-cat">
+                        Ocena:
+                    </div>
+                    <div class="rating-val">
+                        <i class="bi bi-star-fill"></i>
+                        <i class="bi bi-star-fill"></i>
+                        <i class="bi bi-star-fill"></i>
+                        <i class="bi bi-star-half"></i>
+                        <i class="bi bi-star"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-4">
+                    <div class="entry-cat">
+                        Rok premiery:
+                    </div>
+                    <div class="entry-val val-start-year">
+                        2020
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="entry-cat">
+                        Gatunki:
+                    </div>
+                    <div class="entry-val val-genres">
+                        <div>
+                            Drama
+                        </div>
+                        <div>
+                            Comdey
+                        </div>
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="entry-cat">
+                        Czas trwania:
+                    </div>
+                    <div class="entry-val">
+                        <span class='val-runtime-minutes'>120</span><span> min</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
+        crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="js/script.js"></script>
+</body>
+
+</html>