From 016a5a822f6d6ac80f61612292ea42d9c8518c94 Mon Sep 17 00:00:00 2001
From: Daniel Wilkowski <wilkowski.kontakt@gmail.com>
Date: Tue, 10 Oct 2023 22:38:54 +0200
Subject: [PATCH] Add timeline switch

---
 resources/js/pages/homepage.js |  15 ++-
 resources/views/home.twig      | 195 +++++++++++++++++++++++----------
 2 files changed, 150 insertions(+), 60 deletions(-)

diff --git a/resources/js/pages/homepage.js b/resources/js/pages/homepage.js
index ccc9ee32f..eb5599737 100644
--- a/resources/js/pages/homepage.js
+++ b/resources/js/pages/homepage.js
@@ -64,12 +64,20 @@ function switchForumTab(index) {
   axios.post('/User/Settings/Ajax', {'homepage_mode': index});
 }
 
+function switchTimeline(index) {
+  axios.post('/User/Settings/Ajax', {'homepage_timeline': index})
+    .finally(() => window.location.reload());
+}
+
 function switchReputationTab(index) {
   axios.post('/User/Settings/Ajax', {'homepage_reputation': index});
 }
 
 (function () {
-  new PerfectScrollbar(document.getElementById('stream'));
+  const stream = document.getElementById('stream');
+  if (stream) {
+    new PerfectScrollbar(stream);
+  }
 
   const forumTabs = document.querySelectorAll('#forum-tabs .nav-link');
   for (let i = 0; i < forumTabs.length; i++) {
@@ -80,4 +88,9 @@ function switchReputationTab(index) {
   for (let i = 0; i < reputationTabs.length; i++) {
     reputationTabs[i].addEventListener('click', () => switchReputationTab(i));
   }
+
+  const timelineTabs = document.querySelectorAll('#timeline-switch .nav-item');
+  for (let i = 0; i < timelineTabs.length; i++) {
+    timelineTabs[i].addEventListener('click', () => switchTimeline(i));
+  }
 })();
diff --git a/resources/views/home.twig b/resources/views/home.twig
index 644902607..d2a5016ab 100644
--- a/resources/views/home.twig
+++ b/resources/views/home.twig
@@ -13,18 +13,70 @@
       </div>
     </div>
   </div>
-  <div class="row mt-4">
-    <div class="col-12">
-      <div class="box">
-        <h2 class="h4">
-          <i class="fas fa-star fa-fw"></i>
-          Co nowego na forum?
-        </h2>
-      </div>
-    </div>
-  </div>
   <div class="row">
     <main class="col-md-8">
+      <div class="row mt-4">
+        <div class="col-12">
+          <div class="d-flex justify-content-between">
+            <h2 class="h4">
+              <i class="fas fa-star fa-fw"></i>
+              Co nowego na forum?
+            </h2>
+            <ul id="timeline-switch" class="nav nav-pills" style="border: none">
+              <li class="nav-item">
+                <a class="nav-link {{ settings['homepage.timeline'] == 0 ? 'active' }}"
+                   role="tab" data-bs-toggle="tab" style="cursor: pointer"
+                   title="Pokaż tylko wpisy na mikroblogu">
+                  Microblogi
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link {{ settings['homepage.timeline'] == 1 ? 'active' }}"
+                   role="tab" data-bs-toggle="tab" style="cursor: pointer"
+                   title="Pokaż oś czasu, z wpisami na mikroblogu, postami i komentarzami">
+                  <i class="fas fa-flask"></i> Oś czasu (Beta)
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      {% if settings['homepage.timeline'] == 1 %}
+        <style>
+            #box-forum > .card > .card-body > .row > .col-lg-6,
+            #box-forum > .card > .card-body > .row {
+                display: block;
+                width: auto;
+                max-width: initial;
+                flex: initial;
+                flex-wrap: initial;
+            }
+
+            #forum-tabs {
+                display: none;
+            }
+
+            #box-forum #box-forum-headline {
+                margin-top: 0;
+            }
+
+            .tab-content {
+                display: flex;
+            }
+
+            .tab-content .tab-pane#interesting,
+            .tab-content .tab-pane#newest {
+                display: block;
+                width: 50%;
+            }
+
+            .tab-content .views {
+                padding: 0;
+            }
+        </style>
+      {% endif %}
+
       <section id="box-forum" class="box">
         <div class="card card-forum">
           <div class="card-body">
@@ -53,8 +105,10 @@
                     <div role="tabpanel" class="tab-pane {{ settings['homepage.mode'] == 0 ? 'active' }}" id="interesting">
                       {% for topic in interesting %}
                         <div class="row">
-                          <span class="col-sm-2 d-none d-sm-block">
-                            <strong class="text-nowrap">{{ topic.views }}</strong>
+                          <span class="col-sm-2 d-none d-sm-block views">
+                            <strong class="text-nowrap">
+                              {{ topic.views }}
+                            </strong>
                             <small class="text-nowrap">
                               {{ declination(topic.views, ['wyświetlenie', 'wyświetlenia', 'wyświetleń'], true) }}
                             </small>
@@ -80,8 +134,10 @@
                     <div role="tabpanel" class="tab-pane {{ settings['homepage.mode'] == 1 ? 'active' }}" id="newest">
                       {% for topic in newest %}
                         <div class="row">
-                          <span class="col-sm-2 d-none d-sm-block">
-                            <strong class="text-nowrap">{{ topic.views }}</strong>
+                          <span class="col-sm-2 d-none d-sm-block views">
+                            <strong class="text-nowrap">
+                              {{ topic.views }}
+                            </strong>
                             <small class="text-nowrap">
                               {{ declination(topic.views, ['wyświetlenie', 'wyświetlenia', 'wyświetleń'], true) }}
                             </small>
@@ -107,31 +163,33 @@
                 </div>
               </div>
 
-              <div id="stream-wrapper" class="col-lg-6">
-                <div id="stream">
-                  <div class="overview">
-                    {% for activity in activities %}
-                      <div class="media">
-                        <span class="{{ activity.object }} d-none d-sm-block"
-                              title="{{ activity.headline|striptags|unescape }}">
-                        </span>
+              {% if settings['homepage.timeline'] == 0 %}
+                <div id="stream-wrapper" class="col-lg-6">
+                  <div id="stream">
+                    <div class="overview">
+                      {% for activity in activities %}
+                        <div class="media">
+                          <span class="{{ activity.object }} d-none d-sm-block"
+                                title="{{ activity.headline|striptags|unescape }}">
+                          </span>
 
-                        <div class="d-none d-sm-block mr-2">
-                          <a href="{{ route('profile', [activity.user_id]) }}">
-                            <img class="media-object" src="{{ activity.user_avatar }}"
-                                 style="width: 38px; height: 38px;" alt="activity.user.name">
-                          </a>
-                        </div>
-                        <div class="media-body">
-                          <p>{{ activity.headline|raw }}</p>
-                          <small>{{ activity.created_at }}</small>
-                          <strong>{{ activity.excerpt }}</strong>
+                          <div class="d-none d-sm-block mr-2">
+                            <a href="{{ route('profile', [activity.user_id]) }}">
+                              <img class="media-object" src="{{ activity.user_avatar }}"
+                                   style="width: 38px; height: 38px;" alt="activity.user.name">
+                            </a>
+                          </div>
+                          <div class="media-body">
+                            <p>{{ activity.headline|raw }}</p>
+                            <small>{{ activity.created_at }}</small>
+                            <strong>{{ activity.excerpt }}</strong>
+                          </div>
                         </div>
-                      </div>
-                    {% endfor %}
+                      {% endfor %}
+                    </div>
                   </div>
                 </div>
-              </div>
+              {% endif %}
             </div>
           </div>
 
@@ -139,34 +197,53 @@
       </section>
 
       <section id="js-microblog" class="box">
-        <h4>
-          <i class="fas fa-stream fa-fw"></i>
-          Oś czasu
-        </h4>
-        <div class="timeline mt-4">
-          <div class="position-relative d-flex align-items-start" v-for="activity in timeline">
-            <div :class="['icon', activity.type]">
-              <i class="far fa-comment" v-if="activity.type === 'comment'"></i>
-              <i class="fas fa-quote-right" v-if="activity.type === 'post'"></i>
-              <i class="fas fa-shapes" v-if="activity.type === 'microblog'"></i>
-            </div>
-            <div class="body">
-              <vue-microblog v-if="activity.type === 'microblog'" :key="activity.id" :microblog="activity" :wrap="true"></vue-microblog>
-              <template v-else-if="activity.excerpt">
-                <div :class="['item', activity.type]">
-                  <div class="d-flex">
-                    <img :src="activity.user_avatar" class="d-block mr-2" loading="lazy">
-                    <div>
-                      <p class="m-0" v-html="activity.headline"></p>
-                      <small class="text-muted">${activity.created_at}</small>
+        {% if settings['homepage.timeline'] == 1 %}
+          <h4>
+            <i class="fas fa-stream fa-fw"></i>
+            Oś czasu
+          </h4>
+          <div class="timeline mt-4">
+            <div class="position-relative d-flex align-items-start" v-for="activity in timeline">
+              <div :class="['icon', activity.type]">
+                <i class="far fa-comment" v-if="activity.type === 'comment'"></i>
+                <i class="fas fa-quote-right" v-if="activity.type === 'post'"></i>
+                <i class="fas fa-shapes" v-if="activity.type === 'microblog'"></i>
+              </div>
+              <div class="body">
+                <vue-microblog v-if="activity.type === 'microblog'" :key="activity.id" :microblog="activity" :wrap="true"></vue-microblog>
+                <template v-else-if="activity.excerpt">
+                  <div :class="['item', activity.type]">
+                    <div class="d-flex">
+                      <img :src="activity.user_avatar" class="d-block mr-2" loading="lazy">
+                      <div>
+                        <p class="m-0" v-html="activity.headline"></p>
+                        <small class="text-muted">${activity.created_at}</small>
+                      </div>
                     </div>
+                    <p class="content">${activity.excerpt}</p>
                   </div>
-                  <p class="content">${activity.excerpt}</p>
-                </div>
-              </template>
+                </template>
+              </div>
             </div>
           </div>
-        </div>
+        {% else %}
+          <h4>
+            <i class="far fa-comments fa-fw"></i>
+            <a href="{{ route('microblog.home') }}">
+              Popularne wpisy na mikroblogu
+            </a>
+          </h4>
+          <div v-for="microblog in microblogs">
+            <vue-microblog :key="microblog.id" :microblog="microblog" :wrap="true"></vue-microblog>
+          </div>
+          <div class="mt-3 mb-3 d-flex justify-content-center">
+            <vue-pagination
+                :current-page="currentPage"
+                :total-pages="totalPages"
+                @change="changePage">
+            </vue-pagination>
+          </div>
+        {% endif %}
         <vue-notifications position="bottom right"/>
       </section>
     </main>