projectList.pug

doctype html
html(lang="de")
  head
    title= "Projektdaten"
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
    link(rel="stylesheet", type="text/css", href="/css/bootstrap.min.css")
    link(rel="stylesheet", type="text/css", href="/css/m4lab.css")
    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
    style.
        .title-container {
            position: relative;
            color: white;
        }
        .card-title-bottom-left {
            position: absolute;
            bottom: 0px;
            width: 100%;
            color: black;
            font-weight: bold;
            background: rgb(255, 255, 255, 0.5);
            text-align: left;
            padding: 5px
        }
        .card-img-top {
            height: 15vw;
            object-fit: cover;
        }
  body
    div(class="container")
        div(class="row")
            div(class="col-md-12 margin_bottom_40")
                img(class="mx-auto" src="/img/ProjektcodeDaten.png" width="100%")
    div(class="container")
        p Hier finden Sie den direkten Zugang zu den Inhalten der bei uns gehosteten Projekte.
        p Weitere Informationen zu den bei uns gehosteten Projekten finden Sie <a href="/projektinformationen">hier</a>.

        div(class="container")
            p#projectCounter #{project.length} Projektdaten werden angezeigt
            div(class="pt-4 pb-4 form-row")
                div(class="form-group col-md-10")
                    input(id="searchInput", class="form-control form-control-lg", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
                div(class="form-group col-md-2")
                    select#sortingSelect(class="form-control form-control-lg")
                        option(value="" disabled) Sort by
                        option(value="name") &nbsp;&nbsp; Name
                        option(value="created_at") &nbsp;&nbsp; Last created
                        option(value="updated_at") &nbsp;&nbsp; Last updated
            | <div class="row">
            for item in project
                div(class="card-deck py-4 col-sm")
                    div(class="card width_18" style="transform: rotate(0);")
                        div(class="title-container")
                            h5(class="card-title-bottom-left") #{item.name}
                            img(class="card-img-top", src=item.logo)
                        div(class="card-body")
                            div(class="row")
                                each key in item.keywords
                                    h6
                                        span(class="badge badge-pill badge-primary px-2") #{key}
                                        | &nbsp;
                            div(class="row")
                                div(class="col-9")
                                    p(class="card-text") #{item.desc}
                                a(href=item.weburl, class="no_text_decoration stretched-link", target="_blank")
            | </div>

    // jQuery
    script(src="https://code.jquery.com/jquery-3.3.1.min.js")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
    // Bootstrap
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
    // Header
    script(src="/js/headfoot.js")
    script.
        function searchFunction() {
            var input = document.getElementById("searchInput")
            var filter = input.value.toUpperCase()
            
            var cardsCol = document.getElementsByClassName("col-sm")
            var cardTitle, cardText, titleValue, textValue
            
            var i
            var counterBlock = 0
            for (i = 0; i < cardsCol.length; i++) {
                cardTitle = cardsCol[i].getElementsByClassName("card-title-bottom-left");
                cardBody = cardsCol[i].getElementsByClassName("card-body");
                cardText = cardsCol[i].getElementsByClassName("card-text");
                
                titleValue = cardTitle[0].textContent || cardTitle[0].innerText;
                bodyValue = cardBody[0].textContent || cardBody[0].innerText;
                textValue = cardText[0].textContent || cardText[0].innerText;
                
                if (titleValue.toUpperCase().indexOf(filter) > -1 || bodyValue.toUpperCase().indexOf(filter) > -1 || textValue.toUpperCase().indexOf(filter) > -1) {
                    cardsCol[i].style.display = "block"
                    counterBlock++
                } else {
                    cardsCol[i].style.display = "none"
                }
            }

            document.getElementById("projectCounter").innerHTML = counterBlock+" Projektdaten werden angezeigt"
        }

        $("#sortingSelect").change(function() {
            window.location.replace('/projektdaten?sort='+$("#sortingSelect").val())
        });
        function getQueryStringParams(params, url) {
            // first decode URL to get readable data
            var href = decodeURIComponent(url || window.location.href);
            // regular expression to get value
            var regEx = new RegExp('[?&]' + params + '=([^&#]*)', 'i');
            var value = regEx.exec(href);
            // return the value if exist
            return value ? value[1] : null;
        }
        function setSortSelect() {
            let sortKeyword = getQueryStringParams('sort', window.location.href)
            if (sortKeyword == "created_at") {
                $("#sortingSelect").val("created_at")
            } else if(sortKeyword == "updated_at") {
                $("#sortingSelect").val("updated_at")
            } else {
                $("#sortingSelect").val("name")
            }
        }
        setSortSelect()