+
+ 
+
-
{trail.name}
+
+
{trail.name}
+{trail.location}
diff --git a/web/src/lib/components/waypoint/waypoint_modal.svelte b/web/src/lib/components/waypoint/waypoint_modal.svelte
index c6741dce..76aa7031 100644
--- a/web/src/lib/components/waypoint/waypoint_modal.svelte
+++ b/web/src/lib/components/waypoint/waypoint_modal.svelte
@@ -2,11 +2,12 @@
import { Waypoint, waypointSchema } from "$lib/models/waypoint";
import { createEventDispatcher } from "svelte";
- import { createForm } from "svelte-forms-lib";
+ import { createForm } from "$lib/vendor/svelte-form-lib/index";
import Modal from "../base/modal.svelte";
import TextField from "../base/text_field.svelte";
import Textarea from "../base/textarea.svelte";
import { waypoint } from "$lib/stores/waypoint_store";
+ import { util } from "$lib/vendor/svelte-form-lib/util";
export let openModal: (() => void) | undefined = undefined;
export let closeModal: (() => void) | undefined = undefined;
@@ -21,7 +22,7 @@
closeModal!();
},
});
- $: form.set($waypoint);
+ $: form.set(util.cloneDeep($waypoint));
({
+ id: string().optional(),
+ date: date().transform((value, originalValue, context) => {
+ if (context.isType(value)) return value;
+ return parse(originalValue, 'dd.MM.yyyy', new Date());
+ }).required('Required').typeError('Invalid Date'),
+ text: string().optional(),
+});
+
+
+export { SummitLog, summitLogSchema }
\ No newline at end of file
diff --git a/web/src/lib/models/trail.ts b/web/src/lib/models/trail.ts
index 63f0b278..5d57cc09 100644
--- a/web/src/lib/models/trail.ts
+++ b/web/src/lib/models/trail.ts
@@ -1,3 +1,4 @@
+import { array, number, object, string } from "yup";
import type { Category } from "./category";
import type { SummitLog } from "./summit_log";
import type { Waypoint } from "./waypoint";
@@ -20,38 +21,57 @@ class Trail {
tags?: string[];
description?: string;
+ _photoFiles: File[]
+
constructor(name: string,
- id?: string,
- location?: string,
- distance?: number,
- elevation_gain?: number,
- duration?: number,
- thumbnail?: string,
- photos?: string[],
- gpx?: string,
- category?: Category,
- waypoints?: Waypoint[],
- summit_logs?: SummitLog[],
- tags?: string[],
- description?: string
- ) {
- this.id = id;
- this.name = name;
- this.location = location;
- this.distance = distance;
- this.elevation_gain = elevation_gain;
- this.duration = duration;
- this.thumbnail = thumbnail;
- this.photos = photos ?? [];
- this.gpx = gpx;
- this.expand = {
- category: category,
- waypoints: waypoints ?? [],
- summit_logs: summit_logs ?? []
+ params?: {
+ id?: string,
+ location?: string,
+ distance?: number,
+ elevation_gain?: number,
+ duration?: number,
+ thumbnail?: string,
+ photos?: string[],
+ gpx?: string,
+ category?: Category,
+ waypoints?: Waypoint[],
+ summit_logs?: SummitLog[],
+ tags?: string[],
+ description?: string
}
- this.tags = tags ?? []
- this.description = description ?? "";
+
+ ) {
+ this.id = params?.id;
+ this.name = name;
+ this.location = params?.location;
+ this.distance = params?.distance;
+ this.elevation_gain = params?.elevation_gain;
+ this.duration = params?.duration;
+ this.thumbnail = params?.thumbnail;
+ this.photos = params?.photos ?? [];
+ this.gpx = params?.gpx;
+ this.expand = {
+ category: params?.category,
+ waypoints: params?.waypoints ?? [],
+ summit_logs: params?.summit_logs ?? []
+ }
+ this.tags = params?.tags ?? []
+ this.description = params?.description ?? "";
+ this._photoFiles = [];
}
}
-export { Trail };
+const trailSchema = object({
+ id: string().optional(),
+ name: string().required("Required"),
+ location: string().optional(),
+ distance: number().optional(),
+ elevation_gain: number().optional(),
+ duration: number().optional(),
+ thumbnail: string().optional(),
+ photos: array(string()).optional(),
+ gpx: string().optional(),
+ description: string().optional()
+});
+
+export { Trail, trailSchema };
diff --git a/web/src/lib/models/waypoint.ts b/web/src/lib/models/waypoint.ts
index 8cbc986c..61775c7e 100644
--- a/web/src/lib/models/waypoint.ts
+++ b/web/src/lib/models/waypoint.ts
@@ -25,8 +25,8 @@ const waypointSchema = object({
id: string().optional(),
name: string().optional(),
description: string().optional(),
- lat: number().min(0).required('Required').typeError('Invalid latitude'),
- lon: number().min(0).required('Required').typeError('Invalid longitude'),
+ lat: number().required('Required').typeError('Invalid latitude'),
+ lon: number().required('Required').typeError('Invalid longitude'),
icon: string().optional()
});
diff --git a/web/src/lib/stores/summit_log_store.ts b/web/src/lib/stores/summit_log_store.ts
new file mode 100644
index 00000000..8d07da5f
--- /dev/null
+++ b/web/src/lib/stores/summit_log_store.ts
@@ -0,0 +1,21 @@
+import { pb } from "$lib/constants";
+import { SummitLog } from "$lib/models/summit_log";
+import { writable, type Writable } from "svelte/store";
+
+export const summitLog: Writable = writable(new SummitLog(new Date().toISOString()));
+
+export async function summit_logs_create(bodyParams?: { [key: string]: any; } | FormData) {
+ const model = await pb
+ .collection("summit_logs")
+ .create(bodyParams);
+
+ return model;
+}
+
+export async function summit_logs_delete(id: string) {
+ const success = await pb
+ .collection("summit_logs_delete")
+ .delete(id);
+
+ return success;
+}
\ No newline at end of file
diff --git a/web/src/lib/stores/trail_store.ts b/web/src/lib/stores/trail_store.ts
index c262f170..e1a7dc36 100644
--- a/web/src/lib/stores/trail_store.ts
+++ b/web/src/lib/stores/trail_store.ts
@@ -23,6 +23,31 @@ export async function trails_show(id: string, loadGPX?: boolean) {
trail.set(response);
}
+export async function trails_create(bodyParams?: { [key: string]: any; } | FormData) {
+ const model = await pb
+ .collection("trails")
+ .create(bodyParams);
+
+ return model;
+}
+
+export async function trails_update(id: string, bodyParams?: { [key: string]: any; } | FormData) {
+ const model = await pb
+ .collection("trails")
+ .update(id, bodyParams);
+
+ return model;
+}
+
+
+export async function trails_delete(id: string) {
+ const success = await pb
+ .collection("trails")
+ .delete(id);
+
+ return success;
+}
+
async function fetchGPX(trail: Trail) {
if (!trail.gpx) {
return "";
diff --git a/web/src/lib/stores/waypoint_store.ts b/web/src/lib/stores/waypoint_store.ts
index 85236133..919798e4 100644
--- a/web/src/lib/stores/waypoint_store.ts
+++ b/web/src/lib/stores/waypoint_store.ts
@@ -1,4 +1,22 @@
+import { pb } from "$lib/constants";
import { Waypoint } from "$lib/models/waypoint";
import { writable, type Writable } from "svelte/store";
export const waypoint: Writable = writable(new Waypoint(0, 0));
+
+export async function waypoints_create(bodyParams?: { [key: string]: any; } | FormData) {
+
+ const model = await pb
+ .collection("waypoints")
+ .create(bodyParams);
+
+ return model;
+}
+
+export async function waypoints_delete(id: string) {
+ const success = await pb
+ .collection("waypoints")
+ .delete(id);
+
+ return success;
+}
\ No newline at end of file
diff --git a/web/src/lib/util/format_util.ts b/web/src/lib/util/format_util.ts
index 4e10d8b6..afc72a4b 100644
--- a/web/src/lib/util/format_util.ts
+++ b/web/src/lib/util/format_util.ts
@@ -1,7 +1,6 @@
-import type { Waypoint } from "$lib/models/waypoint";
export function formatTimeHHMM(minutes?: number) {
- if(!minutes) {
+ if (!minutes) {
return "-";
}
const m = minutes % 60;
@@ -12,7 +11,7 @@ export function formatTimeHHMM(minutes?: number) {
}
export function formatMeters(meters?: number) {
- if(!meters) {
+ if (!meters) {
return "-";
}
if (meters % 1 === 0) {
@@ -22,16 +21,3 @@ export function formatMeters(meters?: number) {
}
}
-
-export function formatISODate(isoTimestamp?: string) {
- if(!isoTimestamp) {
- return "-"
- }
- const date = new Date(isoTimestamp);
-
- const day = date.getDate().toString().padStart(2, '0');
- const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Month is zero-based
- const year = date.getFullYear();
-
- return `${day}.${month}.${year}`;
-}
\ No newline at end of file
diff --git a/web/src/lib/vendor/svelte-form-lib/create-form.js b/web/src/lib/vendor/svelte-form-lib/create-form.js
new file mode 100644
index 00000000..b88c0691
--- /dev/null
+++ b/web/src/lib/vendor/svelte-form-lib/create-form.js
@@ -0,0 +1,255 @@
+import {derived, writable, get} from 'svelte/store';
+import {util} from './util';
+
+const NO_ERROR = '';
+const IS_TOUCHED = true;
+
+function isCheckbox(element) {
+ return element.getAttribute && element.getAttribute('type') === 'checkbox';
+}
+
+function isFileInput(element) {
+ return element.getAttribute && element.getAttribute('type') === 'file';
+}
+
+function resolveValue(element) {
+ if (isFileInput(element)) {
+ return element.files;
+ } else if (isCheckbox(element)) {
+ return element.checked;
+ } else {
+ return element.value;
+ }
+}
+
+export const createForm = (config) => {
+ let initialValues = config.initialValues || {};
+
+ const validationSchema = config.validationSchema;
+ const validateFunction = config.validate;
+ const onSubmit = config.onSubmit;
+
+ const getInitial = {
+ values: () => util.cloneDeep(initialValues),
+ errors: () =>
+ validationSchema
+ ? util.getErrorsFromSchema(initialValues, validationSchema.fields)
+ : util.assignDeep(initialValues, NO_ERROR),
+ touched: () => util.assignDeep(initialValues, !IS_TOUCHED),
+ };
+
+ const form = writable(getInitial.values());
+ const errors = writable(getInitial.errors());
+ const touched = writable(getInitial.touched());
+
+ const isSubmitting = writable(false);
+ const isValidating = writable(false);
+
+ const isValid = derived(errors, ($errors) => {
+ const noErrors = util
+ .getValues($errors)
+ .every((field) => field === NO_ERROR);
+ return noErrors;
+ });
+
+ const modified = derived(form, ($form) => {
+ const object = util.assignDeep($form, false);
+
+ for (let key in $form) {
+ object[key] = !util.deepEqual($form[key], initialValues[key]);
+ }
+
+ return object;
+ });
+
+ const isModified = derived(modified, ($modified) => {
+ return util.getValues($modified).includes(true);
+ });
+
+ function validateField(field) {
+ return util
+ .subscribeOnce(form)
+ .then((values) => validateFieldValue(field, values[field]));
+ }
+
+ function validateFieldValue(field, value) {
+ updateTouched(field, true);
+
+ if (validationSchema) {
+ isValidating.set(true);
+
+ return validationSchema
+ .validateAt(field, get(form))
+ .then(() => util.update(errors, field, ''))
+ .catch((error) => util.update(errors, field, error.message))
+ .finally(() => {
+ isValidating.set(false);
+ });
+ }
+
+ if (validateFunction) {
+ isValidating.set(true);
+ return Promise.resolve()
+ .then(() => validateFunction({[field]: value}))
+ .then((errs) =>
+ util.update(errors, field, !util.isNullish(errs) ? errs[field] : ''),
+ )
+ .finally(() => {
+ isValidating.set(false);
+ });
+ }
+
+ return Promise.resolve();
+ }
+
+ function updateValidateField(field, value) {
+ updateField(field, value);
+ return validateFieldValue(field, value);
+ }
+
+ function handleChange(event) {
+ const element = event.target;
+ const field = element.name || element.id;
+ const value = resolveValue(element);
+
+ return updateValidateField(field, value);
+ }
+
+ function handleSubmit(event) {
+ if (event && event.preventDefault) {
+ event.preventDefault();
+ }
+
+ isSubmitting.set(true);
+
+ return util.subscribeOnce(form).then((values) => {
+ if (typeof validateFunction === 'function') {
+ isValidating.set(true);
+
+ return Promise.resolve()
+ .then(() => validateFunction(values))
+ .then((error) => {
+ if (util.isNullish(error) || util.getValues(error).length === 0) {
+ return clearErrorsAndSubmit(values);
+ } else {
+ errors.set(error);
+ isSubmitting.set(false);
+ }
+ })
+ .finally(() => isValidating.set(false));
+ }
+
+ if (validationSchema) {
+ isValidating.set(true);
+
+ return (
+ validationSchema
+ .validate(values, {abortEarly: false})
+ .then(() => clearErrorsAndSubmit(values))
+ // eslint-disable-next-line unicorn/catch-error-name
+ .catch((yupErrors) => {
+ if (yupErrors && yupErrors.inner) {
+ const updatedErrors = getInitial.errors();
+
+ yupErrors.inner.map((error) =>
+ util.set(updatedErrors, error.path, error.message),
+ );
+
+ errors.set(updatedErrors);
+ }
+ isSubmitting.set(false);
+ })
+ .finally(() => isValidating.set(false))
+ );
+ }
+
+ return clearErrorsAndSubmit(values);
+ });
+ }
+
+ function handleReset() {
+ form.set(getInitial.values());
+ errors.set(getInitial.errors());
+ touched.set(getInitial.touched());
+ }
+
+ function clearErrorsAndSubmit(values) {
+ return Promise.resolve()
+ .then(() => errors.set(getInitial.errors()))
+ .then(() => onSubmit(values, form, errors))
+ .finally(() => isSubmitting.set(false));
+ }
+
+ /**
+ * Handler to imperatively update the value of a form field
+ */
+ function updateField(field, value) {
+ util.update(form, field, value);
+ }
+
+ /**
+ * Handler to imperatively update the touched value of a form field
+ */
+ function updateTouched(field, value) {
+ util.update(touched, field, value);
+ }
+
+ /**
+ * Update the initial values and reset form. Used to dynamically display new form values
+ */
+ function updateInitialValues(newValues) {
+ initialValues = newValues;
+
+ handleReset();
+ }
+
+ return {
+ form,
+ errors,
+ touched,
+ modified,
+ isValid,
+ isSubmitting,
+ isValidating,
+ isModified,
+ handleChange,
+ handleSubmit,
+ handleReset,
+ updateField,
+ updateValidateField,
+ updateTouched,
+ validateField,
+ updateInitialValues,
+ state: derived(
+ [
+ form,
+ errors,
+ touched,
+ modified,
+ isValid,
+ isValidating,
+ isSubmitting,
+ isModified,
+ ],
+ ([
+ $form,
+ $errors,
+ $touched,
+ $modified,
+ $isValid,
+ $isValidating,
+ $isSubmitting,
+ $isModified,
+ ]) => ({
+ form: $form,
+ errors: $errors,
+ touched: $touched,
+ modified: $modified,
+ isValid: $isValid,
+ isSubmitting: $isSubmitting,
+ isValidating: $isValidating,
+ isModified: $isModified,
+ }),
+ ),
+ };
+};
diff --git a/web/src/lib/vendor/svelte-form-lib/index.d.ts b/web/src/lib/vendor/svelte-form-lib/index.d.ts
new file mode 100644
index 00000000..83a75f6a
--- /dev/null
+++ b/web/src/lib/vendor/svelte-form-lib/index.d.ts
@@ -0,0 +1,102 @@
+/// > = {
+ context?: FormState;
+ initialValues?: Inf;
+ onSubmit?: ((values: Inf) => any) | ((values: Inf) => Promise);
+ validate?: (values: Inf) => any | undefined;
+ validationSchema?: ObjectSchema;
+} & svelte.JSX.HTMLAttributes;
+
+type FieldProperties = {
+ name: string;
+ type?: string;
+ value?: string;
+} & svelte.JSX.HTMLProps;
+
+type SelectProperties = {
+ name: string;
+} & svelte.JSX.HTMLProps;
+
+type ErrorProperties = {
+ name: string;
+} & svelte.JSX.HTMLProps;
+
+type TextareaProperties = {
+ name: string;
+} & svelte.JSX.HTMLProps;
+
+type FormState> = {
+ form: Writable;
+ errors: Writable>;
+ touched: Writable>;
+ modified: Readable>;
+ isValid: Readable;
+ isSubmitting: Writable;
+ isValidating: Writable;
+ isModified: Readable;
+ updateField: (field: keyof Inf, value: any) => void;
+ updateValidateField: (field: keyof Inf, value: any) => void;
+ updateTouched: (field: keyof Inf, value: any) => void;
+ validateField: (field: keyof Inf) => Promise;
+ updateInitialValues: (newValues: Inf) => void;
+ handleReset: () => void;
+ state: Readable<{
+ form: Inf;
+ errors: Record;
+ touched: Record;
+ modified: Record;
+ isValid: boolean;
+ isSubmitting: boolean;
+ isValidating: boolean;
+ isModified: boolean;
+ }>;
+ handleChange: (event: Event) => any;
+ handleSubmit: (event: Event) => any;
+};
+
+declare function createForm>(formProperties: {
+ initialValues: Inf;
+ onSubmit: (values: Inf) => any | Promise;
+ validate?: (values: Inf) => any | undefined;
+ validationSchema?: ObjectSchema;
+}): FormState;
+
+declare class Form extends SvelteComponentTyped<
+ FormProps,
+ Record,
+ {
+ default: FormState;
+ }
+> {}
+
+declare class Field extends SvelteComponentTyped<
+ FieldProperties,
+ Record,
+ Record
+> {}
+
+declare class Textarea extends SvelteComponentTyped<
+ TextareaProperties,
+ Record,
+ Record
+> {}
+
+declare class Select extends SvelteComponentTyped<
+ SelectProperties,
+ Record,
+ {default: any}
+> {}
+
+declare class ErrorMessage extends SvelteComponentTyped<
+ ErrorProperties,
+ Record,
+ {default: any}
+> {}
+
+declare const key: {};
+
+export {createForm, key, Form, Field, Select, ErrorMessage, Textarea};
diff --git a/web/src/lib/vendor/svelte-form-lib/index.js b/web/src/lib/vendor/svelte-form-lib/index.js
new file mode 100644
index 00000000..db96af5b
--- /dev/null
+++ b/web/src/lib/vendor/svelte-form-lib/index.js
@@ -0,0 +1 @@
+export {createForm} from './create-form';
\ No newline at end of file
diff --git a/web/src/lib/vendor/svelte-form-lib/util.js b/web/src/lib/vendor/svelte-form-lib/util.js
new file mode 100644
index 00000000..32f6f27f
--- /dev/null
+++ b/web/src/lib/vendor/svelte-form-lib/util.js
@@ -0,0 +1,135 @@
+import { dequal as isEqual } from 'dequal/lite';
+
+function subscribeOnce(observable) {
+ return new Promise((resolve) => {
+ observable.subscribe(resolve)(); // immediately invoke to unsubscribe
+ });
+}
+
+function update(object, path, value) {
+ object.update((o) => {
+ set(o, path, value);
+ return o;
+ });
+}
+
+function cloneDeep(object) {
+ try {
+ return JSON.parse(JSON.stringify(object));
+
+ } catch (e) {
+ return object;
+ }
+}
+
+function isNullish(value) {
+ return value === undefined || value === null;
+}
+
+function isEmpty(object) {
+ return isNullish(object) || Object.keys(object).length <= 0;
+}
+
+function getValues(object) {
+ let results = [];
+
+ for (const [, value] of Object.entries(object)) {
+ const values = typeof value === 'object' ? getValues(value) : [value];
+ results = [...results, ...values];
+ }
+
+ return results;
+}
+
+// TODO: refactor this so as not to rely directly on yup's API
+// This should use dependency injection, with a default callback which may assume
+// yup as the validation schema
+function getErrorsFromSchema(initialValues, schema, errors = {}) {
+ for (const key in schema) {
+ switch (true) {
+ case schema[key].type === 'object' && !isEmpty(schema[key].fields): {
+ errors[key] = getErrorsFromSchema(
+ initialValues[key],
+ schema[key].fields,
+ { ...errors[key] },
+ );
+ break;
+ }
+
+ case schema[key].type === 'array': {
+ const values =
+ initialValues && initialValues[key] ? initialValues[key] : [];
+ errors[key] = values.map((value) => {
+ const innerError = getErrorsFromSchema(
+ value,
+ schema[key].innerType.fields,
+ { ...errors[key] },
+ );
+
+ return Object.keys(innerError).length > 0 ? innerError : '';
+ });
+ break;
+ }
+
+ default: {
+ errors[key] = '';
+ }
+ }
+ }
+
+ return errors;
+}
+
+const deepEqual = isEqual;
+
+function assignDeep(object, value) {
+ if (Array.isArray(object)) {
+ return object.map((o) => assignDeep(o, value));
+ }
+ const copy = {};
+ for (const key in object) {
+ copy[key] =
+ typeof object[key] === 'object' && !isNullish(object[key]) ? assignDeep(object[key], value) : value;
+ }
+ return copy;
+}
+
+function set(object, path, value) {
+ if (new Object(object) !== object) return object;
+
+ if (!Array.isArray(path)) {
+ path = path.toString().match(/[^.[\]]+/g) || [];
+ }
+
+ const result = path
+ .slice(0, -1)
+ // TODO: replace this reduce with something more readable
+ // eslint-disable-next-line unicorn/no-array-reduce
+ .reduce(
+ (accumulator, key, index) =>
+ new Object(accumulator[key]) === accumulator[key]
+ ? accumulator[key]
+ : (accumulator[key] =
+ Math.trunc(Math.abs(path[index + 1])) === +path[index + 1]
+ ? []
+ : {}),
+ object,
+ );
+
+ result[path[path.length - 1]] = value;
+
+ return object;
+}
+
+export const util = {
+ assignDeep,
+ cloneDeep,
+ deepEqual,
+ getErrorsFromSchema,
+ getValues,
+ isEmpty,
+ isNullish,
+ set,
+ subscribeOnce,
+ update,
+};
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 871b0730..1014f5e4 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,8 +1,37 @@
@@ -26,7 +55,12 @@
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8"
>
{#each $trails as trail}
- handleDropdownClick(trail, e.detail)}
+ >
{/each}
diff --git a/web/src/routes/+page.ts b/web/src/routes/+page.ts
index 35061744..04c515e4 100644
--- a/web/src/routes/+page.ts
+++ b/web/src/routes/+page.ts
@@ -1,8 +1,8 @@
import { categories_index } from "$lib/stores/category_store";
import { trails_index } from "$lib/stores/trail_store";
-import type { Load } from "@sveltejs/kit";
+import type { ServerLoad } from "@sveltejs/kit";
-export const load: Load = async ({ params }) => {
+export const load: ServerLoad = async ({ params, locals }) => {
await trails_index()
await categories_index()
};
\ No newline at end of file
diff --git a/web/src/routes/new/+page.svelte b/web/src/routes/new/+page.svelte
index bb9c0bd3..6fc7446f 100644
--- a/web/src/routes/new/+page.svelte
+++ b/web/src/routes/new/+page.svelte
@@ -1,29 +1,80 @@
-
-