diff --git a/src/src/app/modals/category-create-modal/category-create-modal.component.ts b/src/src/app/modals/category-create-modal/category-create-modal.component.ts
index 2841efa..9a196e7 100644
--- a/src/src/app/modals/category-create-modal/category-create-modal.component.ts
+++ b/src/src/app/modals/category-create-modal/category-create-modal.component.ts
@@ -10,6 +10,7 @@ import { DynamicDialogConfig, DynamicDialogRef } from "primeng/dynamicdialog";
import { FloatLabelModule } from "primeng/floatlabel";
import { InputTextModule } from "primeng/inputtext";
import { FocusTrapModule } from "primeng/focustrap";
+import { ColorPickerModule } from "primeng/colorpicker";
@Component({
selector: "app-category-create-modal",
@@ -17,6 +18,7 @@ import { FocusTrapModule } from "primeng/focustrap";
FloatLabelModule,
InputTextModule,
ButtonModule,
+ ColorPickerModule,
ReactiveFormsModule,
FocusTrapModule,
],
@@ -37,6 +39,15 @@ export class CategoryCreateModalComponent {
this.categoryForm = this.fb.group({
id: -1,
name: ["", Validators.required],
+ color: [
+ "#000000",
+ {
+ validators: [
+ Validators.required,
+ Validators.pattern("\#[abcdefABCDEF0-9]{6}"),
+ ],
+ },
+ ],
image: null,
});
diff --git a/src/src/app/services/utils.service.ts b/src/src/app/services/utils.service.ts
index a428766..45c8410 100644
--- a/src/src/app/services/utils.service.ts
+++ b/src/src/app/services/utils.service.ts
@@ -4,53 +4,24 @@ import { TripStatus } from "../types/trip";
import { ApiService } from "./api.service";
import { map } from "rxjs";
-const DISABLE_LOWNET = "TRIP_DISABLE_LOWNET";
-const DARK = "DARKMODE";
-
@Injectable({
providedIn: "root",
})
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();
- }
+ constructor(private ngMessageService: MessageService) {}
toGithubTRIP() {
window.open("https://github.com/itskovacs/trip", "_blank");
}
- toggleLowNet() {
- if (this.isLowNet) {
- localStorage.setItem(DISABLE_LOWNET, "1");
- } else {
- localStorage.removeItem(DISABLE_LOWNET);
- }
- this.isLowNet = !this.isLowNet;
- }
-
- renderDarkMode() {
+ toggleDarkMode() {
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" },
diff --git a/src/src/app/shared/map.ts b/src/src/app/shared/map.ts
index 3471772..21e461f 100644
--- a/src/src/app/shared/map.ts
+++ b/src/src/app/shared/map.ts
@@ -18,7 +18,10 @@ export interface MarkerOptions extends L.MarkerOptions {
contextmenuItems: ContextMenuItem[];
}
-export function createMap(contextMenuItems?: ContextMenuItem[]): L.Map {
+export function createMap(
+ contextMenuItems?: ContextMenuItem[],
+ tilelayer?: string,
+): L.Map {
let southWest = L.latLng(-89.99, -180);
let northEast = L.latLng(89.99, 180);
let bounds = L.latLngBounds(southWest, northEast);
@@ -34,7 +37,8 @@ export function createMap(contextMenuItems?: ContextMenuItem[]): L.Map {
.setMaxBounds(bounds);
L.tileLayer(
- "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
+ tilelayer ||
+ "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
{
maxZoom: 17,
minZoom: 3,
@@ -48,7 +52,7 @@ export function createMap(contextMenuItems?: ContextMenuItem[]): L.Map {
export function placeHoverTooltip(place: Place): string {
let content = `
${place.name}
`;
- content += `
${place.category.name}
`;
+ content += `
${place.category.name}
`;
return content;
}
@@ -99,6 +103,7 @@ export function placeToMarker(
place: Place,
isLowNet: boolean = true,
grayscale: boolean = false,
+ gpxInBubble: boolean = false,
): L.Marker {
let marker: L.Marker;
let options: any = {
@@ -108,30 +113,35 @@ export function placeToMarker(
alt: "",
};
- marker = new L.Marker([+place.lat, +place.lng], options);
-
const markerImage = isLowNet
? place.category.image
: (place.image ?? place.category.image);
- let markerClasses = place.visited ? "image-marker visited" : "image-marker";
+ let markerClasses = "w-full h-full rounded-full bg-center bg-cover bg-white";
if (grayscale) markerClasses += " grayscale";
+ const iconHtml = `
+
+
+ ${gpxInBubble && place.gpx ? '
' : ""}
+
+ `;
- marker.options.icon = L.icon({
- iconUrl: markerImage,
+ const icon = L.divIcon({
+ html: iconHtml,
iconSize: [56, 56],
- iconAnchor: [28, 28],
- shadowSize: [0, 0],
- shadowAnchor: [0, 0],
- popupAnchor: [0, -12],
- className: markerClasses,
+ className: "",
+ });
+
+ marker = new L.Marker([+place.lat, +place.lng], {
+ ...options,
+ icon,
});
let touchDevice = "ontouchstart" in window;
if (!touchDevice) {
marker.bindTooltip(placeHoverTooltip(place), {
direction: "right",
- offset: [24, 0],
+ offset: [28, 0],
className: "class-tooltip",
});
}
diff --git a/src/src/app/shared/place-box/place-box.component.html b/src/src/app/shared/place-box/place-box.component.html
index c856825..3b703a8 100644
--- a/src/src/app/shared/place-box/place-box.component.html
+++ b/src/src/app/shared/place-box/place-box.component.html
@@ -10,8 +10,9 @@
-
{{ selectedPlace.category.name }}
@if (selectedPlace.allowdog) {
@@ -88,12 +89,13 @@
Description
- {{ selectedPlace.description || '-' }}
+
- {{ selectedPlace.category.name }}
@if (selectedPlace.allowdog) {
diff --git a/src/src/app/shared/place-box/place-box.component.ts b/src/src/app/shared/place-box/place-box.component.ts
index 29d7bdc..2df19af 100644
--- a/src/src/app/shared/place-box/place-box.component.ts
+++ b/src/src/app/shared/place-box/place-box.component.ts
@@ -6,11 +6,12 @@ import { MenuItem } from "primeng/api";
import { UtilsService } from "../../services/utils.service";
import { Observable } from "rxjs";
import { AsyncPipe } from "@angular/common";
+import { LinkifyPipe } from "../linkify.pipe";
@Component({
selector: "app-place-box",
standalone: true,
- imports: [ButtonModule, MenuModule, AsyncPipe],
+ imports: [ButtonModule, MenuModule, AsyncPipe, LinkifyPipe],
templateUrl: "./place-box.component.html",
styleUrls: ["./place-box.component.scss"],
})
diff --git a/src/src/app/types/poi.ts b/src/src/app/types/poi.ts
index 0b7b776..62a50d8 100644
--- a/src/src/app/types/poi.ts
+++ b/src/src/app/types/poi.ts
@@ -3,6 +3,7 @@ export interface Category {
name: string;
image_id: number;
image: string;
+ color?: string;
}
export interface Place {
diff --git a/src/src/app/types/settings.ts b/src/src/app/types/settings.ts
index 600804f..42444ba 100644
--- a/src/src/app/types/settings.ts
+++ b/src/src/app/types/settings.ts
@@ -1,7 +1,11 @@
export interface Settings {
username: string;
- mapLat: number;
- mapLng: number;
+ map_lat: number;
+ map_lng: number;
currency: string;
do_not_display: string[];
+ tile_layer?: string;
+ mode_low_network?: boolean;
+ mode_dark?: boolean;
+ mode_gpx_in_place?: boolean;
}
diff --git a/src/src/styles.scss b/src/src/styles.scss
index 291a2e3..62a859e 100644
--- a/src/src/styles.scss
+++ b/src/src/styles.scss
@@ -117,23 +117,12 @@ html {
width: 24px;
}
-.image-marker {
- border-radius: 50%;
- border: 2px solid #405cf5;
- background: white;
- object-fit: cover;
-
- &.visited {
- border: 2px solid #9ca3af;
- }
-}
-
.listHover {
.custom-cluster {
background-color: red;
}
- &.image-marker {
- border: 4px dashed red;
+ .marker-anchor {
+ border: 3px dashed red !important;
}
}