Add timeline switch

pradoslaw · Nov 23, 2023 · 18a526b · 18a526b
1 parent 11dd84f
commit 18a526b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 13 deletions.
diff --git a/resources/js/pages/homepage.js b/resources/js/pages/homepage.js
@@ -46,22 +46,33 @@ 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);
+  }
 
   let tabs = document.querySelectorAll('#forum-tabs .nav-link');
-
   for (let i = 0; i < tabs.length; i++) {
     tabs[i].addEventListener('click', () => switchForumTab(i));
   }
 
   tabs = document.querySelectorAll('#reputation-tabs .nav-item');
-
   for (let i = 0; i < tabs.length; i++) {
     tabs[i].addEventListener('click', () => switchReputationTab(i));
   }
+
+  tabs = document.querySelectorAll('#timeline-switch .nav-item');
+  for (let i = 0; i < tabs.length; i++) {
+    tabs[i].addEventListener('click', () => switchTimeline(i));
+  }
 })();
diff --git a/resources/views/home.twig b/resources/views/home.twig
@@ -19,18 +19,34 @@
       </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>
       <section id="box-forum" class="box">
         <div class="card card-forum">
           <div class="card-body">