34 adding comments and pages to the kebab details

frontend/src/axiosClient.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const axiosClient = axios.create({
-  baseURL: 'https://sponge-climbing-adder.ngrok-free.app/api',
+  baseURL: 'https://legible-freely-wren.ngrok-free.app/api',
 });
 
 axiosClient.interceptors.request.use((config) => {

frontend/src/components/Footer.js

@@ -7,7 +7,7 @@ export default function Footer() {
       <p>
         <a href="https://github.com/kibolApp" target="_blank" rel="noopener noreferrer" className="font-bold text-gold">
           ©kibolAPP
-        </a> 2024 Legnica Kebab City Tour. Wszelkie prawa zastrzeżone.
+        </a> 2025 Legnica Kebab City Tour. Wszelkie prawa zastrzeżone.
       </p>
     </footer>
   );

frontend/src/components/KebabListClone.js

@@ -0,0 +1,158 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowDown } from '@fortawesome/free-solid-svg-icons';
+
+const daysTranslations = {
+  monday: 'Poniedziałek',
+  tuesday: 'Wtorek',
+  wednesday: 'Środa',
+  thursday: 'Czwartek',
+  friday: 'Piątek',
+  saturday: 'Sobota',
+  sunday: 'Niedziela',
+};
+
+const dayOrder = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+
+const translateStatus = (status) => {
+  const statusMap = {
+    exists: 'Istnieje',
+    closed: 'Zamknięty',
+    planned: 'Planowany',
+  };
+  return statusMap[status] || 'Nieznany';
+};
+
+export default function KebabsListClone({ kebabs, activeKebabIndex }) {
+    const [openIndex, setOpenIndex] = useState(null);
+    const kebabRefs = useRef([]);
+
+    useEffect(() => {
+        if (activeKebabIndex !== null) {
+          setOpenIndex(activeKebabIndex);
+          if (kebabRefs.current[activeKebabIndex]) {
+            kebabRefs.current[activeKebabIndex].scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+            });
+          }
+        }
+      }, [activeKebabIndex]);
+
+      const toggleDetails = (index) => {
+        setOpenIndex(openIndex === index ? null : index);
+      };
+
+  return (
+    <div className="w-full grid grid-cols-1 gap-4 p-2">
+      {kebabs.map((kebab, index) => (
+        <div
+          key={kebab.id}
+          id={`kebab-${index}`}
+          ref={(el) => (kebabRefs.current[index] = el)}
+          className={`p-4 rounded-lg shadow-md bg-white ${
+            activeKebabIndex === index ? 'border-2 border-blue-500' : ''
+          }`}
+        >
+          <div className="flex items-center justify-between p-3">
+            <div className="flex items-center">
+              <div className="w-16 h-16 flex-shrink-0 mr-4">
+                <img
+                  src={kebab.logo}
+                  alt={kebab.name}
+                  className="w-full h-full object-cover rounded-full border"
+                />
+              </div>
+              <div>
+                <h3 className="text-lg font-bold text-gray-800">{kebab.name}</h3>
+                <p className="text-sm text-gray-600">{kebab.address}</p>
+              </div>
+            </div>
+
+            <FontAwesomeIcon
+                icon={faArrowDown}
+                className={`text-gray-600 text-lg transform transition-transform duration-500 hover: cursor-pointer ${
+                openIndex === index ? 'rotate-180' : ''
+                }`}
+                onClick={() => toggleDetails(index)}
+            />
+          </div>
+
+          <div
+            className={`overflow-hidden transition-all duration-500 ease-in-out ${
+              openIndex === index ? 'max-h-screen' : 'max-h-0'
+            }`}
+          >
+            <div className="p-3 border-t border-gray-200">
+              <p className="text-gray-700 font-bold">Godziny otwarcia:</p>
+              {dayOrder
+                .filter((day) => kebab.opening_hours?.[day])
+                .map((day) => (
+                  <p key={day} className="text-gray-700">
+                    <strong>{daysTranslations[day]}:</strong> {kebab.opening_hours[day]}
+                  </p>
+                ))}
+
+              {kebab.meats && kebab.meats.length > 0 && (
+                <div className="mt-2">
+                  <p className="text-gray-700 font-bold">Mięsa:</p>
+                  <p className="text-gray-700">{kebab.meats.join(', ')}</p>
+                </div>
+              )}
+
+              {kebab.sauces && kebab.sauces.length > 0 && (
+                <div className="mt-2">
+                  <p className="text-gray-700 font-bold">Sosy:</p>
+                  <p className="text-gray-700">{kebab.sauces.join(', ')}</p>
+                </div>
+              )}
+
+              {kebab.status && (
+                <div className="mt-2">
+                  <p className="text-gray-700 font-bold">Status:</p>
+                  <p className="text-gray-700">{translateStatus(kebab.status)}</p>
+                </div>
+              )}
+
+              {kebab.pages && Object.keys(kebab.pages).length > 0 && (
+                <div className="mt-2">
+                  <p className="text-gray-700 font-bold">Strony:</p>
+                  <div className="text-gray-700">
+                    {Object.entries(kebab.pages).map(([key, value]) => (
+                      <div key={key}>
+                        <a
+                          href={value}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="font-bold capitalize text-blue-500 hover:text-blue-700 cursor-pointer"
+                        >
+                          {key}
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {kebab.comments && kebab.comments.length > 0 && (
+                <div className="mt-4">
+                  <p className="text-gray-700 font-bold">Komentarze:</p>
+                  <div className="text-gray-700 max-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
+                    {kebab.comments.map((commentObj, index) => (
+                      <div key={index} className="mb-2">
+                        <span className="font-semibold">
+                          {commentObj.name || `Użytkownik #${commentObj.id_user}`}:
+                        </span>
+                        <span> {commentObj.comment}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/KebabsList.js

@@ -135,7 +135,7 @@ const translateStatus = (status) => {
 
                 <FontAwesomeIcon
                   icon={faArrowDown}
-                  className={`text-gray-600 text-lg transform transition-transform duration-500 ${
+                  className={`text-gray-600 text-lg transform transition-transform duration-500 hover: cursor-pointer ${
                     openIndex === index ? 'rotate-180' : ''
                   }`}
                   onClick={() => toggleDetails(index)}
@@ -191,17 +191,53 @@ const translateStatus = (status) => {
                 </div>
 
                 {kebab.ordering_options && kebab.ordering_options.length > 0 && (
-                  <div className="mt-4">
-                    <p className="text-lg font-bold text-gray-700">Opcje zamówień:</p>
+                  <div className="mt-2">
+                    <p className="text-md font-bold text-gray-700">Opcje zamówień:</p>
                     <div className="mt-2">
                       {kebab.ordering_options.map((option, index) => (
-                        <p key={index} className="text-base text-gray-800">
+                        <p key={index} className="text-base text-gray-700">
                           {option}
                         </p>
                       ))}
                     </div>
                   </div>
                 )}
+
+                {kebab.pages && Object.keys(kebab.pages).length > 0 && (
+                  <div className="mt-2">
+                    <p className="text-gray-700 font-bold">Strony:</p>
+                    <div className="text-gray-700">
+                      {Object.entries(kebab.pages).map(([key, value]) => (
+                        <div key={key}>
+                          <a
+                            href={value}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="font-bold capitalize text-blue-500 hover:text-blue-700 cursor-pointer"
+                          >
+                            {key}
+                          </a>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {kebab.comments && kebab.comments.length > 0 && (
+                  <div className="mt-4">
+                    <p className="text-gray-700 font-bold">Komentarze:</p>
+                    <div className="text-gray-700 max-h-40 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
+                      {kebab.comments.map((commentObj, index) => (
+                        <div key={index} className="mb-2">
+                          <span className="font-semibold">
+                            {commentObj.name || `Użytkownik #${commentObj.id_user}`}:
+                          </span>
+                          <span> {commentObj.comment}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
             </div>
           </div>
         </div>

frontend/src/components/SearchPanel.js

@@ -10,6 +10,8 @@ export default function SearchPanel({ kebabs, onSearch }) {
   const [selectedSauces, setSelectedSauces] = useState([]);
   const [selectedMeats, setSelectedMeats] = useState([]);
   const [selectedOrderingOptions, setSelectedOrderingOptions] = useState([]);
+  const [selectedPages, setSelectedPages] = useState([]);
+
 
   const allSauces = Array.from(
     new Set(kebabs.flatMap((kebab) => kebab.sauces || []))
@@ -23,6 +25,10 @@ export default function SearchPanel({ kebabs, onSearch }) {
     new Set(kebabs.flatMap((kebab) => kebab.ordering_options || []))
   );
 
+  const allPages = Array.from(
+    new Set(kebabs.flatMap((kebab) => Object.keys(kebab.pages || {})))
+  );  
+
   const getCurrentTimeDetails = () => {
     const now = new Date();
     const currentHour = now.getHours();
@@ -87,13 +93,22 @@ export default function SearchPanel({ kebabs, onSearch }) {
       applyFilters(searchQuery, selectedSauces, selectedMeats, showOpenNow, sortOrder, updatedOptions);
   };
 
+  const handlePageToggle = (page) => {
+    const updatedPages = selectedPages.includes(page)
+      ? selectedPages.filter((p) => p !== page)
+      : [...selectedPages, page];
+
+    setSelectedPages(updatedPages);
+    applyFilters(searchQuery, selectedSauces, selectedMeats, showOpenNow, sortOrder, selectedOrderingOptions, updatedPages);
+  };
+
   const toggleOpenNow = () => {
     const updatedShowOpenNow = !showOpenNow;
     setShowOpenNow(updatedShowOpenNow);
     applyFilters(searchQuery, selectedSauces, selectedMeats, updatedShowOpenNow, sortOrder);
   };
 
-  const applyFilters = (query, sauces, meats, openNow, order, orderingOptions = []) => {
+  const applyFilters = (query, sauces, meats, openNow, order, orderingOptions = [], pages = []) => {
     let filteredKebabs = kebabs;
 
     if (query) {
@@ -120,11 +135,18 @@ export default function SearchPanel({ kebabs, onSearch }) {
       );
     }
 
+    if (pages.length > 0) {
+      filteredKebabs = filteredKebabs.filter((kebab) =>
+        pages.every((page) => Object.keys(kebab.pages || {}).includes(page))
+      );
+    }
+
     if (openNow) {
       filteredKebabs = filteredKebabs.filter(isOpenNow);
     }
 
-    filteredKebabs = filteredKebabs.sort((a, b) => {
+    filteredKebabs = [...filteredKebabs].sort((a, b) => {
+      if (!a.name || !b.name) return 0;
       if (order === 'asc') {
         return a.name.localeCompare(b.name);
       }
@@ -134,6 +156,18 @@ export default function SearchPanel({ kebabs, onSearch }) {
     onSearch(filteredKebabs);
   };
 
+  const kebabStatusCounts = () => {
+    const statuses = { exists: 0, closed: 0, planned: 0 };
+    kebabs.forEach((kebab) => {
+      if (statuses[kebab.status] !== undefined) {
+        statuses[kebab.status]++;
+      }
+    });
+    return statuses;
+  };
+
+  const { exists, closed, planned } = kebabStatusCounts();
+
   return (
     <div className="bg-white p-4 rounded-lg shadow-md mb-4">
       <input
@@ -143,6 +177,12 @@ export default function SearchPanel({ kebabs, onSearch }) {
         onChange={handleSearchChange}
         className="w-full p-2 border rounded-lg mb-2"
       />
+      <div className="mb-4 flex justify-between items-center bg-gray-100 p-3 rounded-lg shadow-sm">
+        <p className="text-green-600 font-bold">Otwarte: {exists}</p>
+        <p className="text-red-600 font-bold">Zamknięte: {closed}</p>
+        <p className="text-blue-600 font-bold">Planowane: {planned}</p>
+      </div>
+
       <div className="mb-2 text-gray-700 font-medium">Sortowanie po nazwie:</div>
       <div className="flex space-x-2 mb-4">
         <button
@@ -249,6 +289,24 @@ export default function SearchPanel({ kebabs, onSearch }) {
               ))}
             </div>
           </div>
+
+          {/* Strony */}
+          <div className="mb-4">
+            <h3 className="text-gray-700 font-medium mb-2">Strony:</h3>
+            <div className="grid grid-cols-4 gap-y-2 gap-x-4">
+              {allPages.map((page) => (
+                <label key={page} className="flex items-start space-x-2">
+                  <input
+                    type="checkbox"
+                    checked={selectedPages.includes(page)}
+                    onChange={() => handlePageToggle(page)}
+                    className="w-4 h-4"
+                  />
+                  <span className="break-words text-sm capitalize">{page}</span>
+                </label>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </div>

frontend/src/pages/Home.js

@@ -85,7 +85,7 @@ export default function Home() {
           <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-10">
             <button 
               className="bg-oliveGreen text-white py-4 md:py-6 px-8 md:w-40 rounded-lg hover:bg-darkGreen focus:outline-none focus:ring-2 focus:ring-darkGreen text-lg md:text-xl"
-              onClick={() => navigate('/map')}
+              onClick={() => navigate(isLoggedIn ? '/map' : '/map-clone')}
             >
               MAPA
             </button>