Skip to content

update photo gallery navbar #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lucifer1998-sudo wants to merge 3 commits into
base: development
Choose a base branch
from
Open

update photo gallery navbar #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3c7692e
update photo gallery navbar
lucifer1998-sudo May 23, 2025
68882d9
Merge branch 'development' of github.com:buildvoc/PIC2BIM into featur…
lucifer1998-sudo May 23, 2025
d35b38f
fixed navbar length
lucifer1998-sudo May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion resources/js/Components/Map/TaskPhoto.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ const TaskPhoto: any = ({ data, onClick }: any) => {
</div>
<div className={styles.marker_image}>
{imageSrc && (
<img className={styles.marker_image_img} src={imageSrc}></img>
<img className={styles.marker_image_img} src={imageSrc}
style={{transform: `rotate(${photo?.angle}deg)`}}
></img>
)}
</div>
<img
Expand Down
6 changes: 4 additions & 2 deletions resources/js/Components/Map/task_photo.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
left: 0;
overflow: hidden;
border-radius: 50%;
Expand All @@ -23,8 +25,8 @@
position: absolute;
-o-object-fit: scale-down;
object-fit: scale-down;
left: 50%;
top: 50%;
/* left: 50%;
top: 50%; */
mask-image: url(/public/icon_photo_mask.png);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
Expand Down
85 changes: 85 additions & 0 deletions resources/js/Components/PhotoGallery/Filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import React, {useState} from 'react';
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
import { Link } from '@inertiajs/react';
interface FilterProps {
isMapVisible?: boolean;
setIsMapVisible?: () => void;
exportToPdf: () => void;
selectAll: () => void;
onDeleteHandler: () => void;
selectAllPdfHandler: () => void;
chooseTask: () => void;
}

const Filter: React.FC<FilterProps> = ({ isMapVisible, setIsMapVisible, exportToPdf, selectAll, onDeleteHandler, selectAllPdfHandler, chooseTask }) => {
//const [isPhotoMap, setPhotoMap] = useState(true);
return (
<div className={`photo-gallery-filter dark:bg-gray-800`}>
<div className={`photo-gallery-filter-container`}>
<div className={`photo-gallery-filter-heading`}>
<h1 className='dark:text-white'>Photo Gallery</h1>
</div>
<div className={`photo-gallery-filter-actions`}>
<Menu as="div" className={`relative inline-block text-left photo-gallery-filter-update-dropdown`}>
<MenuButton className={`photo-gallery-filter-update-dropdown-toggle`}>
<span>
<svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.96484 10.4297L11.3359 8.77734L11.6523 9.16406V11.0273V14.7891C11.6523 15.5273 11.0547 16.125 10.3164 16.125C10.0352 16.125 9.75391 16.0547 9.50781 15.8789L6.625 13.6641C6.27344 13.3828 6.02734 12.9961 6.02734 12.5391V11.0273L1.35156 5.26172C0.964844 4.80469 0.859375 4.13672 1.14062 3.57422C1.38672 3.01172 1.98438 2.625 2.61719 2.625H6.69531C6.80078 3.04688 6.97656 3.39844 7.22266 3.71484L7.71484 4.3125H2.75781L7.71484 10.4297V12.1523L9.96484 14.1211V10.4297ZM23.3242 1.32422C23.6055 1.88672 23.5 2.55469 23.1133 3.01172L18.4023 8.77734V13.6641C18.4023 14.4023 17.8047 15 17.0664 15C16.7852 15 16.5039 14.9297 16.2578 14.7539L13.375 12.5391C13.0234 12.2578 12.7773 11.8711 12.7773 11.4141V8.77734L8.10156 3.01172C7.71484 2.55469 7.60938 1.88672 7.89062 1.32422C8.13672 0.761719 8.73438 0.375 9.36719 0.375H21.8477C22.4805 0.375 23.0781 0.761719 23.3242 1.32422ZM16.7148 8.17969L21.707 2.0625H9.50781L14.4648 8.17969V11.2383L16.7148 12.9961V8.17969Z" fill="white"/>
</svg>
</span>
<span>Update Filter</span>
</MenuButton>
<MenuItems transition className={`photo-gallery-filter-update-dropdown-menu absolute right-0 z-10 origin-top-right transition focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in`}>
<MenuItem>
<button onClick={exportToPdf} type={`button`}>Export To PDF</button>
</MenuItem>
<MenuItem>
<button type={`button`} onClick={selectAllPdfHandler}>Export Selected To PDF</button>
</MenuItem>
</MenuItems>
</Menu>
<Menu as="div" className={`relative inline-block text-left photo-gallery-filter-dropdown`}>
<MenuButton className={`photo-gallery-filter-dropdown-toggle`}>
<span>
<svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.96484 10.4297L11.3359 8.77734L11.6523 9.16406V11.0273V14.7891C11.6523 15.5273 11.0547 16.125 10.3164 16.125C10.0352 16.125 9.75391 16.0547 9.50781 15.8789L6.625 13.6641C6.27344 13.3828 6.02734 12.9961 6.02734 12.5391V11.0273L1.35156 5.26172C0.964844 4.80469 0.859375 4.13672 1.14062 3.57422C1.38672 3.01172 1.98438 2.625 2.61719 2.625H6.69531C6.80078 3.04688 6.97656 3.39844 7.22266 3.71484L7.71484 4.3125H2.75781L7.71484 10.4297V12.1523L9.96484 14.1211V10.4297ZM23.3242 1.32422C23.6055 1.88672 23.5 2.55469 23.1133 3.01172L18.4023 8.77734V13.6641C18.4023 14.4023 17.8047 15 17.0664 15C16.7852 15 16.5039 14.9297 16.2578 14.7539L13.375 12.5391C13.0234 12.2578 12.7773 11.8711 12.7773 11.4141V8.77734L8.10156 3.01172C7.71484 2.55469 7.60938 1.88672 7.89062 1.32422C8.13672 0.761719 8.73438 0.375 9.36719 0.375H21.8477C22.4805 0.375 23.0781 0.761719 23.3242 1.32422ZM16.7148 8.17969L21.707 2.0625H9.50781L14.4648 8.17969V11.2383L16.7148 12.9961V8.17969Z" fill="#4F46E5"/>
</svg>
</span>
<span>Filter</span>
</MenuButton>
<MenuItems transition className={`photo-gallery-filter-dropdown-menu absolute right-0 z-10 origin-top-right transition focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in`}>
<MenuItem>
<button type={`button`} onClick={selectAll}>Select All</button>
</MenuItem>
<MenuItem>
<button type={`button`} onClick={selectAll}>Cancel Selection</button>
</MenuItem>
<MenuItem>
<button className={`delete-item`} type={`button`} onClick={onDeleteHandler}>Delete Selected</button>
</MenuItem>
<MenuItem>
<button type={`button`} onClick={chooseTask}>Choose Task</button>
</MenuItem>
<MenuItem>
<button onClick={exportToPdf} type={`button`}>Export To PDF</button>
</MenuItem>
<MenuItem>
<button type={`button`} onClick={selectAllPdfHandler}>Export Selected To PDF</button>
</MenuItem>
</MenuItems>
</Menu>
{/* <button onClick={setIsMapVisible} className={`photo-gallery-filter-map-switch`} type={`button`}>
<span>
<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.1484 0.679688C15.4492 0.542969 15.75 0.789062 15.75 1.0625V10.5508C15.75 10.9062 15.5312 11.2344 15.1758 11.3438L11.0469 12.793C10.6914 12.9297 10.3086 12.9023 9.95312 12.793L5.25 11.125L0.601562 12.8477C0.273438 12.9844 0 12.7383 0 12.4375V2.97656C0 2.62109 0.21875 2.29297 0.546875 2.15625L4.70312 0.734375C4.86719 0.652344 5.05859 0.625 5.22266 0.625C5.41406 0.625 5.60547 0.679688 5.79688 0.734375L10.5 2.375L15.1484 0.679688ZM6.125 2.23828V10.0586L9.625 11.2891V3.46875L6.125 2.23828ZM1.3125 11.1797L4.78516 9.89453H4.8125V2.07422L1.3125 3.30469V11.1797ZM14.4375 10.2227V2.32031L10.9375 3.60547V3.63281V11.4531L14.4375 10.2227Z" fill="white"/>
</svg>
</span>
<span>{isMapVisible ? 'Hide MAP' : 'Show MAP'}</span>
</button> */}
</div>
</div>
</div>
)
};

export default Filter;
2 changes: 1 addition & 1 deletion resources/js/Layouts/AuthenticatedLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function Authenticated({
return (
<div className="min-h-screen bg-gray-100 dark:bg-gray-900">
<nav className="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto px-2 sm:px-2 lg:px-2">
<div className="flex justify-between h-16">
<div className="flex">
<div className="shrink-0 flex items-center">
Expand Down
41 changes: 33 additions & 8 deletions resources/js/Pages/Farmers/PhotoGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import axios from "axios";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClose } from "@fortawesome/free-solid-svg-icons";
import BackButton from "@/Components/BackButton";
import Filter from "@/Components/PhotoGallery/Filter";

export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
const [selectedTask, setSelectedTask] = useState("");
Expand All @@ -37,9 +38,24 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
split: splitMode ? true : false,
single: splitMode ? false : true,
});


useEffect(() => {
loadData();
}, []);

useEffect(() => {
const tasks_photos_array: Array<TaskPhotos> = [];
for (let item of photo_) {
let tasks_photos_data = {
farmer_name: `${auth.user.name} ${auth.user.surname}`,
photo: item,
location: [item?.lng, item?.lat],
};
tasks_photos_array.push(tasks_photos_data);
}
set_filter_tasks_photos(tasks_photos_array);
}, [photo_]);

function loadData() {
const tasks_photos_array: Array<TaskPhotos> = [];
Expand Down Expand Up @@ -174,6 +190,14 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
}));
};

const exportToPdf = () => {
const queryString = new URLSearchParams({
unassigned: 'true',
total: photos.length.toString()
}).toString();
const exportUrl = route("pdf_preview") + '?' + queryString;
window.open(exportUrl,'_blank')
}

const LeftPane = useCallback (({
photo_,
Expand Down Expand Up @@ -211,7 +235,7 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
</div>
</div>
);
},[splitView.split]);
},[splitView.split, photo_]);


const RightPane = useCallback(
Expand All @@ -238,7 +262,7 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
zoomFilter={handleZoomFilter}
isUnassigned={true}
/>
<div className="flex pt-2 px-2">
{/* <div className="flex pt-2 px-2">
<div className="flex flex-wrap items-center my-2 gap-y-2 dark:text-gray-300 text-lg font-medium">
<button className="focus:outline-none flex items-center border border-indigo-600 text-indigo-600 dark:text-indigo-400 px-4 py-2 rounded-md mr-3"
onClick={selectAll}
Expand Down Expand Up @@ -284,7 +308,7 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
<span>Export Selected To PDF</span>
</button>
</div>
</div>
</div> */}
</div>
</div>
</div>
Expand Down Expand Up @@ -331,15 +355,16 @@ export function PhotoGallery({ auth, photos, splitMode }: PageProps) {
return (
<AuthenticatedLayout
user={auth.user}
header={
<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Photo Gallery
</h2>
}
// header={
// <h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
// Photo Gallery
// </h2>
// }
setSplitView={setSplitView}
splitView={splitView}
>
<Head title="Photo gallery" />
<Filter exportToPdf={exportToPdf} selectAll={selectAll} onDeleteHandler={onDeleteHandler} selectAllPdfHandler={selectAllPdfHandler} chooseTask={chooseTask} />
<BackButton label="Back" className="" />
<div className="flex flex-wrap ">
{splitView.split ? (
Expand Down
1 change: 1 addition & 0 deletions resources/js/types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ export interface GalleryProps{
setPhotos?:any
destroy?:(id:string)=>void
isSplitView?:boolean
setFilterPhotos?: void
}

export interface GalleryModalProps{
Expand Down
4 changes: 4 additions & 0 deletions resources/scss/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
@use "include/common";
@use "include/header";
@use "include/photo_gallery";
@use "include/footer";
5 changes: 5 additions & 0 deletions resources/scss/include/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.site-content{
display: flex;
flex-direction: column;
flex: 1;
}
30 changes: 30 additions & 0 deletions resources/scss/include/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
@use "mixin";
.site-footer{
background-color: white;
margin-top: auto;
padding: 11.5px 16px;
bottom: 0;
position: fixed;
width: 100%;
.site-footer-container{
margin-left: auto;
margin-right: auto;
max-width: 1216px;
width: 100%;
p{
color: #6B7280;
font-size: 14px;
@include mixin.font-figtree-medium;
line-height: calc(17 / 14);
}
}
&.dark-footer{
background-color: #111827;
border-top: 1px solid #374151;
.site-footer-container{
p{
color: #9CA3AF;
}
}
}
}
4 changes: 4 additions & 0 deletions resources/scss/include/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.brand-image{
max-width: 39px;
}

21 changes: 21 additions & 0 deletions resources/scss/include/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@mixin font-figtree-regular{
font-family: "Figtree", sans-serif;
font-weight: 400;
}
@mixin font-figtree-medium{
font-family: "Figtree", sans-serif;
font-weight: 500;
}
@mixin font-figtree-semibold{
font-family: "Figtree", sans-serif;
font-weight: 600;
}
@mixin font-figtree-bold{
font-family: "Figtree", sans-serif;
font-weight: 700;
}
@mixin font-figtree-black{
font-family: "Figtree", sans-serif;
font-weight: 900;
}

Loading