uiu-cse/page-template/page-journal.php

<?php

/**
 * Template Name: Journal
 *
 * @package UIU_CSE
 */
get_header(); ?>


<?php while (have_posts()) : the_post();

    $auth_token = get_field('auth_token', 'option');
    $client_id = get_field('client_id', 'option');
    $journal_api = get_field('journal_api', 'option');

    $curl = curl_init();

    curl_setopt_array($curl, array(
        CURLOPT_URL => $journal_api,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => '',
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 0,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => 'POST',
        CURLOPT_POSTFIELDS => '{
            "auth_token" : "' . $auth_token . '",
            "user_login_id" : "' . $client_id . '"
        }',
        CURLOPT_HTTPHEADER => array(
            'Content-Type: application/json'
        ),
    ));

    $response = curl_exec($curl);
    curl_close($curl);
    $response = json_decode($response, true);

?>
    <main id="main" class="site-main" role="main">

        <section id="archive-hero">

            <div class="container">

                <!-- breadcrumb -->
                <nav aria-label="breadcrumb">
                    <ul>
                        <li><a href="#"> Home </a></li>
                        <li><a href="#">Research</a></li>
                        <li>Journal Paper</li>
                    </ul>
                </nav>

                <div class="content">

                    <!-- left content -->
                    <div class="left-content">

                        <div class="main-title">Journal Paper</div>

                        <div class="short-details">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor ducimus eius magni non.
                        </div>

                        <div class="links">

                            <!-- message -->
                            <a href="#">
                                <img src="<?php echo (get_template_directory_uri()) ?>/img/envelope-solid.svg" alt="">
                            </a>

                            <!-- printer -->
                            <a href="#">
                                <img src="<?php echo (get_template_directory_uri()) ?>/img/print-solid.svg" alt="">
                            </a>

                            <!-- facebook -->
                            <a href="#">
                                <img src="<?php echo (get_template_directory_uri()) ?>/img/facebook-f.svg" alt="">
                            </a>

                            <!-- twitter -->
                            <a href="#">
                                <img src="<?php echo (get_template_directory_uri()) ?>/img/twitter.svg" alt="">
                            </a>

                            <!-- linkedin -->
                            <a href="#">
                                <img src="<?php echo (get_template_directory_uri()) ?>/img/linkedin-in.svg" alt="">
                            </a>

                        </div>

                    </div>

                    <!-- right content -->
                    <div class="right-content">
                        <img src="<?php echo (get_template_directory_uri()) ?>/img/journal-paper.jpg" alt="">
                    </div>

                </div>
            </div>



        </section>




        <div class="container">

            <section id="resarch-paper-container">


                <!-- side component -->
                <div class="side-comp">

                    <div class="filter">

                        <!-- title -->
                        <div class="filter-title">
                            Refine Your Search
                        </div>

                        <div class="filter-criteria">

                            <h6>Year :</h6>
                            <form id="year-input" action="">

                            </form>


                            <h6>Author :</h6>
                            <form id="author-input" action="">

                            </form>
                        </div>




                    </div>


                </div>


                <!-- main component -->
                <div class="main-comp">

                    <article class="generic-para ">


                        <h3>Conference Papers</h3>


                        <div id="conference-paper">



                        </div>


                    </article>


                </div>



            </section>

        </div>


    </main>
    <!-- #main -->

<?php endwhile; // end of the loop.
?>
<style>
    #archive-hero {
        padding: 2rem 0;
        background: #f3f0ec;
    }

    #archive-hero .content {
        display: flex;
        align-items: start;
    }

    #archive-hero .content .left-content {
        padding: 1rem;
        padding-left: 0 !important;
        flex: 1;
    }

    #archive-hero .content .left-content .main-title {
        font-size: 2.2rem;
        font-weight: 500;
        color: #000000;
    }

    #archive-hero .content .left-content .short-details {
        margin-top: 1.5rem;
        font-size: 1.1rem;
        font-weight: 400;
    }

    #archive-hero .content .left-content .links {
        margin-top: 2rem;
        display: flex;
        gap: 1.8rem;
    }

    #archive-hero .content .left-content .links a {
        height: 1.3rem;
    }

    #archive-hero .content .left-content .links a:hover {
        transform: scale(1.1);
        opacity: 1 !important;
    }

    #archive-hero .content .left-content .links a img {
        height: 100%;
    }

    #archive-hero .content .right-content {
        padding: 0 0 1rem 2rem !important;
        flex: 1;
        align-self: end;
    }

    #archive-hero .content .right-content img {
        width: 100%;
    }

    #resarch-paper-container {
        margin-top: 3rem;
        display: flex;
        gap: 1rem;
    }

    @media (max-width: 1000px) {
        #resarch-paper-container {
            flex-direction: column;
        }
    }

    #resarch-paper-container .main-comp {
        flex: 7;
        padding: 0 0.75rem 1rem 0;
    }

    @media (max-width: 1000px) {
        #resarch-paper-container .main-comp {
            order: 0;
            flex: 1;
        }
    }

    #resarch-paper-container .main-comp article {
        margin: unset;
    }

    #resarch-paper-container .main-comp .generic-para {
        text-align: left;
        padding: 1rem 1.5rem !important;
    }

    #resarch-paper-container .main-comp .generic-para h2 {
        text-align: center;
        letter-spacing: 1px;
    }

    #resarch-paper-container .main-comp .generic-para h3 {
        font-family: "DM Serif Text", serif;
        margin: 20px 0px !important;
        padding-bottom: 0.75rem;
        text-align: left;
        border-bottom: 3px solid #F68B1F;
    }

    #resarch-paper-container .main-comp .generic-para p {
        text-align: justify;
        margin: 30px 0px !important;
        font-size: 16px !important;
        line-height: 22px;
    }

    #resarch-paper-container .main-comp .generic-para .prof-name {
        color: #485680;
        font-weight: 700;
        font-size: 18px;
    }

    #resarch-paper-container .main-comp .generic-para .prof-deg {
        font-style: italic;
        font-weight: 400;
    }

    #resarch-paper-container .main-comp .generic-para .prof-des {
        font-size: 18px;
        font-weight: 700;
    }

    #resarch-paper-container .main-comp .generic-para .paper-details {
        padding: 30px 0px;
        border-bottom: 1px solid rgba(51, 51, 51, 0.1764705882);
    }

    #resarch-paper-container .main-comp .generic-para .paper-title {
        font-size: 18px !important;
        text-align: left !important;
        margin: 10px 0px !important;
        font-weight: 400 !important;
        text-decoration: underline;
    }

    #resarch-paper-container .main-comp .generic-para .paper-year {
        font-size: 14px;
        display: block;
        color: rgba(51, 51, 51, 0.4509803922);
    }

    #resarch-paper-container .main-comp .generic-para p {
        margin: 5px !important;
        font-size: 14px !important;
    }

    #resarch-paper-container .main-comp .generic-para .paper-contributors {
        color: #222222 !important;
    }

    #resarch-paper-container .main-comp .generic-para .paper-tags {
        margin: 20px 0px !important;
    }

    #resarch-paper-container .main-comp .generic-para .paper-tags .tag {
        font-size: 14px;
        border: 1px solid #F68B1F;
        padding: 3px 8px !important;
        border-radius: 10px;
    }

    #resarch-paper-container .side-comp {
        flex: 2;
        padding: 0 0.25rem 1rem 0 !important;
    }

    @media (max-width: 1000px) {
        #resarch-paper-container .side-comp {
            order: 1;
            flex: 1;
        }
    }

    #resarch-paper-container .side-comp .filter {
        margin-bottom: 2rem;
        padding: 0;
        background-color: aliceblue;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.15);
    }

    #resarch-paper-container .side-comp .filter-title {
        padding: 1rem 0;
        text-align: center;
        background-color: #2c5d73;
        border-bottom: 3px solid #ff860d;
        color: #fff;
        font-weight: 400;
        font-size: 1rem;
    }

    #resarch-paper-container .side-comp .filter-criteria {
        padding: 1rem;
        margin-bottom: 1.25rem;
    }

    #resarch-paper-container .side-comp .filter-criteria h6 {
        font-weight: 500;
        margin-bottom: 0.25rem !important;
    }

    #resarch-paper-container .side-comp .filter-criteria form {
        padding: 0.25rem;
        width: 100%;
        padding-top: 0.25rem;
        padding: 0.5rem;
    }

    #resarch-paper-container .side-comp .filter-criteria form .input-group {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.25rem;
    }

    #resarch-paper-container .side-comp .filter-criteria form .input-group label {
        font-size: 0.8rem;
        font-weight: 500;
    }

    #resarch-paper-container .side-comp .filter-criteria form .input-group input {
        font-size: 0.8rem;
    }

    #resarch-paper-container .side-comp .filter-criteria form ul {
        margin-bottom: unset;
    }

    #resarch-paper-container .side-comp .filter-criteria form ul li {
        list-style: none;
    }

    #resarch-paper-container .side-comp .filter-criteria form a {
        display: block;
        color: #333;
        font-size: 0.8rem;
        font-weight: 500;
        padding: 0.5rem 0;
        border-bottom: 1px solid #c5c5c5;
    }

    #resarch-paper-container .side-comp .filter-criteria form a:hover {
        opacity: 1 !important;
        color: #ff860d;
    }

    #resarch-paper-container .side-comp .filter-criteria form .single-item {
        display: block;
        margin-bottom: 0.75rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #2c5d73;
        transition: all 0.25s ease-in-out;
    }

    #resarch-paper-container .side-comp .filter-criteria form .single-item:last-child {
        border-bottom: none;
        margin-bottom: 0rem;
        padding-bottom: 0.25rem;
    }

    #resarch-paper-container .side-comp .filter-criteria form .single-item .date {
        font-size: 0.8rem;
        font-weight: 500;
        color: #c66f17;
    }

    #resarch-paper-container .side-comp .filter-criteria form .single-item .single-item-title {
        font-size: 0.8rem;
        font-weight: 700;
        color: #2c5d73;
    }

    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container {
        display: flex;
        align-items: center;
        gap: 0.7rem;
    }

    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container .date {
        font-size: 0.75rem;
    }

    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container .icon {
        width: 0.75rem;
        color: #ffffff;
    }

    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container .icon img {
        width: 100%;
    }

    /*# sourceMappingURL=cse-journal-paper.css.map */
</style>
<script>
    const payload = {
        "user_login_id": "api_user",
        "auth_token": "api_user20230419045143"
    }

    const fetchJournalPaper = async () => {

        try {
            const res = await fetch("https://ucamapi.uiu.ac.bd/api/EmployeeJournal", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(payload)
            });
            const data = await res.json();
            return data
        } catch (error) {
            console.log(`Error: ${error}`)
        }
    }

    fetchJournalPaper()
        .then(data => {
            // adding menu data into html
            addDataToPage(data)
        })

    function addDataToPage(data) {
        const conferencePaper = document.getElementById('conference-paper');
        const authorFilterContainer = document.getElementById('author-input');
        const yearFilterContainer = document.getElementById('year-input');

        if (data) {

            let allYears = [];
            data.map(data => {
                const publishYear = data.Year;
                allYears.push(publishYear);
                // year add in filter
                const allYear = `<div class="input-group">
                                        <span>
                                          <label for=${publishYear}>${publishYear}</label>
                                        </span>
                                        <span>
                                          <input type="radio" id=${publishYear} name="author" value=${publishYear}>
                                        </span>
                                    </div>`

                yearFilterContainer.insertAdjacentHTML("beforeend", allYear)
                // year add in filter end

                // author add in filter
                const allAuthor = `<div class="input-group">
                                        <span>
                                          <label for=${data.TeacherCode}>${data.TeacherCode}</label>
                                        </span>
                                        <span>
                                          <input type="radio" id=${data.TeacherCode} name="author" value=${data.TeacherCode}>
                                        </span>
                                    </div>`

                authorFilterContainer.insertAdjacentHTML("beforeend", allAuthor)
                // author add in filter end

                // journallist adding
                data.JournalList.map(journal => {
                    const journalData = `<div class="paper-details">
                                            <span class="paper-year">${publishYear}</span>
                                            <h2 class="paper-title">${journal.PaperTitle}</h2>
                                            <p class="paper-tags">
                                                ${
                                                    journal.KeyWords.map(KeyWord => {
                                                        return `<span class="tag">${KeyWord}</span>`
                                                    })
                                                }
                                            </p>
                                            <p class="paper-event">
                                                <i>Publication: </i> ${journal.JournalTitle}
                                            </p>
                                            <p class="paper-contributors">
                                                <i>Authors: </i> ${
                                                    journal.Author.map(author => {
                                                        return "  " + author.AuthorName
                                                    })
                                                }
                                            </p>
                                        </div>`
                    conferencePaper.insertAdjacentHTML("beforeend", journalData)
                })
            })
            console.log(allYears)
        }
    }
</script>
<?php get_footer(); ?>