Skip to content

pushing updates to map and header #280

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

Merged
CropWatchDevelopment merged 1 commit into from
Jul 3, 2025
Merged

pushing updates to map and header #280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@
--color-pressure: #505055;
--color-battery: #bdca01;

--color-hotpink-400: #f472b6;
--color-silver-400: #c0c0c0;

/* Shadow */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
Expand Down
61 changes: 0 additions & 61 deletions src/lib/components/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,67 +214,6 @@
</div>
</div>

<!-- Mobile Menu -->
{#if mobileMenuOpen}
<div
class="mobile-menu absolute top-full right-0 left-0 z-50 border-t text-slate-200 backdrop-blur-lg transition-colors duration-300 lg:hidden"
>
<div class="space-y-2 p-4">
<a href="/app/dashboard" class="block rounded-lg px-4 py-3 text-slate-200 transition-colors">
{$_('Dashboard')}
</a>
<a
href="#pricing"
class="block rounded-lg px-4 py-3 transition-colors {getDarkMode()
? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
>
{$_('Pricing')}
</a>
<a
href="#devices"
class="block rounded-lg px-4 py-3 transition-colors {getDarkMode()
? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
>
{$_('Devices')}
</a>
<a
href="#resources"
class="block rounded-lg px-4 py-3 transition-colors {getDarkMode()
? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
>
{$_('Resources')}
</a>
<a
href="#about"
class="block rounded-lg px-4 py-3 transition-colors {getDarkMode()
? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
>
{$_('About')}
</a>
<div class="space-y-2 border-t pt-2 {getDarkMode() ? 'border-white/10' : 'border-gray-200'}">
<a
href="/demo"
class="block rounded-lg px-4 py-3 transition-colors {getDarkMode()
? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
>
{$_('Demo')}
</a>
<a
href="/contact-us"
class="block rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 px-4 py-3 text-center font-semibold text-white"
>
{$_('Get Started')}
</a>
</div>
</div>
</div>
{/if}

<style>
@keyframes drift {
0% {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/UI/dashboard/DashboardCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
<Icon class="text-xl text-red-500" path={mdiClose} />
{/if}
</div>
<span class="ml-5 flex flex-auto">{location.name}</span>
<span class="ml-5 flex flex-auto pt-1">{location.name}</span>
<button
class="ml-2 flex inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-blue-200 bg-blue-50 p-0 text-blue-700 transition-colors duration-200 hover:bg-blue-100 dark:border-gray-600 dark:bg-gray-700 dark:text-blue-300 dark:hover:bg-gray-600"
onclick={() => goto(href)}
Expand Down
2 changes: 2 additions & 0 deletions src/lib/components/maps/leaflet/LeafletMap.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@
'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}
).addTo(m);
m.dragging.disable(); // Disable dragging for now
m.touchZoom.disable(); // Disable touch zoom for now

// Add click event listener to the map
m.on('click', (e: LeafletMouseEvent) => {
Expand Down
91 changes: 47 additions & 44 deletions src/lib/csv/CsvDownloadButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,52 +37,55 @@
};
</script>

<Dialog.Root bind:open={modalOpen}>
<Dialog.Trigger asChild>
<Button variant="secondary" loading={false}>{$_('download_csv')}</Button>
</Dialog.Trigger>
<div class="hidden md:flex md:items-center md:justify-end">
<Dialog.Root bind:open={modalOpen}>
<Dialog.Trigger asChild>
<Button variant="secondary" loading={false}>{$_('download_csv')}</Button>
</Dialog.Trigger>

<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 bg-black/50" />
<Dialog.Content
class="fixed top-1/2 left-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded bg-gray-50 p-6 text-zinc-900 shadow-lg dark:bg-zinc-800 dark:text-white"
>
<Dialog.Title class="text-lg font-semibold">{$_('select_date_range')}</Dialog.Title>
<Dialog.Description class="mt-1 text-sm dark:text-gray-400"
>{$_('select_start_end_dates')}</Dialog.Description
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 bg-black/50" />
<Dialog.Content
class="fixed top-1/2 left-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded bg-gray-50 p-6 text-zinc-900 shadow-lg dark:bg-zinc-800 dark:text-white"
>
<Dialog.Title class="text-lg font-semibold">{$_('select_date_range')}</Dialog.Title>
<Dialog.Description class="mt-1 text-sm dark:text-gray-400"
>{$_('select_start_end_dates')}</Dialog.Description
>

<div class="mt-4 space-y-4">
<div>
<label for="start-date" class="mb-1 block text-sm font-medium">{$_('start_date')}</label>
<input
id="start-date"
type="date"
bind:value={startDate}
class="w-full rounded border border-gray-300 px-2 py-1"
/>
</div>
<div>
<label for="end-date" class="mb-1 block text-sm font-medium">{$_('end_date')}</label>
<input
id="end-date"
type="date"
bind:value={endDate}
class="w-full rounded border border-gray-300 px-2 py-1"
/>
<div class="mt-4 space-y-4">
<div>
<label for="start-date" class="mb-1 block text-sm font-medium">{$_('start_date')}</label
>
<input
id="start-date"
type="date"
bind:value={startDate}
class="w-full rounded border border-gray-300 px-2 py-1"
/>
</div>
<div>
<label for="end-date" class="mb-1 block text-sm font-medium">{$_('end_date')}</label>
<input
id="end-date"
type="date"
bind:value={endDate}
class="w-full rounded border border-gray-300 px-2 py-1"
/>
</div>
</div>
</div>

<div class="mt-6 flex justify-end gap-2">
<Button variant="secondary" onclick={() => (modalOpen = false)}>{$_('cancel')}</Button>
<Button
variant="primary"
onclick={() => {
startDownload();
modalOpen = false;
}}>{$_('download_csv')}</Button
>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<div class="mt-6 flex justify-end gap-2">
<Button variant="secondary" onclick={() => (modalOpen = false)}>{$_('cancel')}</Button>
<Button
variant="primary"
onclick={() => {
startDownload();
modalOpen = false;
}}>{$_('download_csv')}</Button
>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</div>
12 changes: 6 additions & 6 deletions src/lib/utilities/stats.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ const colors: Record<string, string> = {
dew_point: 'orange',
dew_pointC: 'orange',
dewPointC: 'orange',
soil_EC: 'violet',
soil_ec: 'violet',
ec: 'violet',
soil_EC: 'green',
soil_ec: 'green',
ec: 'green',
soil_N: 'red',
soil_n: 'red',
soil_nitrogen: 'red',
Expand All @@ -28,8 +28,8 @@ const colors: Record<string, string> = {
soil_K: 'red',
soil_k: 'red',
soil_potassium: 'red',
soil_PH: 'yellow',
ph: 'yellow',
soil_PH: 'purple',
ph: 'purple',
soil_ph: 'yellow',
co2_level: 'purple',
co2: 'purple',
Expand All @@ -53,7 +53,7 @@ const colors: Record<string, string> = {
people_count: 'yellow',
car_count: 'red',
bicycle_count: 'green',
truck_count: 'orange',
truck_count: 'silver',
bus_count: 'blue'
};

Expand Down
11 changes: 8 additions & 3 deletions src/routes/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
color utility to any element that depends on these defaults.
*/
@layer base {

*,
::after,
::before,
Expand All @@ -47,16 +48,19 @@ nav h2 {
h1 {
@apply text-2xl font-extrabold;
}

h2 {
@apply mt-3 text-xl font-bold;
}

h3 {
@apply text-lg font-semibold;
}
}

main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *) {
scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */
scroll-margin-top: calc(var(--headerHeight) + 148px);
/* app header + docs header */
}

main h1:not(.prose *, .related *, .ApiDocs *) {
Expand All @@ -70,7 +74,8 @@ main h2:not(.prose *, .related *, .ApiDocs *) {
main h3:not(.prose *, .related *, .ApiDocs *) {
@apply text-surface-content/50 mb-1 text-xs;
}
main :not(.prose) h2 + h3 {

main :not(.prose) h2+h3 {
@apply -mt-1;
}

Expand Down Expand Up @@ -112,4 +117,4 @@ button {

button:disabled {
@apply cursor-not-allowed;
}
}
6 changes: 4 additions & 2 deletions src/routes/app/dashboard/location/[location_id]/devices/[devEui]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,10 +237,12 @@
</svelte:head>

<Header {device} {basePath}>
<div class="flex flex-wrap items-end gap-4 sm:flex-row-reverse">
<Button variant="secondary" href="{basePath}/settings">{$_('settings')}</Button>
{#snippet controls()}
<CsvDownloadButton {devEui} />
<Button class="invisible" variant="secondary" href="{basePath}/settings">{$_('report')}</Button>
<Button variant="secondary" href="{basePath}/settings">{$_('settings')}</Button>
{/snippet}
<div class="flex flex-wrap items-end gap-4 sm:flex-row-reverse">
<!-- Date range selector -->
<div class="flex flex-wrap items-end gap-2">
<!-- Date inputs -->
Expand Down
10 changes: 7 additions & 3 deletions src/routes/app/dashboard/location/[location_id]/devices/[devEui]/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,21 @@
device: DeviceWithType;
basePath: string;
children?: Snippet;
controls?: Snippet;
};

let { device, basePath, children }: Props = $props();
let { device, basePath, children, controls }: Props = $props();
</script>

<header
class="sticky top-0 z-9999 flex flex-col items-start justify-between gap-4 border-b border-gray-300 p-4 md:flex-row md:items-end dark:border-neutral-400"
style:background-color="var(--color-background)"
>
<h1 class="flex-1 text-2xl font-semibold text-gray-900 lg:text-3xl dark:text-gray-100">
{device.name}
<h1 class="flex w-full flex-1 flex-row items-center gap-4 md:flex-row md:items-end">
<div class="w-full text-2xl font-semibold text-gray-900 lg:text-3xl dark:text-gray-100">
{device.name}
</div>
<div class="flex w-full justify-end">{@render controls?.()}</div>
</h1>
{#if children}
{@render children?.()}
Expand Down
Loading