francescoalbano/tripweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Dark mode

Browse Source
This commit is contained in:
itskovacs 2025-07-25 18:33:39 +02:00
parent 6997e765db
commit 6128678678
8 changed files with 128 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/trip/__init__.py
View File

@ -1 +1 @@
__version__ = "1.7.3"
__version__ = "1.8.0"

2
src/src/app/app.component.html
View File

@ -1,2 +1,2 @@
<router-outlet></router-outlet>
<p-toast [preventDuplicates]="true" />
<p-toast [preventOpenDuplicates]="true" />

59
src/src/app/components/dashboard/dashboard.component.html
View File

@ -6,16 +6,17 @@
(closeEmitter)="closePlaceBox()"></app-place-box>
}
<div class="absolute z-30 top-2 right-2 p-2 bg-white shadow rounded">
<div class="absolute z-30 top-2 right-2 p-2 bg-white shadow rounded dark:bg-surface-900">
<p-button (click)="toggleMarkersList()" text severity="secondary" icon="pi pi-map-marker" />
</div>
<div class="absolute z-30 top-20 right-2 p-2 bg-white shadow rounded">
<div class="absolute z-30 top-20 right-2 p-2 bg-white shadow rounded dark:bg-surface-900">
<p-button (click)="toggleFilters()" text [severity]="viewFilters ? 'danger' : 'secondary'"
[icon]="viewFilters ? 'pi pi-times' : 'pi pi-filter'" />
</div>
<div [class.z-50]="viewSettings" class="absolute z-30 top-[9.5rem] right-2 p-2 bg-white shadow rounded">
<div [class.z-50]="viewSettings"
class="absolute z-30 top-[9.5rem] right-2 p-2 bg-white shadow rounded dark:bg-surface-900">
<p-button (click)="toggleSettings()" text [severity]="viewSettings ? 'danger' : 'secondary'"
[icon]="viewSettings ? 'pi pi-times' : 'pi pi-cog'" />
</div>
@ -23,23 +24,23 @@
<div class="absolute z-30 bottom-4 right-2">
<div class="relative group flex flex-col-reverse items-end h-28">
<div
class="absolute right-0 bottom-20 p-2 bg-white shadow rounded transition-all duration-200 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
class="absolute right-0 bottom-20 p-2 bg-white shadow rounded transition-all duration-200 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto dark:bg-surface-900">
<p-button (click)="batchAddModal()" text severity="secondary" icon="pi pi-ellipsis-v" />
</div>
<div class="p-2 bg-white shadow rounded">
<div class="p-2 bg-white shadow rounded dark:bg-surface-900">
<p-button (click)="addPlaceModal()" text severity="secondary" icon="pi pi-plus" />
</div>
</div>
</div>
<div class="absolute z-30 top-2 left-2 p-2 bg-white shadow rounded">
<div class="absolute z-30 top-2 left-2 p-2 bg-white shadow rounded dark:bg-surface-900">
<p-button (click)="gotoTrips()" label="Trips" severity="secondary" text icon="pi pi-bars" />
</div>
@if (viewMarkersList) {
<section
class="absolute left-2 right-2 top-4 bottom-4 md:max-w-md bg-white z-40 rounded-xl shadow-2xl p-4 flex flex-col">
class="absolute left-2 right-2 top-4 bottom-4 md:max-w-md bg-white z-40 rounded-xl shadow-2xl p-4 flex flex-col dark:bg-surface-900">
<div class="mt-1 p-4 flex items-center justify-between">
<div>
<h1 class="font-semibold tracking-tight text-xl">Points</h1>
@ -63,31 +64,32 @@
}
@for (p of visiblePlaces; track p.id) {
<div class="mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4"
<div
class="mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4 dark:hover:bg-gray-800"
(click)="gotoPlace(p)" (mouseenter)="hoverPlace(p)" (mouseleave)="resetHoverPlace()">
<img [src]="p.image || p.category.image" class="w-12 rounded-full object-fit">
<div class="flex flex-col gap-1 truncate">
<h1 class="tracking-tight truncate">{{ p.name }}</h1>
<h1 class="tracking-tight truncate dark:text-surface-300">{{ p.name }}</h1>
<span class="text-xs text-gray-500 truncate">{{ p.place }}</span>
<div class="flex gap-0.5">
@if (p.allowdog) {
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded">🐶</span>
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85">🐶</span>
} @else {
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded">🐶</span>
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85">🐶</span>
}
@if (p.visited) {
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded"><i
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85"><i
class="pi pi-eye text-xs"></i></span>
} @else {
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded"><i
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85"><i
class="pi pi-eye-slash text-xs"></i></span>
}
<span
class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate"><i
class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate dark:bg-blue-100/85"><i
class="pi pi-box text-xs"></i>{{ p.category.name }}</span>
</div>
</div>
@ -103,7 +105,8 @@
}
@if (viewFilters) {
<section class="absolute right-2 top-36 bg-white z-40 rounded-xl shadow-2xl p-8 max-w-screen md:max-w-md">
<section
class="absolute right-2 top-36 bg-white z-40 rounded-xl shadow-2xl p-8 max-w-screen md:max-w-md dark:bg-surface-900">
<div class="mt-1 flex justify-between items-center">
<div>
@ -149,7 +152,8 @@
@if (viewSettings) {
<section class="absolute inset-0 flex items-center justify-center z-40 bg-black/30">
<div class="w-10/12 max-w-screen md:max-w-3xl h-fit max-h-screen bg-white rounded-xl shadow-2xl p-8 z-50">
<div
class="w-10/12 max-w-screen md:max-w-3xl h-fit max-h-screen bg-white rounded-xl shadow-2xl p-8 z-50 dark:bg-surface-900">
<p-tabs value="0" scrollable>
<p-tablist>
<p-tab value="0" class="flex items-center gap-2">
@ -169,7 +173,8 @@
<p-tabpanel value="0">
<div class="mt-4">
<h1 class="font-semibold tracking-tight text-xl">Low Network Mode</h1>
<span class="text-xs text-gray-500">You can disable Low Network Mode. Default is true. Display Category
<span class="text-xs text-gray-500 dark:text-gray-400">You can disable Low Network Mode. Default is true.
Display Category
image instead of Place image.</span>
</div>
<div class="mt-4 flex justify-between">
@ -177,11 +182,20 @@
<p-toggleswitch [(ngModel)]="isLowNet" (onChange)="toggleLowNet()" />
</div>
<div class="mt-4">
<h1 class="font-semibold tracking-tight text-xl">Dark Mode</h1>
</div>
<div class="mt-4 flex justify-between">
<div>Enable Dark mode</div>
<p-toggleswitch [(ngModel)]="isDarkMode" (onChange)="toggleDarkMode()" />
</div>
<section [formGroup]="settingsForm">
<div class="mt-4 flex justify-between items-center">
<div>
<h1 class="font-semibold tracking-tight text-xl">Map parameters</h1>
<span class="text-xs text-gray-500">You can customize the default view on map loading</span>
<span class="text-xs text-gray-500 dark:text-gray-400">You can customize the default view on map
loading</span>
</div>
<p-button icon="pi pi-ethereum" pTooltip="Set current map center as default"
@ -213,7 +227,8 @@
<div class="mt-4">
<h1 class="font-semibold tracking-tight text-xl">Filters</h1>
<span class="text-xs text-gray-500">You can customize the categories to hide by default</span>
<span class="text-xs text-gray-500 dark:text-gray-400">You can customize the categories to hide by
default</span>
</div>
<div class="mt-4">
<p-floatlabel variant="in" class="md:col-span-2">
@ -234,7 +249,7 @@
<div class="mt-1 p-2 mb-2 flex justify-between items-center">
<div>
<h1 class="font-semibold tracking-tight text-xl">Categories</h1>
<span class="text-xs text-gray-500">You can modify the categories.</span>
<span class="text-xs text-gray-500 dark:text-gray-400">You can modify the categories.</span>
<span class="ml-1 text-xs text-orange-500">You cannot delete a used category.</span>
</div>
@ -243,7 +258,7 @@
<div class="mt-4 flex flex-col">
@for (category of categories; track category.id) {
<div class="p-3 flex items-center justify-between rounded-md hover:bg-gray-50">
<div class="p-3 flex items-center justify-between rounded-md hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex items-center gap-2">
<img [src]="category.image" class="size-8 rounded-full" />{{ category.name }}
</div>
@ -297,7 +312,7 @@
}
</div>
<div class="mt-4 text-center text-sm text-gray-500">Made with ❤️ in BZH</div>
<div class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">Made with ❤️ in BZH</div>
</p-tabpanel>
</p-tabpanels>
</p-tabs>

8
src/src/app/components/dashboard/dashboard.component.ts
View File

@ -79,6 +79,7 @@ export class DashboardComponent implements AfterViewInit {
searchInput = new FormControl("");
info: Info | undefined;
isLowNet: boolean = false;
isDarkMode: boolean = false;
viewSettings = false;
viewFilters = false;
@ -113,6 +114,7 @@ export class DashboardComponent implements AfterViewInit {
) {
this.currencySigns = this.utilsService.currencySigns();
this.isLowNet = this.utilsService.isLowNet;
this.isDarkMode = this.utilsService.isDarkMode;
this.settingsForm = this.fb.group({
mapLat: [
@ -253,6 +255,10 @@ export class DashboardComponent implements AfterViewInit {
}, 200);
}
toggleDarkMode() {
this.utilsService.toggleDarkMode();
}
get filteredPlaces(): Place[] {
return this.places.filter((p) => {
if (!this.filter_display_visited && p.visited) return false;
@ -571,6 +577,8 @@ export class DashboardComponent implements AfterViewInit {
}
toggleMarkersList() {
this.searchInput.setValue("");
this.viewMarkersListSearch = false;
this.viewMarkersList = !this.viewMarkersList;
if (this.viewMarkersList) this.setVisibleMarkers();
}

54
src/src/app/components/trip/trip.component.html
View File

@ -27,7 +27,8 @@
</div>
}
<span class="bg-gray-100 text-gray-800 text-xs md:text-sm font-medium me-2 px-2.5 py-0.5 rounded min-w-fit">{{
<span
class="bg-gray-100 text-gray-800 text-xs md:text-sm font-medium me-2 px-2.5 py-0.5 rounded min-w-fit dark:bg-gray-400">{{
totalPrice
|| '-' }} {{ currency$ | async }}</span>
</div>
@ -45,8 +46,9 @@
}
<section class="p-4 print:px-1 grid md:grid-cols-3 gap-4 print:block">
<div class="p-4 shadow self-start rounded-md md:col-span-2 max-w-screen print:col-span-full">
<div [class.sticky]="!isMapFullscreen"
class="top-0 z-10 bg-white p-2 mb-2 flex justify-between items-center">
class="top-0 z-10 bg-white p-2 mb-2 flex justify-between items-center dark:bg-surface-900">
<div>
<h1 class="font-semibold tracking-tight text-xl">Plans</h1>
<span class="text-xs text-gray-500 line-clamp-1">{{ trip?.name }} plans</span>
@ -99,7 +101,7 @@
</div>
} @else {-}
</td>
<td class="max-w-20 truncate print:whitespace-normal">{{ tripitem.comment || '-' }}</td>
<td class="max-w-20 truncate print:whitespace-pre-line">{{ tripitem.comment || '-' }}</td>
<td class="font-mono text-sm">
<div class="max-w-20 print:max-w-full truncate">
@if (tripitem.lat) { {{ tripitem.lat }}, {{ tripitem.lng }} }
@ -231,7 +233,7 @@
</div>
</div>
<div id="map" [class.fullscreen-map]="isMapFullscreen" class="w-full rounded-md min-h-96 h-1/3 max-h-full z-20">
<div id="map" [class.fullscreen-map]="isMapFullscreen" class="w-full rounded-md min-h-96 h-1/3 max-h-full">
</div>
</div>
@ -242,7 +244,8 @@
<h1 class="font-semibold tracking-tight text-xl">Places</h1>
<span class="text-xs text-gray-500 line-clamp-1">{{ trip?.name }} places</span>
<div class="bg-white rounded py-2 absolute top-1/2 -translate-y-1/2 left-0 hidden group-hover:block slide-x">
<div
class="bg-white rounded py-2 absolute top-1/2 -translate-y-1/2 left-0 hidden group-hover:block slide-x dark:bg-surface-900">
<p-button [icon]="collapsedTripPlaces ? 'pi pi-chevron-down' : 'pi pi-chevron-up'" text
(click)="collapsedTripPlaces = !collapsedTripPlaces" />
</div>
@ -250,7 +253,8 @@
<div class="flex items-center">
@defer {
<span class="bg-blue-100 text-blue-800 text-sm me-2 px-2.5 py-0.5 rounded-md">{{ places.length }}</span>
<span class="bg-blue-100 text-blue-800 text-sm me-2 px-2.5 py-0.5 rounded-md dark:bg-blue-100/85">{{
places.length }}</span>
} @placeholder (minimum 0.4s) {
<p-skeleton height="1.75rem" width="2.5rem" class="mr-1" />
}
@ -262,28 +266,30 @@
<div class="max-h-[25vh] overflow-y-auto">
@defer {
@for (p of places; track p.id) {
<div class="flex items-center gap-4 py-2 px-4 hover:bg-gray-50 rounded-md overflow-auto"
<div class="flex items-center gap-4 py-2 px-4 hover:bg-gray-50 rounded-md overflow-auto dark:hover:bg-gray-800"
(mouseenter)="placeHighlightMarker(p.lat, p.lng)" (mouseleave)="resetPlaceHighlightMarker()">
<img [src]="p.image || p.category.image" class="w-12 rounded-full object-fit">
<div class="flex flex-col gap-1 truncate">
<h1 class="tracking-tight truncate">{{ p.name }}</h1>
<h1 class="tracking-tight truncate dark:text-surface-300">{{ p.name }}</h1>
<span class="text-xs text-gray-500 truncate">{{ p.place }}</span>
<div class="flex gap-0.5">
<span
class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate"><i
class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate dark:bg-blue-100/85"><i
class="pi pi-box text-xs"></i>{{ p.category.name }}</span>
@if (isPlaceUsed(p.id)) {
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded"><i
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85"><i
class="pi pi-check-square text-xs"></i></span>
} @else {
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded"><i
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85"><i
class="pi pi-map-marker text-xs"></i></span>
}
<span class="bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded">{{ p.price || '-'
<span
class="bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-100/85">{{
p.price || '-'
}} {{ currency$ | async }}</span>
</div>
@ -311,7 +317,8 @@
<h1 class="font-semibold tracking-tight text-xl">Days</h1>
<span class="text-xs text-gray-500 line-clamp-1">{{ trip?.name }} days</span>
<div class="bg-white rounded py-2 absolute top-1/2 -translate-y-1/2 left-0 hidden group-hover:block slide-x">
<div
class="bg-white rounded py-2 absolute top-1/2 -translate-y-1/2 left-0 hidden group-hover:block slide-x dark:bg-surface-900">
<p-button [icon]="collapsedTripDays ? 'pi pi-chevron-down' : 'pi pi-chevron-up'" text
(click)="collapsedTripDays = !collapsedTripDays" />
</div>
@ -325,14 +332,16 @@
@defer {
@for (d of trip?.days; track d.id) {
<div
class="group flex items-center gap-4 rounded-md justify-between h-10 px-4 py-2 hover:bg-gray-50 w-full max-w-full">
<div class="line-clamp-1">
class="group flex items-center gap-4 rounded-md justify-between h-10 px-4 py-2 hover:bg-gray-50 w-full max-w-full dark:hover:bg-gray-800">
<div class="line-clamp-1 dark:text-surface-300">
{{ d.label }}
</div>
<div class="flex items-center gap-2 flex-none">
<span class="bg-gray-100 text-gray-800 text-sm px-2.5 py-0.5 rounded-md min-w-fit group-hover:hidden">{{
<span
class="bg-gray-100 text-gray-800 text-sm px-2.5 py-0.5 rounded-md min-w-fit group-hover:hidden dark:bg-gray-100/85">{{
getDayStats(d).price || '-' }} {{ currency$ | async }}</span>
<span class="bg-blue-100 text-blue-800 text-sm px-2.5 py-0.5 rounded-md group-hover:hidden">{{
<span
class="bg-blue-100 text-blue-800 text-sm px-2.5 py-0.5 rounded-md group-hover:hidden dark:bg-blue-100/85">{{
getDayStats(d).places }}</span>
<div class="flex md:hidden">
@ -364,7 +373,8 @@
<h1 class="font-semibold tracking-tight text-xl">Watchlist</h1>
<span class="text-xs text-gray-500 line-clamp-1">{{ trip?.name }} pending/constraints</span>
<div class="bg-white rounded py-2 absolute top-1/2 -translate-y-1/2 left-0 hidden group-hover:block slide-x">
<div
class="bg-white rounded py-2 absolute top-1/2 -translate-y-1/2 left-0 hidden group-hover:block slide-x dark:bg-surface-900">
<p-button [icon]="collapsedTripStatuses ? 'pi pi-chevron-down' : 'pi pi-chevron-up'" text
(click)="collapsedTripStatuses = !collapsedTripStatuses" />
</div>
@ -401,12 +411,12 @@
<p-menu #menuTripDayActions [model]="menuTripDayActionsItems" appendTo="body" [popup]="true" />
@if (isMapFullscreen) {
<div class="absolute z-30 top-2 right-2 p-2 bg-white shadow rounded">
<p-button (click)="toggleMapFullscreen()" text icon="pi pi-window-minimize" />
<div class="fixed top-2 right-2 p-2 bg-white shadow rounded dark:bg-surface-900">
<p-button (click)="toggleMapFullscreen()" severity="secondary" text icon="pi pi-window-minimize" />
</div>
<div class="absolute z-30 top-20 right-2 p-2 bg-white shadow rounded">
<div class="fixed top-20 right-2 p-2 bg-white shadow rounded dark:bg-surface-900">
<p-button (click)="toggleTripDaysHighlight()" text icon="pi pi-directions"
[severity]="tripMapAntLayerDayID == -1 ? 'help' : 'primary'" />
[severity]="tripMapAntLayerDayID == -1 ? 'help' : 'secondary'" />
</div>
}

37
src/src/app/modals/trip-place-select-modal/trip-place-select-modal.component.html
View File

@ -11,7 +11,8 @@
<div class="flex flex-col">
<div class="flex items-center gap-2">
<h1 class="font-semibold tracking-tight text-xl">Selected</h1>
<span class="bg-blue-100 text-blue-800 text-sm me-2 px-2.5 py-0.5 rounded"> {{ selectedPlaces.length }}</span>
<span class="bg-blue-100 text-blue-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-blue-100/85"> {{
selectedPlaces.length }}</span>
</div>
<span class="text-xs text-gray-500">Here are your selected place{{ selectedPlaces.length > 1 ? 's' : ''
}}</span>
@ -22,31 +23,32 @@
</div>
@if (showSelectedPlaces) {
@for (p of selectedPlaces; track p.id) {
<div class="mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4"
<div
class="mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4 dark:hover:bg-gray-800"
(click)="togglePlace(p)">
<img [src]="p.image || p.category.image" class="w-12 rounded-full object-fit">
<div class="flex flex-col gap-1 truncate">
<h1 class="tracking-tight truncate">{{ p.name }}</h1>
<h1 class="tracking-tight truncate dark:text-surface-300">{{ p.name }}</h1>
<span class="text-xs text-gray-500 truncate">{{ p.place }}</span>
<div class="flex gap-0.5">
@if (p.allowdog) {
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded">🐶</span>
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85">🐶</span>
} @else {
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded">🐶</span>
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85">🐶</span>
}
@if (p.visited) {
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded"><i
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85"><i
class="pi pi-eye text-xs"></i></span>
} @else {
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded"><i
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85"><i
class="pi pi-eye-slash text-xs"></i></span>
}
<span
class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate"><i
class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate dark:bg-blue-100/85"><i
class="pi pi-box text-xs"></i>{{ p.category.name }}</span>
</div>
</div>
@ -60,29 +62,30 @@
@defer {
@for (p of displayedPlaces; track p.id) {
<div class="mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4"
<div
class="mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4 dark:hover:bg-gray-800"
[class.font-bold]="selectedPlacesID.includes(p.id)" (click)="togglePlace(p)">
<div class="flex flex-col gap-1 truncate">
<h1 class="tracking-tight truncate">{{ p.name }}</h1>
<h1 class="tracking-tight truncate dark:text-surface-300">{{ p.name }}</h1>
<span class="text-xs text-gray-500 truncate">{{ p.place }}</span>
<div class="flex gap-0.5">
@if (p.allowdog) {
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded">🐶</span>
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85">🐶</span>
} @else {
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded">🐶</span>
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85">🐶</span>
}
@if (p.visited) {
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded"><i
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85"><i
class="pi pi-eye text-xs"></i></span>
} @else {
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded"><i
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85"><i
class="pi pi-eye-slash text-xs"></i></span>
}
<span
class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate"><i
class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate dark:bg-blue-100/85"><i
class="pi pi-box text-xs"></i>{{ p.category.name }}</span>
</div>
</div>
@ -93,8 +96,8 @@
</div>
}
<div class="z-50 absolute w-full bg-white shadow p-4 bottom-0 left-0 text-center">
<p-button (click)="closeDialog()" label="Confirm" />
<div class="z-50 absolute w-full bg-white shadow p-4 bottom-0 left-0 text-center dark:bg-surface-900">
<p-button (click)="closeDialog()" label="Confirm" severity="secondary" />
</div>
} @placeholder (minimum 0.4s) {
<div class="my-2">

20
src/src/app/services/utils.service.ts
View File

@ -5,6 +5,7 @@ import { ApiService } from "./api.service";
import { map } from "rxjs";
const DISABLE_LOWNET = "TRIP_DISABLE_LOWNET";
const DARK = "DARKMODE";
@Injectable({
providedIn: "root",
@ -13,9 +14,12 @@ export class UtilsService {
private apiService = inject(ApiService);
currency$ = this.apiService.settings$.pipe(map((s) => s?.currency ?? "€"));
public isLowNet: boolean = true;
public isDarkMode: boolean = false;
constructor(private ngMessageService: MessageService) {
this.isLowNet = !localStorage.getItem(DISABLE_LOWNET);
this.isDarkMode = !!localStorage.getItem(DARK);
if (this.isDarkMode) this.renderDarkMode();
}
toGithubTRIP() {
@ -31,6 +35,22 @@ export class UtilsService {
this.isLowNet = !this.isLowNet;
}
renderDarkMode() {
const element = document.querySelector("html");
element?.classList.toggle("dark");
}
toggleDarkMode() {
if (this.isDarkMode) {
localStorage.removeItem(DARK);
this.isDarkMode = false;
} else {
localStorage.setItem(DARK, "1");
this.isDarkMode = true;
}
this.renderDarkMode();
}
get statuses(): TripStatus[] {
return [
{ label: "pending", color: "#3258A8" },

9
src/tailwind.config.js
View File

@ -1,10 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
darkMode: "selector",
content: ["./src/**/*.{html,ts}"],
theme: {
extend: {},
},
plugins: [require('tailwindcss-primeui')]
}
plugins: [require("tailwindcss-primeui")],
};