transport toggle on calendar working

.env.development

@@ -11,5 +11,5 @@ TELEGRAM_BOT=true
 SSL_KEY=./certificates/localhost-key.pem
 SSL_CERT=./certificates/localhost.pem
 
-# DATABASE_URL=mysql://root:Zelen0ku4e@192.168.0.10:3306/cart_dev
+DATABASE_URL=mysql://root:Zelen0ku4e@192.168.0.10:3306/cart_dev
-DATABASE_URL=mysql://cart:cartpw@localhost:3306/cart
+# DATABASE_URL=mysql://cart:cartpw@localhost:3306/cart

components/calendar/ShiftComponent.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import axiosInstance from '../../src/axiosSecure';
 import PublisherSearchBox from '../publisher/PublisherSearchBox'; // Update the path
 
+import { DirectionsBus } from '@mui/material'; // Import MUI CircularProgress for loading indicator
+
 const common = require('src/helpers/common');
 
 
@@ -52,10 +54,11 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
     const [useFilterDate, setUseFilterDate] = useState(true);
     const [selectedPublisher, setSelectedPublisher] = useState(null);
     const [showCopyHint, setShowCopyHint] = useState(false);
-
+    const [transportProvided, setTransportProvided] = useState(false);
     // Update assignments when shift changes
     useEffect(() => {
         setAssignments(shift.assignments);
+        setTransportProvided(!shift.requiresTransport || shift.assignments.some(ass => ass.isWithTransport));
     }, [shift.assignments]);
 
     const handleShiftClick = (shiftId) => {
@@ -106,7 +109,7 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
                 publisher: { connect: { id: publisher.id } },
                 shift: { connect: { id: shiftId } },
                 //isactive: true,
-                isConfirmed: true
+                isConfirmed: true,
             };
             const { data } = await axiosInstance.post("/api/data/assignments", newAssignment);
             // Update the 'publisher' property of the returned data with the full publisher object
@@ -124,6 +127,16 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
         setTimeout(() => setShowCopyHint(false), 1500);
     };
 
+    async function toggleTransport(assignment): Promise<void> {
+        try {
+            assignment.isWithTransport = !assignment.isWithTransport;
+            const { data } = await axiosInstance.put("/api/data/assignments/" + assignment.id,
+                { isWithTransport: assignment.isWithTransport })
+                .then(() => {
+                    setTransportProvided(assignments.some(ass => ass.isWithTransport))
+                });
+        } catch (error) { }
+    }
 
 
 
@@ -156,6 +169,7 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
 
                 // Determine border styles
                 let borderStyles = '';
+                let canTransport = false;
                 if (selectedPublisher && selectedPublisher.id === ass.publisher.id) {
                     borderStyles += 'border-2 border-blue-300'; // Bottom border for selected publishers
                 }
@@ -172,10 +186,12 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
                         else {
 
                             // checkig if the publisher is available for this assignment
-                            if (publisherInfo.availabilities?.some(av =>
+                            const av = publisherInfo.availabilities?.find(av =>
-                                av.startTime <= shift.startTime &&
+                                av.startTime <= shift.startTime && av.endTime >= shift.endTime
-                                av.endTime >= shift.endTime)) {
+                            );
+                            if (av) {
                                 borderStyles += 'border-l-2 border-blue-500 '; // Left border for specific availability conditions
+                                ass.canTransport = av.isWithTransportIn || av.isWithTransportOut;
                             }
 
                             if (publisherInfo.hasUpToDateAvailabilities) {
@@ -194,9 +210,6 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
                         }
 
                 }
-                function toggleTransport(id: any): void {
-                    throw new Error('Function not implemented.');
-                }
 
                 return (
                     <div key={index}
@@ -206,13 +219,14 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
                             <span className="text-gray-700">{publisherInfo.firstName} {publisherInfo.lastName}</span>
                             <div className="flex items-left" >
                                 {/* //if shift.isWithTransport, add trnsport button toggle, which sets ass.isWithTransportIn  */}
-                                {shift.requiresTransport &&
+                                {shift.requiresTransport && (
-                                    (
+                                    <span
-                                        <button onClick={() => toggleTransport(ass.id)} className={`text-white hover:bg-orange-600 px-3 py-1 ml-2 rounded-md ${ass.isWithTransport ? 'bg-green-500' : 'bg-orange-500'}`} >
+                                        onClick={ass.canTransport ? () => toggleTransport(ass) : undefined}
-                                            транспорт
+                                        className={`material-icons ${ass.isWithTransport || ass.canTransport ? 'text-green-500 font-bold' : (transportProvided ? 'text-gray-400 ' : 'text-orange-400 font-bold')} ${ass.canTransport ? ' cursor-pointer' : 'cursor-not-allowed'} px-3 py-1 ml-2 rounded-md`}
-                                        </button>
+                                    >
-                                    )
+                                        {ass.isWithTransport ? "транспорт" : ass.canTransport ? "може транспорт" : "без транспорт"}
-                                }
+                                    </span>
+                                )}
                                 <button onClick={() => removeAssignment(ass.id)} className="text-white bg-red-500 hover:bg-red-600 px-3 py-1 ml-2 rounded-md" >
                                     махни
                                 </button>
@@ -257,7 +271,7 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
                     showList={false}
                 />
             </Modal>
-        </div>
+        </div >
     );
 }