ok

2024-10-17 00:15:35 +07:00
parent 4dd12f3835
commit 8f50909e1a
23 changed files with 415 additions and 177 deletions
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -124,7 +124,7 @@ export default function Footer({
      </div>

      {/* Rounded Rectangle with "Scan Meja" and QR Icon */}
-      {showTable && shopId && (
+      {/* {showTable && shopId && (
        <div
          ref={scanMejaRef}
          onClick={table.length == 0 ? goToScan : handleScanMejaClick}
@@ -150,7 +150,7 @@ export default function Footer({
            </button>
          )}
        </div>
-      )}
+      )} */}
    </div>
  );
 }
--- a/src/components/Footer.module.css
+++ b/src/components/Footer.module.css
@@ -3,7 +3,7 @@
 .footer-rect {
  height: 75px;
  background-color: #fff;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-around;
  /* Adjust spacing between SVG icons */
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -301,7 +301,7 @@ const Header = ({
      <Title>
        {shopName == null
          ? HeaderText == null
-            ? "Groovebrew"
+            ? "kedaimaster"
            : HeaderText
          : generateMenuHeader(shopName)}
      </Title>
@@ -331,12 +331,13 @@ const Header = ({
                  Edit profile
                </Child>
              )}
+              {shopId && user.roleId == 1 && (
+                    <Child onClick={goToAdminCafes}>see your {user.userId == shopOwnerId ? 'other' : ''} cafes</Child>)}
              {shopId &&
                user.userId == shopOwnerId &&
                user.username !== undefined &&
                user.roleId === 1 && (
                  <>
-                    <Child onClick={goToAdminCafes}>see your other cafes</Child>

                    {/* <Child onClick={() => setModal("update_stock")}>
                      update stock
@@ -365,7 +366,7 @@ const Header = ({
                      </Child>
                      <Child hasChildren>
                        clerks
-                        <Child onClick={() => setModal("craete_account_clerk")}>
+                        <Child onClick={() => setModal("create_clerk")}>
                          + Add clerk
                        </Child>
                        {shopClerks &&
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -205,11 +205,11 @@ const Item = ({
            <div className={styles.itemQty}>
              <button
                className={styles.addButton}
-                style={{ backgroundColor: !isAvailable ? "gray" : "#4da94d" }}
+                style={{ backgroundColor: !isAvailable ? "gray" : "inherit" }}
                onClick={handlePlusClick}
                disabled={!isAvailable} // Optionally disable the button if not available
              >
-                Tambah
+                Pesan
              </button>
            </div>
          ) : (
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -33,7 +33,7 @@
 .itemImage {
  width: 139px;
  height: 149px;
-  border-radius: 20px;
+  border-radius: 10px;
  margin-right: 10px;
  object-fit: cover;
  position: relative;
@@ -167,17 +167,19 @@
 }

 .addButton {
-  background-color: #04aa6d;
-  border: none;
-  color: white;
-  display: inline-block;
-  font-size: 16px;
-  cursor: pointer;
-  width: 95px;
-  height: 35px;
-  margin-left: 5px;
-  margin-top: 5px;
-  border-radius: 20px;
+  background-color: #ffffff;
+    border: 2px solid #73a585;
+    /* border: none; */
+    color: #73a585;
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    width: 95px;
+    height: 35px;
+    margin-left: 5px;
+    margin-top: 5px;
+    border-radius: 20px;
 }
 .grayscale {
  filter: grayscale(100%);
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -151,6 +151,7 @@ const ItemLister = ({
  const handleImageChange = (previewUrl, selectedImage) => {
    setSelectedImage(selectedImage);
    console.log(selectedImage);
+    console.log(previewUrl);
    setPreviewUrl(previewUrl);
  };

@@ -288,10 +289,13 @@ const ItemLister = ({
          handleCreateItem(itemTypeId, name, price, selectedImage);
        }
      } else {
+        console.log(selectedImage)
+        console.log(previewUrl)
        const itemType = await createItemType(
          shopId,
          editedTypeName,
-          selectedImage
+          selectedImage,
+          previewUrl
        );
        console.log(itemType);
        for (const { name, price, selectedImage } of itemsToCreate) {
@@ -301,6 +305,7 @@ const ItemLister = ({
      // Clear the itemsToUpdate after saving
      setItemsToUpdate([]);
      setIsEditing(false);
+      if (handleUnEdit) handleUnEdit();
    } catch (error) {
      console.error("Failed to save item type:", error);
    }
@@ -503,9 +508,8 @@ const ItemLister = ({
          )}

          <div className={styles["item-list"]}>
-            {user &&
-              user.roleId == 1 &&
-              user.userId == shopOwnerId &&
+            {user &&(
+              user.userId == shopOwnerId || user.cafeId == shopId) &&
              isEditMode && (
                <>
                  {!isAddingNewItem && (
--- a/src/components/ItemLister.module.css
+++ b/src/components/ItemLister.module.css
@@ -1,15 +1,13 @@
 /* ItemLister.module.css */

 .item-lister {
+  border-top: 1px solid #888;
  width: 100%;
  padding: 10px; /* Adjust padding as needed */
  box-sizing: border-box; /* Ensure padding doesn't affect width */
  white-space: break-spaces;
 }

-.item-lister:last-child {
-  margin-bottom: 50px;
-}
 .fullscreen {
  position: fixed; /* Keep the container fixed */
  top: 0; /* Adjust the top position as needed */
@@ -30,6 +28,7 @@
  height: calc(49vw - 20px);
 }

+
 .title-container {
  display: flex;
  align-items: center;
--- a/src/components/ItemTypeLister.js
+++ b/src/components/ItemTypeLister.js
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import smoothScroll from "smooth-scroll-into-view-if-needed";
 import "./ItemTypeLister.css";
 import ItemType from "./ItemType";
-import { createItemType } from "../helpers/itemHelper.js";
+import { createItem, createItemType } from "../helpers/itemHelper.js";
 import { getImageUrl } from "../helpers/itemHelper";
 import ItemLister from "./ItemLister";
 const ItemTypeLister = ({
@@ -98,18 +98,16 @@ const ItemTypeLister = ({
      >
        {isEditMode &&
          !isAddingNewItem &&
-          user &&
-          user.roleId === 1 &&
-          user.userId === shopOwnerId && (
+          user && (
+          user.userId == shopOwnerId || user.cafeId == shopId) && (
            <ItemType
              onClick={toggleAddNewItem}
              name={"create"}
              imageUrl={getImageUrl("uploads/addnew.png")}
            />
          )}
-        {user &&
-          user.roleId === 1 &&
-          user.userId === shopOwnerId &&
+        {user &&(
+          user.userId == shopOwnerId || user.cafeId == shopId) &&
          isAddingNewItem && (
            <>
              <ItemLister
@@ -119,7 +117,7 @@ const ItemTypeLister = ({
                typeName={"add new"}
                itemList={items}
                isEditMode={true}
-                handleCreateItem={handleCreateItem}
+                handleCreateItem={(itemTypeId, name, price, selectedImage) => createItem(shopId, name, price, selectedImage,itemTypeId)}
                beingEditedType={beingEditedType}
                setBeingEditedType={setBeingEditedType}
                alwaysEdit={true}
@@ -137,8 +135,8 @@ const ItemTypeLister = ({
        {itemTypes &&
          itemTypes.map(
            (itemType) =>
-              ((user && user.roleId === 1 && user.userId === shopOwnerId) ||
-                itemType.itemList.length > 0) && (
+              (
+                itemType.itemList.length > 0 || (user &&  (user.userId == shopOwnerId || user.cafeId == shopId))) && (
                <ItemType
                  key={itemType.itemTypeId}
                  name={itemType.name}
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -1,5 +1,6 @@
 import React from "react";
 import styles from "./Modal.module.css";
+import CreateClerk from "../pages/CreateClerk"
 import TablesPage from "./TablesPage.js";
 import PaymentOptions from "./PaymentOptions.js";
 import TableMaps from "../components/TableMaps";
@@ -37,6 +38,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
        </button>
        {modalContent === "req_notification" && <NotificationBlocked />}
        {modalContent === "blocked_notification" && <NotificationBlocked />}
+        {modalContent === "create_clerk" && <CreateClerk shopId={shop.cafeId} />}
        {modalContent === "edit_tables" && <TablesPage shop={shop} />}
        {modalContent === "new_transaction" && (
          <Transaction propsShopId={shop.cafeId} />
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -1,7 +1,7 @@
 .music-player {
  position: relative;
  width: 95%;
-  margin: -10px auto 20px;
+  margin: 7px auto 20px;
  /* Added padding for top and bottom */
  color: white;
  box-sizing: border-box;
@@ -24,7 +24,7 @@
  /* Center the background image */
  filter: blur(1.5px);
  -webkit-filter: blur(1.5px);
-  border-radius: 23px 23px 0 0;
+  border-radius: 13px 13px 0 0;
  background-color: rgb(95 121 89);
  /* Rounded corners at the top */
  text-align: right;
@@ -32,6 +32,8 @@
 }

 .current-name {
+  white-space: nowrap;
+  pointer-events: none;
  position: relative;
  z-index: 2;
  text-align: left;
@@ -41,7 +43,29 @@
  /* Text shadow for readability */
 }

+/* styles.css */
+@keyframes slideAnimation {
+  0% {
+    margin-left: 100vw;
+  }
+  10% {
+    margin-left: 30px;
+  }
+  70% {
+    margin-left: 30px;
+  }
+  100% {
+    margin-left: -100vw;
+  }
+}
+
+.animated-text {
+  animation: slideAnimation 3s linear infinite; /* 4s duration for the animation */
+  white-space: nowrap; /* Prevent text from wrapping */
+}
+
 .current-artist {
+  pointer-events: none;
  position: relative;
  z-index: 2;
  text-align: left;
@@ -52,6 +76,7 @@
 }

 .progress-container {
+  pointer-events: none;
  position: relative;
  z-index: 2;
  text-align: left;
@@ -104,9 +129,10 @@
  position: relative;
  left: 0;
  right: 0;
-  background-color: rgb(29, 185, 84);
+  /* background-color: rgb(29, 185, 84); */
+  background-color: #73a585;
  /* background-color: rgb(218 163 99); */
-  border-radius: 0 0 23px 23px;
+  border-radius: 0 0 13px 13px;
  /* Rounded corners at the bottom */
  cursor: pointer;
  text-align: center;
@@ -134,7 +160,9 @@
  display: flex;
  align-items: center;
  padding: 10px;
-  background-color: rgb(29, 185, 84);
+  /* background-color: rgb(29, 185, 84); */
+  
+  background-color: #73a585;
 }

 .search-box input[type="text"] {
--- a/src/components/MusicPlayer.js
+++ b/src/components/MusicPlayer.js
@@ -6,6 +6,7 @@ import MusicComponent from "./MusicComponent";
 export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
  const [currentTime, setCurrentTime] = useState(0);
  const [trackLength, setTrackLength] = useState(0);
+  const [viewing, setViewing] = useState(false); // State for expansion
  const [expanded, setExpanded] = useState(false); // State for expansion

  const [songName, setSongName] = useState("");
@@ -251,6 +252,9 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
    return `${minutes}:${formattedSeconds}`;
  };

+  const toggleView = () => {
+    setViewing(!viewing);
+  };
  const toggleExpand = () => {
    setExpanded(!expanded);
  };
@@ -263,9 +267,47 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
    }
  }, [expanded]);

+
+  const [text, setText] = useState("Awaiting the next hit");
+  const textIndex = useRef(0);
+  const [messages, setMessages] = useState(["Awaiting the next hit", "Click to request your fav song"]);
+
+
+  useEffect(() => {
+    // Update the messages based on currentSong
+    const newMessages = [
+      currentSong != null && currentSong.item != undefined
+        ? `${currentSong.item.artists[0].name} - ${currentSong.item.name}`
+        : "Awaiting the next hit",
+      "Click to request your fav song"
+    ];
+
+    setMessages(newMessages);
+    setText(newMessages[0]); // Update the text state to the first message
+
+    const element = document.querySelector('.animated-text');
+
+    // Check if the element exists before adding the event listener
+    if (element) {
+      const handleAnimationIteration = () => {
+        // Toggle between the two text values based on the current index
+        textIndex.current = (textIndex.current + 1) % messages.length;
+        setText(messages[textIndex.current]);
+      };
+
+      element.addEventListener('animationiteration', handleAnimationIteration);
+
+      return () => {
+        element.removeEventListener('animationiteration', handleAnimationIteration);
+      };
+    }
+  }, [currentSong]); // Run effect when currentSong changes
+
+
  return (
-    <div className={`music-player ${expanded ? "expanded" : ""}`}>
+    <div className={`music-player`}  style={{ marginBottom: `${viewing? '-10px' : ''}` }}>
      <div
+       onClick={toggleView}
        className="current-bgr"
        style={{ backgroundImage: `url(${backgroundImage})` }}
      >
@@ -286,44 +328,50 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
        ))}
      </div>

-      <div className="current-info">
-        <div className="current-name">
+      <div className="current-info" >
+        <div 
+      className={`current-name ${viewing? '' : 'animated-text'}`} style={{margin:`${viewing? '35px 30px' : '13px 30px'}`}}>
          {currentSong.item && currentSong.item.name
-            ? currentSong.item.name
-            : "Awaiting the next hit"}
+            ? (viewing? currentSong.item.name:text)
+            : 
+            viewing? messages[0]:text}
        </div>
-        <div className="current-artist">
-          {currentSong.item &&
-          currentSong.item.album &&
-          currentSong.item.album.images[0] &&
-          currentSong.item.artists[0].name
-            ? currentSong.item.artists[0].name
-            : "Drop your hits below"}
-        </div>
-        <div className="progress-container">
-          <div
-            className="current-time"
-            style={{ visibility: currentSong.item ? "visible" : "hidden" }}
-          >
-            {formatTime(currentTime)}
+        {viewing && <>
+          <div className="current-artist">
+            {currentSong.item &&
+              currentSong.item.album &&
+              currentSong.item.album.images[0] &&
+              currentSong.item.artists[0].name
+              ? currentSong.item.artists[0].name
+              : "Drop your hits below"}
          </div>
-          <input
-            type="range"
-            min="0"
-            max={trackLength}
-            value={currentTime}
-            className="progress-bar"
-            style={{ visibility: currentSong.item ? "visible" : "hidden" }}
-            disabled
-          />
-          <div
-            className="track-length"
-            style={{ visibility: currentSong.item ? "visible" : "hidden" }}
-          >
-            {formatTime(trackLength)}
-          </div>
-        </div>
+          <div className="progress-container">
+            <div
+              className="current-time"
+              style={{ visibility: currentSong.item ? "visible" : "hidden" }}
+            >
+              {formatTime(currentTime)}
+            </div>
+            <input
+              type="range"
+              min="0"
+              max={trackLength}
+              value={currentTime}
+              className="progress-bar"
+              style={{ visibility: currentSong.item ? "visible" : "hidden" }}
+              disabled
+            />
+            <div
+              className="track-length"
+              style={{ visibility: currentSong.item ? "visible" : "hidden" }}
+            >
+              {formatTime(trackLength)}
+            </div>
+          </div></>
+        }
      </div>
+      {viewing &&
+      <>
      <div
        className={`expandable-container ${expanded ? "expanded" : ""}`}
        ref={expandableContainerRef}
@@ -390,15 +438,16 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
      <div className="expand-button" onClick={toggleExpand}>
        <h5>
          {expanded
-            ? "collapse"
+            ? "︿"
            : currentSong.item &&
-                currentSong.item.album &&
-                currentSong.item.album.images[0] &&
-                currentSong.item.artists[0]
+              currentSong.item.album &&
+              currentSong.item.album.images[0] &&
+              currentSong.item.artists[0]
              ? "expand"
              : "request your song"}
        </h5>
-      </div>
+      </div></>
+}
    </div>
  );
 }
--- a/src/components/TableList.js
+++ b/src/components/TableList.js
@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, {useState} from "react";
 import QRCodeWithBackground from "./QR"; // Adjust path as needed
-const TableList = ({ shop, tables, onSelectTable, selectedTable }) => {
+
+const TableList = ({ shop, tables, onSelectTable, selectedTable, handleSetTableNo, handleAddTable }) => {
  const [initialPos, setInitialPos] = useState({
    left: shop.xposition,
    top: shop.yposition,
@@ -21,16 +22,16 @@ const TableList = ({ shop, tables, onSelectTable, selectedTable }) => {
    }
  };

-  const handleBackgroundUrlChange = (newUrl) => {
-    setBgImageUrl(newUrl);
-  };
-
  const handleQrSave = (qrPosition, qrSize, bgImage) => {
    setInitialPos(qrPosition);
    setInitialSize(qrSize);
    setBgImageUrl(bgImage);
  };

+  const handleCreateTable = () => {
+    handleAddTable();
+  };
+
  return (
    <div
      style={{
@@ -71,6 +72,43 @@ const TableList = ({ shop, tables, onSelectTable, selectedTable }) => {
            />
          )}
        </li>
+        {/* Add new table input */}
+        <li
+          style={{
+            backgroundColor: "lightgreen",
+            marginBottom: "10px",
+            padding: "10px",
+            borderRadius: "4px",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          }}
+        >
+          <input
+            type="text"
+            placeholder="Enter table number"
+            onChange={handleSetTableNo} // Directly using the parent function
+            style={{
+              width: "100%",
+              padding: "8px",
+              marginBottom: "10px",
+              borderRadius: "4px",
+              border: "1px solid #ccc",
+            }}
+          />
+          <button
+            onClick={handleCreateTable}
+            style={{
+              width: "100%",
+              padding: "10px",
+              backgroundColor: "#28a745",
+              color: "white",
+              borderRadius: "4px",
+              border: "none",
+              cursor: "pointer",
+            }}
+          >
+            Add Table
+          </button>
+        </li>
        {tables &&
          tables
            .filter((table) => table.tableNo !== 0)
--- a/src/components/TablesPage.js
+++ b/src/components/TablesPage.js
@@ -130,10 +130,10 @@ const TablesPage = ({ shop }) => {
  };

  const handleSave = async () => {
-    if (newTable) {
+    // if (newTable) {
      try {
        const createdTable = await createTable(shop.cafeId, {
-          ...newTable,
+          // ...newTable,
          tableNo,
        });
        setTables([...tables, createdTable]);
@@ -143,28 +143,28 @@ const TablesPage = ({ shop }) => {
      } catch (error) {
        console.error("Error creating table:", error);
      }
-    } else if (selectedTable) {
-      try {
-        const updatedTable = await updateTable(shop.cafeId, {
-          ...selectedTable,
-          tableNo,
-        });
-        setTables(
-          tables.map((table) =>
-            table.tableId === updatedTable.tableId ? updatedTable : table
-          )
-        );
-        setOriginalTables(
-          tables.map((table) =>
-            table.tableId === updatedTable.tableId ? updatedTable : table
-          )
-        );
-        setSelectedTable(null);
-        setTableNo(""); // Reset table name
-      } catch (error) {
-        console.error("Error updating table:", error);
-      }
-    }
+    // } else if (selectedTable) {
+    //   try {
+    //     const updatedTable = await updateTable(shop.cafeId, {
+    //       ...selectedTable,
+    //       tableNo,
+    //     });
+    //     setTables(
+    //       tables.map((table) =>
+    //         table.tableId === updatedTable.tableId ? updatedTable : table
+    //       )
+    //     );
+    //     setOriginalTables(
+    //       tables.map((table) =>
+    //         table.tableId === updatedTable.tableId ? updatedTable : table
+    //       )
+    //     );
+    //     setSelectedTable(null);
+    //     setTableNo(""); // Reset table name
+    //   } catch (error) {
+    //     console.error("Error updating table:", error);
+    //   }
+    // }
  };

  const handleSetTableNo = (event) => {
@@ -207,6 +207,8 @@ const TablesPage = ({ shop }) => {
        tables={tables}
        onSelectTable={handleSelect}
        selectedTable={selectedTable}
+        handleSetTableNo={handleSetTableNo}
+        handleAddTable={handleSave}
      />
    </div>
  );