Changeset 3c0f9a9 in Git for src/main/resources


Ignore:
Timestamp:
02/07/22 19:57:58 (3 years ago)
Author:
Petar Partaloski <ppartaloski@…>
Branches:
main
Children:
ad4243e, c02189f
Parents:
7f36551
Message:

Added genre liking, fixed counter, improved paging, improved searches

Location:
src/main/resources
Files:
1 added
5 edited

Legend:

Unmodified
Added
Removed

  • src/main/resources/static/css/shared.css

    r7f36551 r3c0f9a9  
    7070    text-align: center;
    7171}
     72
     73#paging-section{
     74    width: 100%;
     75    clear: both;
     76    margin-bottom: 30px;
     77}
     78
     79#inner-paging{
     80    width: fit-content;
     81    margin: auto;
     82
     83}
     84
     85#button-sub, #button-add{
     86    width: 100px;
     87}
     88
     89#pageInput{
     90    font-size: 100%;
     91    text-align: center;
     92    width: 175px;
     93    margin: auto;
     94}
     95
     96#button-submit-page{
     97    margin: auto;
     98    text-align: center;
     99    margin-top: 7px;
     100    display: none;
     101}
     102
     103.visibility{
     104    transition: 200ms;
     105    opacity: 0;
     106}

  • src/main/resources/static/js/sharedScript.js

    r7f36551 r3c0f9a9  
    44    var elements = $(".elements")
    55    var elementGrade;
     6
     7
     8    $("#button-add").on("click", function (){
     9        itemInput = $("#pageInput")
     10        itemInput.val(Number(itemInput.val()) + 1);
     11        $("#button-submit-page").click()
     12    })
     13
     14    $("#button-sub").on("click", function (){
     15        itemInput = $("#pageInput")
     16        if(Number(itemInput.val()) > 1){
     17            itemInput.val(Number(itemInput.val()) - 1);
     18            $("#button-submit-page").click()
     19        }
     20    })
     21
     22    $("#searchTitle").on("keyup", function() {
     23        var value = $(this).val().toLowerCase();
     24        console.log(value)
     25        $(".elements div a .title").filter(function() {
     26            console.log($(this).text())
     27            if($(this).text().toLowerCase().indexOf(value) <= -1)
     28                $(this).parent().parent().parent().addClass("visibility")
     29            else
     30                $(this).parent().parent().parent().removeClass("visibility")
     31        });
     32    });
     33
     34
    635
    736
    … …  
    3766
    3867
    39     $(".search-button-title").on("click",function (){
     68    /*$(".search-button-title").on("click",function (){
    4069        let filter = $("#searchTitle").val()
    4170        console.log(elements)
    … …  
    5079            }
    5180        }
    52 
    53     })
     81    })*/
    5482
    5583
    5684   $(".search-button").on("click",function () {
    5785        let filter = $("#searchGenre").val()
    58        console.log(elements)
    59 
    6086       for (let item of elements) {
    6187            let genre = $(item).find(".card-genre")
    … …  
    6490            for (let g of genre) {
    6591
    66                 if ($(g).text().toLowerCase() === filter.toLowerCase()) {
     92                if (( $(g).text().toLowerCase() === filter.toLowerCase() && !$(g).hasClass("visibility") && filter.trim().length != 0)) {
    6793                    visible = true
    68                     $(item).css("display","block")
     94                    $(item).removeClass("visibility")
    6995                    break;
    7096                }
    7197            }
    72             if (!visible)
    73                 $(item).css("display","none")
     98            if (!visible && filter.trim().length != 0)
     99                $(item).addClass("visibility")
     100            else
     101                $(item).removeClass("visibility")
     102
    74103        }
    75104    });
    … …  
    117146        let url = "api/movies/unlike/"+ $(this).attr("movie-id")+"?userId="+ $(this).attr("user-id")
    118147        ajaxCallLike(url,button,'unlike','Немате оставено допаѓање на филмот!')
     148    })
     149    $(document.body).on("click",".button-add-genre-liked-list",function (){
     150        let button = $(this)
     151        let url = "api/genres/like/"+ $(this).attr("genre-id") + "?userId="+ $(this).attr("user-id")
     152        ajaxCallLikeGenre(url,button,'like','Веќе ви се допаѓа жанрот!')
     153    })
     154    $(document.body).on("click",".button-remove-genre-liked-list",function (){
     155        let button = $(this)
     156        let url = "api/genres/unlike/"+ $(this).attr("genre-id")+"?userId="+ $(this).attr("user-id")
     157        ajaxCallLikeGenre(url,button,'unlike','Немате оставено допаѓање на жанрот!')
    119158    })
    120159    $(".discussion-type").change(function (){
    … …  
    157196
    158197                }
     198                $(button).remove()
    159199            }
    160200            else {
    … …  
    180220    })
    181221}
     222
     223
     224
     225function ajaxCallLikeGenre(url,button,type,message){
     226    $.ajax({
     227        url:url,
     228        success:function (data){
     229            if (data){
     230                let el = $(button).parent().siblings().eq(3)
     231                console.log(el)
     232                if (type=="like") {
     233                    $(el).html(parseInt($(el).text()) + 1)
     234                    console.log("da")
     235                }
     236                else
     237                    $(el).html(parseInt($(el).text()) - 1)
     238                $(button).css("display","none")
     239                let userId = $(button).attr("user-id")
     240                let genreId=$(button).attr("genre-id")
     241                if (type==='like') {
     242                    $(button).parent().append("<a class='btn btn-danger button-remove-genre-liked-list' genre-id=" + genreId + " user-id=" + userId + ">💔</a>")
     243                    console.log("da")
     244                }
     245                else{
     246                    $(button).parent().append("<a class='btn btn-success button-add-genre-liked-list' genre-id=" + genreId + " user-id=" + userId + ">❤</a>")
     247                }
     248                let likes_sibling = $("#"+genreId+"genre")
     249                value_likes = Number(likes_sibling.text())
     250                if(type=="like")
     251                    value_likes+=1
     252                else
     253                    value_likes-=1
     254                likes_sibling.text(value_likes)
     255                $(button).remove()
     256            }
     257            else {
     258                $(button).parent().append("<div>" + message +" <button class='button-confirm'>Ок</button></div>")
     259            }
     260        }
     261    })
     262}
     263
     264
    182265function  ajaxCallRating(url,button,type){
    183266    model = {

  • src/main/resources/templates/genres.html

    r7f36551 r3c0f9a9  
    1 <div class="container mb-4">
    2   <div class="row">
    3     <div class="col-12">
    4       <div class="table-responsive">
    5         <table class="table table-striped">
    6           <thead>
    7           <tr>
    8             <th scope="col">Име</th>
    9             <th scope="col">Лајкови</th>
    10           </tr>
    11           </thead>
    12           <tbody>
    13           <tr th:each="genre : ${genres}" class="elements">
    14             <td th:text="${genre.getName()}"></td>
    15             <td th:text="${genre.getLikes()}"></td>
     1<div class="container mb-4" xmlns:sec="http://www.w3.org/1999/xhtml">
    162
    17           </tr>
    18           </tbody>
    19         </table>
     3    <div class="row">
     4      <div class="col-12">
     5        <div class="table-responsive">
     6          <table class="table table-striped">
     7            <thead>
     8            <tr>
     9              <th scope="col">Име</th>
     10              <th scope="col">Лајкови</th>
     11            </tr>
     12            </thead>
     13            <tbody>
     14            <tr th:each="genre : ${genres}" class="elements">
     15              <td th:text="${genre.getName()}"></td>
     16              <td th:text="${genre.getLikes()}" th:id="${genre.getGenreId()+'genre'}"></td>
     17              <td>
     18                <th:block sec:authorize="isAuthenticated()" th:each="g: ${allGenres}" th:if="${g.getGenreId() == genre.getGenreId()}">
     19                  <a class="btn btn-success button-add-genre-liked-list" th:genre-id="${g.getGenreId()}" th:user-id="${user.getUserId()}" th:if="${!likedGenres.contains(g)}">❤</a>
     20                  <a class="btn btn-danger button-remove-genre-liked-list" th:genre-id="${g.getGenreId()}" th:user-id="${user.getUserId()}" th:if="${likedGenres.contains(g)}">💔</a>
     21                </th:block>
     22              </td>
     23            </tr>
     24            </tbody>
     25          </table>
     26        </div>
    2027      </div>
    21     </div>
     28
    2229  </div>
    2330</div>

  • src/main/resources/templates/personShow.html

    r7f36551 r3c0f9a9  
    3030        </div>
    3131    </div>
     32    <div style="width: 45%; margin: 25px; float:left; background-color: rgb(200,200,200); padding: 10px; border-radius: 5px">
     33        <h2>
     34            <span>Бројот на оцени кои филмот ги добил:</span>
     35            <span th:text="${movie.getRates().size()}"></span>
     36        </h2>
     37        <hr>
     38        <div th:each="rating: ${movie.getRates()}" style="margin-bottom: 10px; border: 2px solid gray; border-radius: 10px; background-color: lightblue; padding: 10px; border-radius: 10px; min-height: 130px;">
     39            <div style="width: 60%; float:left;">
     40                <p th:text="${rating.getReason()}" style="text-align: justify"></p>
     41            </div>
     42            <div style="width: 30%; float:right; background-color: darkorange; border-radius: 10px 30px; color: whitesmoke; padding: 10px;">
     43                <h2 style="text-align: center">Rated:</h2>
     44                <p th:text="${rating.getStarsRated() + ' out of 10 stars'}" style="text-align: center"></p>
     45            </div>
     46        </div>
     47    </div>
     48    <div style="width: 45%; margin: 25px; float:left; background-color: rgb(200,200,200); padding: 10px; border-radius: 5px">
     49        <h2>
     50            <span>Бројот на лајкови кои филмот ги добил:</span>
     51            <span th:text="${movie.getLikes().size()}"></span>
     52        </h2>
     53        <hr>
     54        <div th:each="liked: ${movie.getLikes()}" style="margin-bottom: 10px; border: 2px solid gray; border-radius: 10px; background-color: lightblue; padding: 10px; border-radius: 10px; min-height: 60px;">
     55            <div style="width: 100%; float:left;">
     56                <h3  style="text-align: center">
     57                    <span th:text="${liked.getUser().getName() + ' ' + liked.getUser().getSurname()}"></span>
     58                    <span style="color: green; font-size: 100%" >✔</span>
     59                </h3>
     60            </div>
     61        </div>
     62    </div>
    3263</div>

  • src/main/resources/templates/personsList.html

    r7f36551 r3c0f9a9  
    5757
    5858                            </td>
     59
     60                            <a class="bottom-heart btn btn-success button-add-favourite-list"
     61                               th:movie-id="${person.getMovieId()}"
     62                               th:user-id="${user.getUserId()}"
     63                               th:if="${!likedPersons.contains(movie)}">❤</a>
     64
     65                            <a class="bottom-heart btn btn-danger button-remove-favourite-list"
     66                               th:movie-id="${person.getMovieId()}" th:user-id="${user.getUserId()}"
     67                               th:if="${likedPersons.contains(movie)}">💔</a>
     68
     69
    5970                            </th:block>
    6071
Note: See TracChangeset for help on using the changeset viewer.