123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771 |
- <?php
- /**
- * Template Name: Journal
- *
- * @package UIU_DEPARTMENTAL
- */
- 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);
- // echo "<pre>";
- // print_r($response)
- ?>
- <script type="text/javascript">
- const journal_api_response = <?php echo json_encode($response); ?>;
- </script>
- <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>Select Author :</h6>
- <div id="author-list" class="autoComplete_wrapper">
- <input id="autoComplete" type="search" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off" autocapitalize="off">
- </div>
- <h6>Year Range:</h6>
- <div class="form-group">
- <input type="text" class="fromYear form-control" value="" placeholder="from year" />
- <input type="text" class="toYear form-control" value="" placeholder="to year" />
- </div>
- <h6>List per Page:</h6>
- <select id="set-limit" onchange="getLimitValue()">
- <option value="" disabled selected>Select</option>
- <option value="5">5</option>
- <option value="10">10</option>
- <option value="25">25</option>
- <option value="50">50</option>
- </select>
- </div>
- </div>
- <button onclick="restQueryParm()">Reset Filter</button>
- </div>
- <!-- main component -->
- <div class="main-comp">
- <article class="generic-para ">
- <h3>Journal Papers</h3>
- <div id="conference-paper">
- </div>
- </article>
- </div>
- </section>
- </div>
- </main>
- <!-- #main -->
- <?php endwhile; // end of the loop.
- ?>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.7/css/autoComplete.min.css">
- <link rel="stylesheet" href="<?php echo (get_template_directory_uri()) ?>/css/yearpicker.css">
- <script src="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.7/autoComplete.min.js"></script>
- <script src="https://saravanajd.github.io/YearPicker/jquery.min.js"></script>
- <script src="<?php echo (get_template_directory_uri()) ?>/js/yearpicker.js"></script>
- <script>
- const fullURL = window.location.href;
- const urlParams = new URLSearchParams(window.location.search);
- const urlWithoutParams = fullURL.split("?")[0];
- // urlParams.set('limit', '2');
- const getQueryParam = (param) => urlParams.has(param) ? urlParams.get(param) : '';
- let authorName = getQueryParam("authorName");
- let fromYear = parseInt(getQueryParam("fromYear")) || 0;
- let toYear = parseInt(getQueryParam("toYear")) || 0;
- let c_page = parseInt(getQueryParam("c_page")) || 1;
- let limit = parseInt(getQueryParam("limit")) || 0;
- let keyword = getQueryParam("keyword");
- let queryParm = `?authorName=${authorName}&fromYear=${fromYear}&toYear=${toYear}&page=${c_page}&limit=${limit}&keyword=${keyword}`;
- const updateQueryParm = (param, value) => {
- switch (param) {
- case 'authorName':
- urlParams.set('authorName', value);
- authorName = value;
- break;
- case 'fromYear':
- urlParams.set('fromYear', value);
- fromYear = value;
- break;
- case 'toYear':
- urlParams.set('toYear', value);
- toYear = value;
- break;
- case 'c_page':
- urlParams.set('c_page', value);
- c_page = value;
- break;
- case 'limit':
- urlParams.set('limit', value);
- limit = value;
- break;
- case 'keyword':
- urlParams.set('keyword', value);
- keyword = value;
- break;
- default:
- break;
- }
- document.getElementById("autoComplete").value = authorName;
- document.querySelector(".fromYear").value = (fromYear == 0) ? '' : fromYear;
- document.querySelector(".toYear").value = (toYear == 0) ? '' : toYear;
- document.getElementById("set-limit").value = (limit == 0) ? '' : limit;
- let theQueryParm = `?authorName=${authorName}&fromYear=${fromYear}&toYear=${toYear}&page=${c_page}&limit=${limit}&keyword=${keyword}`;
- setQueryParm(theQueryParm);
- };
- const restQueryParm = () => {
- urlParams.set('authorName', "");
- urlParams.set('fromYear', 0);
- urlParams.set('toYear', 0);
- urlParams.set('c_page', 1);
- urlParams.set('limit', 0);
- urlParams.set('keyword', "");
- authorName = "";
- fromYear = 0;
- toYear = 0;
- c_page = 1;
- limit = 0;
- keyword = "";
- document.getElementById("autoComplete").value = "";
- document.querySelector(".fromYear").value = '';
- document.querySelector(".toYear").value = '';
- document.getElementById("set-limit").value = '';
- let theQueryParm = `?authorName=&fromYear=0&toYear=0&page=0&limit=0&keyword=`;
- setQueryParm(theQueryParm);
- // console.log("theQueryParm", theQueryParm);
- }
- const setQueryParm = (queryParm) => {
- // console.log("queryParm", queryParm);
- const nextURL = urlWithoutParams + queryParm;
- const nextTitle = 'New journal page';
- const nextState = {
- additionalInformation: 'Updated the URL with'
- };
- window.history.pushState(nextState, nextTitle, nextURL);
- window.history.replaceState(nextState, nextTitle, nextURL);
- const conferencePaperWrapper = document.getElementById('conference-paper');
- fetchJournalPaper(queryParm)
- .then(data => {
- conferencePaperWrapper.innerHTML = '';
- addDataToPage(data);
- });
- }
- const payload = {
- "user_login_id": "api_user",
- "auth_token": "api_user20230419045143"
- }
- const fetchJournalPaper = async (currentQueryParm) => {
- const apiUrl = `https://ucamapi.uiu.ac.bd/api/EmployeeJournal/${currentQueryParm}`;
- console.log("api called", apiUrl);
- try {
- const res = await fetch(apiUrl, {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify(payload)
- });
- const data = await res.json();
- return data
- } catch (error) {
- console.log(`Error: ${error}`)
- }
- }
- let allAuthors = [];
- journal_api_response.map((data) => {
- const EmployeeName = data.EmployeeName;
- allAuthors.push(EmployeeName);
- });
- // Remove duplicates
- allAuthors = Array.from(new Set(allAuthors));
- const autoCompleteJS = new autoComplete({
- placeHolder: "Search by author...",
- data: {
- src: allAuthors,
- cache: true,
- },
- resultItem: {
- highlight: true
- },
- events: {
- input: {
- selection: (event) => {
- const selection = event.detail.selection.value;
- autoCompleteJS.input.value = selection;
- updateQueryParm("authorName", selection);
- }
- }
- }
- });
- $(".fromYear").yearpicker({
- endYear: new Date().getFullYear(),
- onChange: function(value) {
- let updatedYear = value || fromYear;
- updateQueryParm("fromYear", updatedYear);
- console.log(updatedYear);
- }
- });
- $(".toYear").yearpicker({
- endYear: new Date().getFullYear(),
- onChange: function(value) {
- let updatedYear = value || toYear;
- updateQueryParm("toYear", updatedYear);
- console.log(updatedYear);
- }
- });
- function getLimitValue() {
- var limitValue = document.getElementById("set-limit").value;
- updateQueryParm("limit", limitValue || 0);
- console.log("limit", limitValue);
- }
- // Add data to page
- function addDataToPage(data) {
- const conferencePaper = document.getElementById('conference-paper');
- if (data) {
- data.map(data => {
- const mainAuthor = data.EmployeeName;
- // journal list adding
- data.JournalList.map(journal => {
- const journalData = `<div class="paper-details">
- <span class="paper-year">${journal.Year}</span>
- <a href="${journal.JournalLink}" target="_blank">
- <h2 class="paper-title">${journal.PaperTitle}</h2>
- </a>
- <p class="paper-tags">
- ${
- journal.KeyWords.map(KeyWord => {
- return `<span class="tag">${KeyWord.KeyWordName}</span>`
- })
- }
- </p>
- <p class="paper-event">
- <i>Publication: </i> ${journal.JournalTitle}
- </p>
- <p class="paper-contributors">
- <i>Authors: </i> ${
- journal.Author.map(author => {
- return `<span ${author.AuthorName == mainAuthor? `onclick="updateQueryParm('authorName', '${mainAuthor}')"` : ''} class="${author.AuthorName == mainAuthor? 'main-author' : 'sub-author'}">${author.AuthorName}</span>`
- })
- }
- </p>
- </div>`;
- conferencePaper.insertAdjacentHTML("beforeend", journalData);
- })
- })
- console.log("ucam", journal_api_response);
- }
- }
- </script>
- <style>
- #resarch-paper-container input,
- #resarch-paper-container li {
- font-size: .75rem;
- }
- #resarch-paper-container input {
- padding: 0 15px;
- height: 40px;
- }
- div#author-list {
- margin-bottom: 30px;
- }
- input#autoComplete {
- background-position: center left 7px;
- background-size: .75rem auto;
- font-size: .75rem;
- max-width: 220px;
- padding-left: 25px;
- border-radius: 5px;
- border: var(--border-width) solid var(--border-color);
- cursor: text;
- }
- .autoComplete_wrapper>ul>li {
- font-size: .75rem;
- }
- .autoComplete_wrapper>ul>li mark {
- background-color: transparent;
- color: #f68b1f;
- font-weight: 700;
- padding: 0;
- }
- .autoComplete_wrapper>ul,
- .autoComplete_wrapper>ul>li {
- border-radius: 0;
- }
- .autoComplete_wrapper>input,
- .autoComplete_wrapper>input:focus,
- .autoComplete_wrapper>input:hover {
- color: #415462 !important;
- }
- .autoComplete_wrapper>ul>li:hover {
- background-color: rgb(246, 139, 31, 0.15);
- }
- .yearpicker-items.selected {
- color: inherit;
- }
- select#set-limit {
- padding: 0 15px;
- height: 40px;
- font-size: 0.75rem;
- }
- p.paper-contributors {
- text-align: left;
- }
- p.paper-contributors span {
- margin-left: 5px;
- }
- span.main-author {
- color: #f68b1f;
- cursor: pointer;
- }
- span.main-author:hover {
- font-weight: 700;
- }
- #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: 3rem auto 6rem;
- display: flex;
- gap: 1rem;
- }
- @media (max-width: 1000px) {
- #resarch-paper-container {
- flex-direction: column;
- }
- }
- #resarch-paper-container .main-comp {
- flex: 9;
- 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: 3;
- 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 {
- border-radius: 5px;
- 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: .5rem 0;
- text-align: center;
- background-color: #2c5d73;
- border-bottom: 3px solid #ff860d;
- color: #fff;
- font-weight: 400;
- font-size: 1rem;
- border-radius: 5px;
- }
- #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%;
- }
- </style>
- <?php get_footer(); ?>
|