1315 lines
92 KiB
TypeScript
1315 lines
92 KiB
TypeScript
"use client";
|
|
import { useRef, useState, type ChangeEvent, type ReactNode } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { adminFetch } from "@/config/adminFetch";
|
|
import AdminMobileMenu from "@/components/AdminMobileMenu";
|
|
|
|
// KOMPONENT 1: MultiSelect for samarbeidende klubber
|
|
const MultiSelect = ({ label, options, selected, onChange }: { label: string, options: any[], selected: string[], onChange: (s: string[]) => void }) => {
|
|
const toggle = (val: string) => {
|
|
if (selected.includes(val)) onChange(selected.filter(x => x !== val));
|
|
else onChange([...selected, val]);
|
|
};
|
|
return (
|
|
<div className="flex flex-col gap-2 mb-8 col-span-1 md:col-span-2">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">{label}</label>
|
|
<div className="p-4 rounded-2xl border-2 border-gray-300 bg-white shadow-sm max-h-64 overflow-y-auto grid grid-cols-1 md:grid-cols-2 gap-2">
|
|
{options.map(opt => (
|
|
<label key={opt.slug} className="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg cursor-pointer border border-transparent hover:border-gray-200 transition-all">
|
|
<input type="checkbox" checked={selected.includes(opt.slug)} onChange={() => toggle(opt.slug)} className="w-5 h-5 accent-[#8bc34a]" />
|
|
<span className="text-sm font-bold text-gray-700">{opt.name}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// KOMPONENT 2: Viser flate JSON-objekter (som fasiliteter) som rader med Nøkkel og Verdi
|
|
const KeyValueEditor = ({ label, value, onChange }: { label: string, value: any, onChange: (v: any) => void }) => {
|
|
const entries = Object.entries(value || {});
|
|
|
|
const updateKey = (oldKey: string, newKey: string, val: any) => {
|
|
const newObj: any = {};
|
|
for (const [k, v] of entries) {
|
|
if (k === oldKey) {
|
|
if (newKey.trim()) newObj[newKey] = val;
|
|
} else {
|
|
newObj[k] = v;
|
|
}
|
|
}
|
|
onChange(newObj);
|
|
};
|
|
|
|
const updateVal = (key: string, val: string) => {
|
|
onChange({ ...value, [key]: val });
|
|
};
|
|
|
|
const removeKey = (key: string) => {
|
|
const newObj = { ...value };
|
|
delete newObj[key];
|
|
onChange(newObj);
|
|
};
|
|
|
|
const addRow = () => {
|
|
const tempKey = `ny_rad_${Date.now()}`;
|
|
onChange({ ...value, [tempKey]: "" });
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 mb-8 bg-gray-100 p-6 md:p-8 rounded-[2rem] border border-gray-200 shadow-sm">
|
|
<label className="text-sm font-black uppercase tracking-widest text-[#11280f]">{label}</label>
|
|
<div className="space-y-3">
|
|
{entries.map(([k, v]) => (
|
|
<div key={k} className="grid gap-3 md:grid-cols-[minmax(0,0.35fr)_minmax(0,1fr)_auto] md:items-center">
|
|
<input
|
|
className="w-full p-4 rounded-xl border-2 border-gray-300 text-sm font-bold text-black bg-white focus:border-[#8bc34a] outline-none shadow-sm"
|
|
placeholder="Nøkkel (f.eks proshop)"
|
|
defaultValue={k.startsWith('ny_rad_') ? '' : k}
|
|
onBlur={e => updateKey(k, e.target.value, v)}
|
|
/>
|
|
<input
|
|
className="w-full p-4 rounded-xl border-2 border-gray-300 text-base font-medium text-black bg-white focus:border-[#8bc34a] outline-none shadow-sm"
|
|
placeholder="Verdi (f.eks Ja, eller et navn)"
|
|
value={String(v)}
|
|
onChange={e => updateVal(k, e.target.value)}
|
|
/>
|
|
<button onClick={() => removeKey(k)} className="btn btn-md btn-danger w-full md:w-auto md:text-center">✕</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button onClick={addRow} className="btn btn-md btn-secondary mt-2 self-start">+ Legg til ny rad</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// KOMPONENT 3: Viser Arrays med objekter (som Greenfee-lister) som små pene kort
|
|
const ListObjectEditor = ({ label, value, templateKeys, onChange }: { label: string, value: any[], templateKeys: string[], onChange: (v: any[]) => void }) => {
|
|
const items = Array.isArray(value) ? value : [];
|
|
|
|
const updateField = (index: number, key: string, val: string | number) => {
|
|
const newItems = [...items];
|
|
const parsedVal = (!isNaN(Number(val)) && val !== "") ? Number(val) : val;
|
|
newItems[index] = { ...newItems[index], [key]: parsedVal };
|
|
onChange(newItems);
|
|
};
|
|
|
|
const addRow = () => {
|
|
const newItem: any = {};
|
|
templateKeys.forEach(k => newItem[k] = "");
|
|
onChange([...items, newItem]);
|
|
};
|
|
|
|
const removeRow = (index: number) => {
|
|
const newItems = items.filter((_, i) => i !== index);
|
|
onChange(newItems);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 mb-8 bg-gray-100 p-6 md:p-8 rounded-[2rem] border border-gray-200 shadow-sm">
|
|
<label className="text-sm font-black uppercase tracking-widest text-[#11280f]">{label}</label>
|
|
<div className="space-y-6">
|
|
{items.map((item, idx) => (
|
|
<div key={idx} className="flex flex-col bg-white p-6 rounded-2xl border-2 border-gray-300 shadow-sm relative group hover:border-[#8bc34a] transition-colors">
|
|
<button onClick={() => removeRow(idx)} className="btn btn-sm btn-danger absolute right-4 top-4 z-10">✕</button>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 pr-10">
|
|
{templateKeys.map(key => (
|
|
<div key={key} className="flex flex-col gap-2">
|
|
<label className="text-xs uppercase font-black text-gray-600 tracking-wider">{key.replace(/_/g, ' ')}</label>
|
|
<input
|
|
className="p-3 rounded-lg border-2 border-gray-300 text-base font-bold text-black bg-gray-50 focus:bg-white focus:border-[#8bc34a] outline-none transition-colors"
|
|
value={item[key] || ""}
|
|
onChange={e => updateField(idx, key, e.target.value)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button onClick={addRow} className="btn btn-md btn-secondary mt-2 self-start">+ Legg til nytt element</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const AccordionSection = ({
|
|
title,
|
|
subtitle,
|
|
badge,
|
|
defaultOpen = false,
|
|
tone = 'gray',
|
|
children,
|
|
}: {
|
|
title: string;
|
|
subtitle?: string;
|
|
badge?: string;
|
|
defaultOpen?: boolean;
|
|
tone?: 'gray' | 'green';
|
|
children: ReactNode;
|
|
}) => {
|
|
const tones = {
|
|
gray: {
|
|
shell: 'border border-gray-200 bg-gray-100',
|
|
title: 'text-gray-800',
|
|
subtitle: 'text-gray-500',
|
|
badge: 'bg-white text-gray-600',
|
|
arrow: 'bg-white text-[#11280f]',
|
|
content: 'border-t border-gray-200',
|
|
},
|
|
green: {
|
|
shell: 'border border-[#8bc34a]/30 bg-[#8bc34a]/10',
|
|
title: 'text-[#11280f]',
|
|
subtitle: 'text-[#435340]',
|
|
badge: 'bg-white text-[#536256]',
|
|
arrow: 'bg-white text-[#11280f]',
|
|
content: 'border-t border-[#8bc34a]/20',
|
|
},
|
|
}[tone];
|
|
|
|
return (
|
|
<details open={defaultOpen} className={`mb-8 overflow-hidden rounded-[2rem] shadow-sm ${tones.shell}`}>
|
|
<summary className="flex cursor-pointer list-none items-center justify-between gap-4 p-6 md:p-8 [&::-webkit-details-marker]:hidden">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<h3 className={`text-sm font-black uppercase tracking-widest ${tones.title}`}>{title}</h3>
|
|
{badge ? (
|
|
<span className={`rounded-xl px-3 py-2 text-[10px] font-black uppercase tracking-widest ${tones.badge}`}>
|
|
{badge}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
{subtitle ? (
|
|
<p className={`mt-2 max-w-3xl text-sm leading-6 ${tones.subtitle}`}>{subtitle}</p>
|
|
) : null}
|
|
</div>
|
|
<span className={`shrink-0 rounded-2xl px-4 py-3 text-xs font-black uppercase tracking-widest ${tones.arrow}`}>
|
|
Vis / skjul
|
|
</span>
|
|
</summary>
|
|
<div className={`px-6 pb-6 md:px-8 md:pb-8 ${tones.content}`}>
|
|
<div className="pt-6">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</details>
|
|
);
|
|
};
|
|
|
|
const ScrollToTopButton = () => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
|
className="fixed bottom-5 right-5 z-[80] rounded-2xl bg-[#11280f] px-5 py-3 text-xs font-black uppercase tracking-widest text-white shadow-[0_18px_45px_rgba(17,40,15,0.28)] transition-transform hover:-translate-y-0.5 md:bottom-8 md:right-8"
|
|
>
|
|
Til toppen
|
|
</button>
|
|
);
|
|
};
|
|
|
|
// KOMPONENT 4: DEN NYE SCOREKORT-BYGGEREN
|
|
const ScorecardBuilder = ({ course, onChange }: { course: any, onChange: (c: any) => void }) => {
|
|
const ALL_KEYS = ['lengst', 'lang', 'mellomlang', 'mellomkort', 'kort', 'kortest'];
|
|
|
|
const [holes, setHoles] = useState<any[]>(() => {
|
|
const h = course.holes || [];
|
|
if (h.length === 0) {
|
|
return Array.from({length: 18}, (_, i) => ({ hole_number: i+1, par: '', hcp_index: '', lengths: {} }));
|
|
}
|
|
return h.sort((a: any, b: any) => a.hole_number - b.hole_number);
|
|
});
|
|
|
|
const [activeKeys, setActiveKeys] = useState<string[]>(() => {
|
|
const keys = new Set<string>();
|
|
holes.forEach(h => {
|
|
if (h.lengths) Object.keys(h.lengths).forEach(k => keys.add(k));
|
|
});
|
|
return ALL_KEYS.filter(k => keys.has(k));
|
|
});
|
|
|
|
const [tees, setTees] = useState<any>(() => {
|
|
const herrer = course.tee_boxes?.herrer || [];
|
|
const damer = course.tee_boxes?.damer || [];
|
|
const initialTees = { herrer: {} as any, damer: {} as any };
|
|
const herrerAreCompact = herrer.length > 0 && herrer.length < ALL_KEYS.length;
|
|
const damerAreCompact = damer.length > 0 && damer.length < ALL_KEYS.length;
|
|
|
|
ALL_KEYS.forEach((key, idx) => {
|
|
const activeIdx = activeKeys.indexOf(key);
|
|
initialTees.herrer[key] = (herrerAreCompact && activeIdx >= 0 ? herrer[activeIdx] : herrer[idx]) || { navn_utslag: '', baneverdi: '', slopeverdi: '' };
|
|
initialTees.damer[key] = (damerAreCompact && activeIdx >= 0 ? damer[activeIdx] : damer[idx]) || { navn_utslag_damer: '', baneverdi_damer: '', slopeverdi_damer: '' };
|
|
});
|
|
return initialTees;
|
|
});
|
|
|
|
const syncToParent = (newHoles: any[], newKeys: string[], newTees: any) => {
|
|
const updatedTeeBoxes = {
|
|
herrer: ALL_KEYS.map(k => newTees.herrer[k] || {}),
|
|
damer: ALL_KEYS.map(k => newTees.damer[k] || {})
|
|
};
|
|
onChange({
|
|
...course,
|
|
holes: newHoles,
|
|
tee_boxes: updatedTeeBoxes
|
|
});
|
|
};
|
|
|
|
const toggleKey = (key: string) => {
|
|
const newKeys = activeKeys.includes(key)
|
|
? activeKeys.filter(k => k !== key)
|
|
: ALL_KEYS.filter(k => activeKeys.includes(k) || k === key);
|
|
setActiveKeys(newKeys);
|
|
|
|
const newTees = { ...tees };
|
|
if (!newTees.herrer[key]) newTees.herrer[key] = { navn_utslag: '', baneverdi: '', slopeverdi: '' };
|
|
if (!newTees.damer[key]) newTees.damer[key] = { navn_utslag_damer: '', baneverdi_damer: '', slopeverdi_damer: '' };
|
|
setTees(newTees);
|
|
syncToParent(holes, newKeys, newTees);
|
|
};
|
|
|
|
const updateTee = (gender: 'herrer'|'damer', key: string, field: string, value: string) => {
|
|
const newTees = { ...tees };
|
|
newTees[gender][key] = { ...newTees[gender][key], [field]: value };
|
|
setTees(newTees);
|
|
syncToParent(holes, activeKeys, newTees);
|
|
};
|
|
|
|
const updateHole = (index: number, field: string, value: string, lengthKey: string | null = null) => {
|
|
const newHoles = [...holes];
|
|
if (lengthKey) {
|
|
newHoles[index].lengths = { ...newHoles[index].lengths, [lengthKey]: value === '' ? '' : Number(value) };
|
|
} else {
|
|
newHoles[index][field] = value === '' ? '' : Number(value);
|
|
}
|
|
setHoles(newHoles);
|
|
syncToParent(newHoles, activeKeys, tees);
|
|
};
|
|
|
|
const addHole = () => {
|
|
const newHoles = [...holes, { hole_number: holes.length + 1, par: '', hcp_index: '', lengths: {} }];
|
|
setHoles(newHoles);
|
|
syncToParent(newHoles, activeKeys, tees);
|
|
};
|
|
|
|
const removeLastHole = () => {
|
|
const newHoles = holes.slice(0, -1);
|
|
setHoles(newHoles);
|
|
syncToParent(newHoles, activeKeys, tees);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 mt-6">
|
|
<div className="flex flex-wrap gap-4 items-center bg-gray-100 p-4 rounded-xl border-2 border-gray-200">
|
|
<span className="text-xs font-black uppercase tracking-widest text-gray-600">Aktive Utslagskolonner:</span>
|
|
{ALL_KEYS.map(k => (
|
|
<label key={k} className="flex items-center gap-2 text-sm font-bold cursor-pointer text-black">
|
|
<input
|
|
type="checkbox"
|
|
checked={activeKeys.includes(k)}
|
|
onChange={() => toggleKey(k)}
|
|
className="w-5 h-5 accent-[#8bc34a]"
|
|
/>
|
|
{k.toUpperCase()}
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
<section className="rounded-[1.75rem] border-2 border-blue-100 bg-blue-50/60 p-5 shadow-sm">
|
|
<p className="text-xs font-black uppercase tracking-widest text-blue-900">Herrer</p>
|
|
<div className="mt-4 space-y-3">
|
|
{activeKeys.map(k => (
|
|
<div key={k} className="rounded-2xl bg-white p-4 shadow-sm">
|
|
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-gray-400">{k}</p>
|
|
<div className="mt-3 grid gap-2 sm:grid-cols-3">
|
|
<input placeholder="Eks: Gul" className="w-full rounded-xl border border-blue-200 bg-white p-3 text-sm font-bold text-black outline-none focus:border-blue-500" value={tees.herrer[k]?.navn_utslag || ''} onChange={e => updateTee('herrer', k, 'navn_utslag', e.target.value)} />
|
|
<input placeholder="CR" className="w-full rounded-xl border border-blue-200 bg-white p-3 text-sm text-center text-black outline-none focus:border-blue-500" value={tees.herrer[k]?.baneverdi || ''} onChange={e => updateTee('herrer', k, 'baneverdi', e.target.value)} />
|
|
<input placeholder="Slope" className="w-full rounded-xl border border-blue-200 bg-white p-3 text-sm text-center text-black outline-none focus:border-blue-500" value={tees.herrer[k]?.slopeverdi || ''} onChange={e => updateTee('herrer', k, 'slopeverdi', e.target.value)} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[1.75rem] border-2 border-red-100 bg-red-50/60 p-5 shadow-sm">
|
|
<p className="text-xs font-black uppercase tracking-widest text-red-900">Damer</p>
|
|
<div className="mt-4 space-y-3">
|
|
{activeKeys.map(k => (
|
|
<div key={k} className="rounded-2xl bg-white p-4 shadow-sm">
|
|
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-gray-400">{k}</p>
|
|
<div className="mt-3 grid gap-2 sm:grid-cols-3">
|
|
<input placeholder="Eks: Rod" className="w-full rounded-xl border border-red-200 bg-white p-3 text-sm font-bold text-black outline-none focus:border-red-500" value={tees.damer[k]?.navn_utslag_damer || ''} onChange={e => updateTee('damer', k, 'navn_utslag_damer', e.target.value)} />
|
|
<input placeholder="CR" className="w-full rounded-xl border border-red-200 bg-white p-3 text-sm text-center text-black outline-none focus:border-red-500" value={tees.damer[k]?.baneverdi_damer || ''} onChange={e => updateTee('damer', k, 'baneverdi_damer', e.target.value)} />
|
|
<input placeholder="Slope" className="w-full rounded-xl border border-red-200 bg-white p-3 text-sm text-center text-black outline-none focus:border-red-500" value={tees.damer[k]?.slopeverdi_damer || ''} onChange={e => updateTee('damer', k, 'slopeverdi_damer', e.target.value)} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section className="rounded-[1.75rem] border-2 border-gray-200 bg-white p-5 shadow-sm">
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<p className="text-xs font-black uppercase tracking-widest text-gray-400">Hull for hull</p>
|
|
<p className="mt-1 text-sm text-gray-500">Hvert hull er et eget kort med par, hcp og lengder per aktiv utslagskolonne.</p>
|
|
</div>
|
|
<span className="rounded-xl bg-[#f1f7ed] px-3 py-2 text-[10px] font-black uppercase tracking-widest text-[#11280f]">{holes.length} hull</span>
|
|
</div>
|
|
<div className="mt-5 grid gap-4 lg:grid-cols-2">
|
|
{holes.map((h, idx) => (
|
|
<div key={idx} className="rounded-[1.5rem] border border-gray-200 bg-[#fbfdf8] p-4 shadow-sm">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<p className="text-lg font-black text-[#11280f]">Hull {h.hole_number}</p>
|
|
<span className="rounded-xl bg-white px-3 py-1 text-[10px] font-black uppercase tracking-widest text-gray-400 shadow-sm">{activeKeys.length} utslag</span>
|
|
</div>
|
|
<div className="mt-4 grid gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<label className="text-[10px] font-black uppercase tracking-[0.18em] text-gray-400">Par</label>
|
|
<input type="number" className="mt-2 w-full rounded-xl border-2 border-gray-200 bg-white p-3 text-center font-bold text-black outline-none focus:border-[#8bc34a]" value={h.par || ''} onChange={e => updateHole(idx, 'par', e.target.value)} />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black uppercase tracking-[0.18em] text-gray-400">HCP</label>
|
|
<input type="number" className="mt-2 w-full rounded-xl border-2 border-gray-200 bg-white p-3 text-center font-bold text-black outline-none focus:border-[#8bc34a]" value={h.hcp_index || ''} onChange={e => updateHole(idx, 'hcp_index', e.target.value)} />
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
|
{activeKeys.map(k => (
|
|
<div key={k} className="rounded-2xl bg-white p-3 shadow-sm">
|
|
<label className="text-[10px] font-black uppercase tracking-[0.18em] text-gray-400">{k}</label>
|
|
<input type="number" placeholder="Lengde" className="mt-2 w-full rounded-xl border-2 border-gray-200 bg-white p-3 text-center font-mono font-bold text-black outline-none focus:border-[#8bc34a]" value={h.lengths?.[k] || ''} onChange={e => updateHole(idx, 'lengths', e.target.value, k)} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<div className="hidden overflow-x-auto rounded-2xl border-2 border-gray-300 shadow-sm bg-white pb-2">
|
|
<table className="w-full text-center text-sm min-w-[800px] border-collapse">
|
|
<thead>
|
|
<tr className="bg-gray-100 text-gray-700 text-xs font-black uppercase tracking-widest border-b-2 border-gray-300">
|
|
<th className="p-3 border-r border-gray-200">Hull</th>
|
|
<th className="p-3 border-r border-gray-200">Par</th>
|
|
<th className="p-3 border-r border-gray-300">HCP</th>
|
|
{activeKeys.map(k => <th key={k} className="p-3 border-r border-gray-300 w-32">{k}</th>)}
|
|
</tr>
|
|
{/* Herrer */}
|
|
<tr className="bg-blue-50 border-b border-gray-300">
|
|
<th colSpan={3} className="p-3 text-right text-[10px] font-black text-blue-900 uppercase tracking-widest border-r border-gray-300">
|
|
Herrer (Navn / CR / Slope)
|
|
</th>
|
|
{activeKeys.map(k => (
|
|
<td key={k} className="p-2 border-r border-gray-300 align-top">
|
|
<div className="flex flex-col gap-1">
|
|
<input placeholder="Eks: Gul" className="w-full p-2 text-xs font-bold text-center border border-blue-200 rounded outline-none focus:border-blue-500 bg-white text-black" value={tees.herrer[k]?.navn_utslag || ''} onChange={e => updateTee('herrer', k, 'navn_utslag', e.target.value)} />
|
|
<div className="flex gap-1">
|
|
<input placeholder="CR" className="w-1/2 p-2 text-xs text-center border border-blue-200 rounded outline-none focus:border-blue-500 bg-white text-black" value={tees.herrer[k]?.baneverdi || ''} onChange={e => updateTee('herrer', k, 'baneverdi', e.target.value)} />
|
|
<input placeholder="Slope" className="w-1/2 p-2 text-xs text-center border border-blue-200 rounded outline-none focus:border-blue-500 bg-white text-black" value={tees.herrer[k]?.slopeverdi || ''} onChange={e => updateTee('herrer', k, 'slopeverdi', e.target.value)} />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
))}
|
|
</tr>
|
|
{/* Damer */}
|
|
<tr className="bg-red-50 border-b-4 border-gray-400">
|
|
<th colSpan={3} className="p-3 text-right text-[10px] font-black text-red-900 uppercase tracking-widest border-r border-gray-300">
|
|
Damer (Navn / CR / Slope)
|
|
</th>
|
|
{activeKeys.map(k => (
|
|
<td key={k} className="p-2 border-r border-gray-300 align-top">
|
|
<div className="flex flex-col gap-1">
|
|
<input placeholder="Eks: Rød" className="w-full p-2 text-xs font-bold text-center border border-red-200 rounded outline-none focus:border-red-500 bg-white text-black" value={tees.damer[k]?.navn_utslag_damer || ''} onChange={e => updateTee('damer', k, 'navn_utslag_damer', e.target.value)} />
|
|
<div className="flex gap-1">
|
|
<input placeholder="CR" className="w-1/2 p-2 text-xs text-center border border-red-200 rounded outline-none focus:border-red-500 bg-white text-black" value={tees.damer[k]?.baneverdi_damer || ''} onChange={e => updateTee('damer', k, 'baneverdi_damer', e.target.value)} />
|
|
<input placeholder="Slope" className="w-1/2 p-2 text-xs text-center border border-red-200 rounded outline-none focus:border-red-500 bg-white text-black" value={tees.damer[k]?.slopeverdi_damer || ''} onChange={e => updateTee('damer', k, 'slopeverdi_damer', e.target.value)} />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{holes.map((h, idx) => (
|
|
<tr key={idx} className="border-b border-gray-200 hover:bg-gray-50">
|
|
<td className="p-2 font-black text-lg text-gray-800 border-r border-gray-200">{h.hole_number}</td>
|
|
<td className="p-2 border-r border-gray-200"><input type="number" className="w-full p-3 text-center border-2 border-gray-200 rounded-xl font-bold text-black outline-none focus:border-[#8bc34a] bg-white" value={h.par || ''} onChange={e => updateHole(idx, 'par', e.target.value)} /></td>
|
|
<td className="p-2 border-r border-gray-300"><input type="number" className="w-full p-3 text-center border-2 border-gray-200 rounded-xl font-bold text-black outline-none focus:border-[#8bc34a] bg-white" value={h.hcp_index || ''} onChange={e => updateHole(idx, 'hcp_index', e.target.value)} /></td>
|
|
{activeKeys.map(k => (
|
|
<td key={k} className="p-2 border-r border-gray-300 bg-gray-50/50">
|
|
<input type="number" placeholder="Lengde" className="w-full p-3 text-center border-2 border-gray-200 rounded-xl font-mono font-bold text-black outline-none focus:border-[#8bc34a] bg-white" value={h.lengths?.[k] || ''} onChange={e => updateHole(idx, 'lengths', e.target.value, k)} />
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4 px-2 sm:flex-row">
|
|
<button onClick={addHole} className="btn btn-md btn-secondary">+ Legg til hull</button>
|
|
<button onClick={removeLastHole} className="btn btn-md btn-danger">- Slett siste hull</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const normalizeStringList = (value: any): string[] => {
|
|
if (Array.isArray(value)) {
|
|
return Array.from(new Set(value.map((entry) => String(entry || "").trim()).filter(Boolean)));
|
|
}
|
|
|
|
if (typeof value === 'string') {
|
|
try {
|
|
return normalizeStringList(JSON.parse(value));
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
return [];
|
|
};
|
|
|
|
const getMediaFieldLabel = (field: string) => {
|
|
if (field === 'image_url') return 'hovedbildet';
|
|
if (field === 'logo_url') return 'logoen';
|
|
return 'bildet';
|
|
};
|
|
|
|
export default function EditFacilityClient({ initialData, allFacilities }: { initialData: any, allFacilities: any[] }) {
|
|
const router = useRouter();
|
|
const [formData, setFormData] = useState({
|
|
...initialData,
|
|
is_published: initialData?.is_published !== false,
|
|
courses: Array.isArray(initialData?.courses) ? initialData.courses : [],
|
|
});
|
|
const [activeTab, setActiveTab] = useState('generelt');
|
|
const [saving, setSaving] = useState(false);
|
|
const [deletingFacility, setDeletingFacility] = useState(false);
|
|
const [mediaFeedback, setMediaFeedback] = useState("");
|
|
const [uploadingTarget, setUploadingTarget] = useState<string | null>(null);
|
|
const mainImageInputRef = useRef<HTMLInputElement | null>(null);
|
|
const logoImageInputRef = useRef<HTMLInputElement | null>(null);
|
|
const galleryInputRef = useRef<HTMLInputElement | null>(null);
|
|
|
|
// Trekk ut unike arkitekter fra alle anlegg
|
|
const uniqueArchitects = Array.from(new Set(allFacilities.map(f => f.architect).filter(Boolean))).sort();
|
|
|
|
// Sørg for at cooperating_clubs er et array
|
|
const [coopClubs, setCoopClubs] = useState<string[]>(
|
|
Array.isArray(initialData.cooperating_clubs) ? initialData.cooperating_clubs :
|
|
(typeof initialData.cooperating_clubs === 'string' ? JSON.parse(initialData.cooperating_clubs) : [])
|
|
);
|
|
|
|
const handleChange = (field: string, value: any) => {
|
|
setFormData((prev: any) => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const updateCourses = (updater: (courses: any[]) => any[]) => {
|
|
const nextCourses = updater(Array.isArray(formData.courses) ? formData.courses : []);
|
|
handleChange('courses', nextCourses);
|
|
};
|
|
|
|
const createEmptyCourse = () => {
|
|
const existingCourses = Array.isArray(formData.courses) ? formData.courses : [];
|
|
return {
|
|
_clientId: `course-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
|
name: `Ny bane ${existingCourses.length + 1}`,
|
|
status: 'ukjent',
|
|
par: '',
|
|
length_meters: '',
|
|
architect: '',
|
|
is_main_course: existingCourses.length === 0,
|
|
slope_valid_until: '',
|
|
tee_boxes: { herrer: [], damer: [] },
|
|
holes: Array.from({ length: 18 }, (_, index) => ({
|
|
hole_number: index + 1,
|
|
par: '',
|
|
hcp_index: '',
|
|
lengths: {},
|
|
})),
|
|
};
|
|
};
|
|
|
|
const handleAddCourse = () => {
|
|
updateCourses((courses) => [...courses, createEmptyCourse()]);
|
|
};
|
|
|
|
const handleRemoveCourse = (index: number) => {
|
|
const courses = Array.isArray(formData.courses) ? formData.courses : [];
|
|
const course = courses[index];
|
|
const confirmed = window.confirm(`Slette banen "${course?.name || 'uten navn'}"?`);
|
|
if (!confirmed) return;
|
|
|
|
updateCourses((currentCourses) => {
|
|
const nextCourses = currentCourses.filter((_, courseIndex) => courseIndex !== index);
|
|
if (nextCourses.length > 0 && !nextCourses.some((entry) => entry?.is_main_course)) {
|
|
nextCourses[0] = { ...nextCourses[0], is_main_course: true };
|
|
}
|
|
return nextCourses;
|
|
});
|
|
};
|
|
|
|
const handleSetMainCourse = (index: number) => {
|
|
updateCourses((courses) =>
|
|
courses.map((course, courseIndex) => ({
|
|
...course,
|
|
is_main_course: courseIndex === index,
|
|
}))
|
|
);
|
|
};
|
|
|
|
const galleryImages = normalizeStringList(formData.gallery);
|
|
|
|
const setGalleryImages = (images: string[]) => {
|
|
handleChange('gallery', Array.from(new Set(images.map((entry) => String(entry || "").trim()).filter(Boolean))));
|
|
};
|
|
|
|
const updateGalleryImage = (index: number, value: string) => {
|
|
const nextGallery = [...galleryImages];
|
|
nextGallery[index] = value;
|
|
setGalleryImages(nextGallery);
|
|
};
|
|
|
|
const removeGalleryImage = (index: number) => {
|
|
setGalleryImages(galleryImages.filter((_, currentIndex) => currentIndex !== index));
|
|
};
|
|
|
|
const moveGalleryImage = (index: number, direction: -1 | 1) => {
|
|
const nextIndex = index + direction;
|
|
if (nextIndex < 0 || nextIndex >= galleryImages.length) return;
|
|
|
|
const nextGallery = [...galleryImages];
|
|
const [item] = nextGallery.splice(index, 1);
|
|
nextGallery.splice(nextIndex, 0, item);
|
|
setGalleryImages(nextGallery);
|
|
};
|
|
|
|
const uploadFacilityImage = async (file: File) => {
|
|
const payload = new FormData();
|
|
payload.append("file", file);
|
|
payload.append("folder", "facilities");
|
|
|
|
const response = await adminFetch("/api/admin/uploads/images", {
|
|
method: "POST",
|
|
body: payload,
|
|
credentials: "include",
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response
|
|
.json()
|
|
.catch(() => ({ detail: "Kunne ikke laste opp bildet." }));
|
|
throw new Error(error.detail || "Kunne ikke laste opp bildet.");
|
|
}
|
|
|
|
const result = (await response.json()) as { url?: string };
|
|
if (!result.url) {
|
|
throw new Error("Uploaden returnerte ingen bildeadresse.");
|
|
}
|
|
|
|
return result.url;
|
|
};
|
|
|
|
const handleSingleImageUpload = async (field: 'image_url' | 'logo_url', event: ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
event.target.value = "";
|
|
|
|
if (!file) return;
|
|
|
|
setUploadingTarget(field);
|
|
setMediaFeedback("");
|
|
|
|
try {
|
|
const url = await uploadFacilityImage(file);
|
|
handleChange(field, url);
|
|
setMediaFeedback(`Lastet opp ${getMediaFieldLabel(field)}.`);
|
|
} catch (error) {
|
|
setMediaFeedback(error instanceof Error ? error.message : "Kunne ikke laste opp bildet.");
|
|
} finally {
|
|
setUploadingTarget(null);
|
|
}
|
|
};
|
|
|
|
const handleGalleryUpload = async (event: ChangeEvent<HTMLInputElement>) => {
|
|
const files = Array.from(event.target.files || []);
|
|
event.target.value = "";
|
|
|
|
if (files.length === 0) return;
|
|
|
|
setUploadingTarget('gallery');
|
|
setMediaFeedback("");
|
|
|
|
try {
|
|
const uploadedUrls = await Promise.all(files.map((file) => uploadFacilityImage(file)));
|
|
setGalleryImages([...galleryImages, ...uploadedUrls]);
|
|
setMediaFeedback(`Lastet opp ${uploadedUrls.length} galleribilde${uploadedUrls.length === 1 ? "" : "r"}.`);
|
|
} catch (error) {
|
|
setMediaFeedback(error instanceof Error ? error.message : "Kunne ikke laste opp galleribilder.");
|
|
} finally {
|
|
setUploadingTarget(null);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
const res = await adminFetch(`/api/admin/facilities/${initialData.id}/full`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
if (res.ok) {
|
|
alert("Lagret suksessfullt!");
|
|
router.refresh();
|
|
} else {
|
|
alert("Noe gikk galt under lagring.");
|
|
}
|
|
} catch (e) {
|
|
alert("Nettverksfeil.");
|
|
}
|
|
setSaving(false);
|
|
};
|
|
|
|
const handleDeleteFacility = async () => {
|
|
const confirmed = window.confirm(`Slette anlegget "${initialData.name}" permanent? Dette fjerner også baner og hull.`);
|
|
if (!confirmed) return;
|
|
|
|
setDeletingFacility(true);
|
|
try {
|
|
const response = await adminFetch(`/api/admin/facilities/${initialData.id}`, {
|
|
method: 'DELETE',
|
|
});
|
|
|
|
if (!response.ok) {
|
|
alert("Noe gikk galt under sletting.");
|
|
return;
|
|
}
|
|
|
|
router.push('/admin');
|
|
router.refresh();
|
|
} catch {
|
|
alert("Nettverksfeil under sletting.");
|
|
} finally {
|
|
setDeletingFacility(false);
|
|
}
|
|
};
|
|
|
|
const tabs = [
|
|
{ id: 'generelt', label: 'Generelt' },
|
|
{ id: 'lokasjon', label: 'Lokasjon & Kontakt' },
|
|
{ id: 'linker', label: 'Lenker & Media' },
|
|
{ id: 'okonomi', label: 'Økonomi, medlemskap og fasiliteter' },
|
|
{ id: 'baner', label: 'Baner & Scorekort' }
|
|
];
|
|
|
|
// Hjelpefunksjon for å hente ut verdi (spesielt formatert for dato)
|
|
const getValue = (field: string, type: string) => {
|
|
let val = formData[field] || "";
|
|
if (type === 'date' && val) {
|
|
val = val.split('T')[0];
|
|
}
|
|
return val;
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-[1400px] mx-auto p-4 md:p-8 relative z-40 bg-white min-h-screen">
|
|
<ScrollToTopButton />
|
|
<AdminMobileMenu />
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 pb-6 border-b border-gray-200 gap-6">
|
|
<div>
|
|
<Link href="/admin" className="text-sm font-bold text-gray-500 hover:text-[#8bc34a] mb-2 block">← Tilbake til oversikten</Link>
|
|
<h1 className="text-4xl font-black text-[#11280f]">
|
|
Rediger:{" "}
|
|
{formData.is_published ? (
|
|
<Link
|
|
href={`/golfbaner/${initialData.slug}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-[#8bc34a]"
|
|
title="Åpne anleggssiden i ny fane"
|
|
>
|
|
{initialData.name}
|
|
</Link>
|
|
) : (
|
|
<span className="text-[#8bc34a]">{initialData.name}</span>
|
|
)}
|
|
</h1>
|
|
<p className="mt-3 flex flex-wrap items-center gap-3 text-xs font-black uppercase tracking-widest">
|
|
<span className={`rounded-xl px-3 py-2 ${formData.is_published ? 'bg-[#8bc34a] text-white' : 'bg-amber-100 text-amber-800'}`}>
|
|
{formData.is_published ? 'Publisert' : 'Skjult fra offentligheten'}
|
|
</span>
|
|
<span className="rounded-xl bg-gray-100 px-3 py-2 text-gray-500">Slug: {initialData.slug}</span>
|
|
</p>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-3 md:w-auto md:flex-row">
|
|
<button
|
|
onClick={handleDeleteFacility}
|
|
disabled={deletingFacility}
|
|
className="btn btn-lg btn-danger w-full md:w-auto disabled:opacity-50"
|
|
>
|
|
{deletingFacility ? "Sletter..." : "Slett anlegg"}
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="btn btn-lg btn-primary w-full md:w-auto disabled:opacity-50"
|
|
>
|
|
{saving ? "Lagrer..." : "Lagre endringer"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:flex-row gap-10">
|
|
{/* SIDEBAR MENY */}
|
|
<div className="w-full md:w-1/4 flex flex-col gap-3">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`p-4 rounded-2xl text-left font-black uppercase text-sm tracking-widest transition-all ${activeTab === tab.id ? 'bg-[#8bc34a] text-white shadow-lg translate-x-2' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* SKJEMA OMRÅDE */}
|
|
<div className="w-full md:w-3/4">
|
|
{activeTab === 'generelt' && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
|
|
<div className="col-span-1 md:col-span-2 mb-8 rounded-[2rem] border border-gray-200 bg-gray-50 p-6 shadow-sm">
|
|
<p className="text-xs font-black uppercase tracking-widest text-gray-500">Publisering</p>
|
|
<div className="mt-4 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<p className="text-lg font-black text-[#11280f]">{formData.is_published ? 'Anlegget er publisert' : 'Anlegget er skjult'}</p>
|
|
<p className="mt-1 text-sm text-gray-500">Skjulte anlegg forsvinner fra offentlige lister og anleggssiden, men forblir tilgjengelige i admin.</p>
|
|
</div>
|
|
<label className="inline-flex items-center gap-3 rounded-2xl bg-white px-4 py-3 shadow-sm">
|
|
<input
|
|
type="checkbox"
|
|
checked={Boolean(formData.is_published)}
|
|
onChange={(e) => handleChange('is_published', e.target.checked)}
|
|
className="h-5 w-5 accent-[#8bc34a]"
|
|
/>
|
|
<span className="text-sm font-black uppercase tracking-widest text-[#11280f]">Publisert</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-1 md:col-span-2 flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Anleggsnavn</label>
|
|
<input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('name', 'text')} onChange={e => handleChange('name', e.target.value)} />
|
|
</div>
|
|
|
|
<div className="col-span-1 md:col-span-2 flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Viktig beskjed (Kursiv intro-tekst)</label>
|
|
<textarea className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base shadow-sm focus:border-[#8bc34a] outline-none" rows={4} value={getValue('footnote', 'textarea')} onChange={e => handleChange('footnote', e.target.value)} />
|
|
</div>
|
|
|
|
<div className="col-span-1 md:col-span-2 flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Hovedbeskrivelse</label>
|
|
<textarea className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base shadow-sm focus:border-[#8bc34a] outline-none" rows={8} value={getValue('description', 'textarea')} onChange={e => handleChange('description', e.target.value)} />
|
|
<p className="text-xs leading-6 text-gray-500">
|
|
Støtter enkel HTML i kort og detaljvisning:
|
|
{" "}<code><strong></code>, <code><em></code>, <code><a href=\"...\"></code>, <code><br></code>, <code><p></code>, <code><ul></code>, <code><ol></code> og <code><li></code>.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Banetype (f.eks Park/Skog)</label>
|
|
<input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('banetype', 'text')} onChange={e => handleChange('banetype', e.target.value)} />
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Sesong (f.eks April-Oktober)</label>
|
|
<input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('season', 'text')} onChange={e => handleChange('season', e.target.value)} />
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Byggeår</label>
|
|
<input type="number" className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('established_year', 'number')} onChange={e => handleChange('established_year', Number(e.target.value))} />
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Arkitekt</label>
|
|
<input
|
|
list="architect-list"
|
|
className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none transition-all"
|
|
value={getValue('architect', 'text')}
|
|
onChange={e => handleChange('architect', e.target.value)}
|
|
placeholder="Velg eller skriv inn ny..."
|
|
/>
|
|
<datalist id="architect-list">
|
|
<option value="Ukjent" />
|
|
{uniqueArchitects.map((arch: any) => <option key={arch} value={arch} />)}
|
|
</datalist>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Totallengde (meter)</label>
|
|
<input type="number" className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('length_meters', 'number')} onChange={e => handleChange('length_meters', Number(e.target.value))} />
|
|
</div>
|
|
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'lokasjon' && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
|
|
<div className="col-span-1 md:col-span-2 flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Gateadresse</label>
|
|
<input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('address', 'text')} onChange={e => handleChange('address', e.target.value)} />
|
|
</div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Postnummer</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('zipcode', 'text')} onChange={e => handleChange('zipcode', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Poststed / By</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('city', 'text')} onChange={e => handleChange('city', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Fylke</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('county', 'text')} onChange={e => handleChange('county', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Telefon</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('phone', 'text')} onChange={e => handleChange('phone', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">E-post</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('email', 'text')} onChange={e => handleChange('email', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Breddegrad (Latitude)</label><input type="number" className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('lat', 'number')} onChange={e => handleChange('lat', Number(e.target.value))} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Lengdegrad (Longitude)</label><input type="number" className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('lng', 'number')} onChange={e => handleChange('lng', Number(e.target.value))} /></div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'linker' && (
|
|
<div className="flex flex-col">
|
|
<input
|
|
ref={mainImageInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={(event) => handleSingleImageUpload('image_url', event)}
|
|
/>
|
|
<input
|
|
ref={logoImageInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={(event) => handleSingleImageUpload('logo_url', event)}
|
|
/>
|
|
<input
|
|
ref={galleryInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
multiple
|
|
className="hidden"
|
|
onChange={handleGalleryUpload}
|
|
/>
|
|
|
|
<AccordionSection
|
|
title="Anleggsbilder"
|
|
subtitle="Last opp AVIF-optimaliserte bilder direkte fra admin. Du kan også fjerne koblingen til et bilde uten å slette selve filen fra serveren."
|
|
badge={mediaFeedback || `${galleryImages.length} i galleri`}
|
|
tone="green"
|
|
>
|
|
<div className="grid gap-6 xl:grid-cols-2">
|
|
<div className="rounded-[1.75rem] border border-[#11280f]/10 bg-white p-5 shadow-sm">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-[#6A766C]">Hovedbilde</p>
|
|
<p className="mt-1 text-sm text-[#536256]">Brukes som hovedbilde på baneprofilen og som fallback i galleri.</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => mainImageInputRef.current?.click()}
|
|
disabled={uploadingTarget === 'image_url'}
|
|
className="btn btn-sm btn-secondary disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{uploadingTarget === 'image_url' ? 'Laster opp...' : 'Last opp'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleChange('image_url', '')}
|
|
disabled={!getValue('image_url', 'text')}
|
|
className="btn btn-sm btn-danger disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
Fjern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 overflow-hidden rounded-[1.5rem] border border-[#11280f]/8 bg-[#11280f]">
|
|
<div className="aspect-[16/10]">
|
|
{getValue('image_url', 'text') ? (
|
|
<img src={getValue('image_url', 'text')} alt={`${initialData.name} hovedbilde`} className="h-full w-full object-cover" />
|
|
) : (
|
|
<div className="flex h-full items-center justify-center px-6 text-center text-sm font-black uppercase tracking-[0.14em] text-white/70">
|
|
Ingen hovedbilde valgt
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 flex flex-col gap-2">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Bilde-URL</label>
|
|
<input
|
|
className="rounded-2xl border-2 border-gray-300 bg-white p-4 text-base font-bold text-black shadow-sm outline-none focus:border-[#8bc34a]"
|
|
value={getValue('image_url', 'text')}
|
|
onChange={e => handleChange('image_url', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-[1.75rem] border border-[#11280f]/10 bg-white p-5 shadow-sm">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-[#6A766C]">Logo</p>
|
|
<p className="mt-1 text-sm text-[#536256]">Vises i baneprofilen når klubben har egen logo.</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => logoImageInputRef.current?.click()}
|
|
disabled={uploadingTarget === 'logo_url'}
|
|
className="btn btn-sm btn-secondary disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{uploadingTarget === 'logo_url' ? 'Laster opp...' : 'Last opp'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleChange('logo_url', '')}
|
|
disabled={!getValue('logo_url', 'text')}
|
|
className="btn btn-sm btn-danger disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
Fjern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 overflow-hidden rounded-[1.5rem] border border-[#11280f]/8 bg-[#f6f7f3]">
|
|
<div className="aspect-square max-w-[240px]">
|
|
{getValue('logo_url', 'text') ? (
|
|
<img src={getValue('logo_url', 'text')} alt={`${initialData.name} logo`} className="h-full w-full object-contain p-4" />
|
|
) : (
|
|
<div className="flex h-full items-center justify-center px-6 text-center text-sm font-black uppercase tracking-[0.14em] text-[#11280f]/45">
|
|
Ingen logo valgt
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 flex flex-col gap-2">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Logo-URL</label>
|
|
<input
|
|
className="rounded-2xl border-2 border-gray-300 bg-white p-4 text-base font-bold text-black shadow-sm outline-none focus:border-[#8bc34a]"
|
|
value={getValue('logo_url', 'text')}
|
|
onChange={e => handleChange('logo_url', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 rounded-[1.75rem] border border-[#11280f]/10 bg-white p-5 shadow-sm">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-[#6A766C]">Galleri</p>
|
|
<p className="mt-1 text-sm text-[#536256]">Bildene roteres i toppen av baneprofilen. Du kan endre rekkefølge, fjerne dem eller bruke et galleribilde som hovedbilde.</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => galleryInputRef.current?.click()}
|
|
disabled={uploadingTarget === 'gallery'}
|
|
className="btn btn-sm btn-secondary disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{uploadingTarget === 'gallery' ? 'Laster opp...' : 'Last opp til galleri'}
|
|
</button>
|
|
</div>
|
|
|
|
{galleryImages.length === 0 ? (
|
|
<div className="mt-4 rounded-[1.5rem] border border-dashed border-[#11280f]/12 bg-[#F7F9F2] px-4 py-5 text-sm font-bold text-[#536256]">
|
|
Ingen galleribilder lagt til ennå.
|
|
</div>
|
|
) : (
|
|
<div className="mt-4 grid gap-4">
|
|
{galleryImages.map((url, index) => (
|
|
<div key={`${url}-${index}`} className="rounded-[1.5rem] border border-[#112015]/8 bg-[#FCFDF9] p-4">
|
|
<div className="grid gap-4 lg:grid-cols-[220px,minmax(0,1fr)]">
|
|
<div className="overflow-hidden rounded-[1.25rem] border border-[#112015]/8 bg-[#112015]">
|
|
<div className="aspect-[4/3]">
|
|
<img src={url} alt={`${initialData.name} galleri ${index + 1}`} className="h-full w-full object-cover" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[10px] font-black uppercase tracking-[0.18em] text-[#6A766C]">Galleribilde {index + 1}</p>
|
|
{getValue('image_url', 'text') === url ? (
|
|
<p className="mt-1 text-sm font-black text-[#FF5722]">Brukes også som hovedbilde</p>
|
|
) : null}
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleChange('image_url', url)}
|
|
className="btn btn-sm btn-secondary"
|
|
>
|
|
Bruk som hovedbilde
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => moveGalleryImage(index, -1)}
|
|
disabled={index === 0}
|
|
className="btn btn-sm btn-secondary disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
Opp
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => moveGalleryImage(index, 1)}
|
|
disabled={index === galleryImages.length - 1}
|
|
className="btn btn-sm btn-secondary disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
Ned
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeGalleryImage(index)}
|
|
className="btn btn-sm btn-danger"
|
|
>
|
|
Fjern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="flex flex-col gap-2">
|
|
<span className="text-[10px] font-black uppercase tracking-[0.18em] text-[#6A766C]">URL</span>
|
|
<input
|
|
value={url}
|
|
onChange={(event) => updateGalleryImage(index, event.target.value)}
|
|
className="rounded-[1.1rem] border border-[#112015]/10 bg-white px-4 py-3 text-base text-[#112015] outline-none focus:border-[#8BC34A]"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Nettside URL</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('website_url', 'text')} onChange={e => handleChange('website_url', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Golfbox Booking URL</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('golfbox_booking_url', 'text')} onChange={e => handleChange('golfbox_booking_url', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Golfbox Turnering URL</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('golfbox_tournament_url', 'text')} onChange={e => handleChange('golfbox_tournament_url', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Baneguide URL</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('baneguide_url', 'text')} onChange={e => handleChange('baneguide_url', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Flyfoto URL</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('flyfoto_url', 'text')} onChange={e => handleChange('flyfoto_url', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Vær URL (YR)</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('weather_url', 'text')} onChange={e => handleChange('weather_url', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Webkamera URL</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('webcam_url', 'text')} onChange={e => handleChange('webcam_url', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Video URL (YouTube/Vimeo)</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('video_url', 'text')} onChange={e => handleChange('video_url', e.target.value)} /></div>
|
|
|
|
<ListObjectEditor
|
|
label="Sosiale Medier (Legg inn f.eks facebook, instagram, linkedin)"
|
|
value={formData.social_links}
|
|
templateKeys={['platform', 'url']}
|
|
onChange={(v) => handleChange('social_links', v)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'okonomi' && (
|
|
<div className="flex flex-col">
|
|
{/* MEDLEMSKAP */}
|
|
<AccordionSection
|
|
title="Medlemskap"
|
|
badge={getValue('membership_updated_at', 'date') || 'Ingen dato'}
|
|
>
|
|
<div className="flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Sist Oppdatert (Dato)</label>
|
|
<input type="date" className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none w-max" value={getValue('membership_updated_at', 'date')} onChange={e => handleChange('membership_updated_at', e.target.value)} />
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Navn på standard medlemskap</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('navn_standard_medlemskap', 'text')} onChange={e => handleChange('navn_standard_medlemskap', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Pris standard (kun tall)</label><input type="number" className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('standard_medlemskap', 'number')} onChange={e => handleChange('standard_medlemskap', Number(e.target.value))} /></div>
|
|
<div className="flex flex-col gap-2 mb-8 col-span-1 md:col-span-2"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Kommentar standard</label><textarea className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base shadow-sm focus:border-[#8bc34a] outline-none" rows={2} value={getValue('standard_medlemskap_kommentarer', 'textarea')} onChange={e => handleChange('standard_medlemskap_kommentarer', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Navn på rimeligste</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('navn_rimeligste_alternativ', 'text')} onChange={e => handleChange('navn_rimeligste_alternativ', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Pris rimeligste (kun tall)</label><input type="number" className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('rimeligste_alternativ', 'number')} onChange={e => handleChange('rimeligste_alternativ', Number(e.target.value))} /></div>
|
|
<div className="flex flex-col gap-2 mb-8 col-span-1 md:col-span-2"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Lenke til medlemskapsside</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('medlemskap_url', 'text')} onChange={e => handleChange('medlemskap_url', e.target.value)} /></div>
|
|
</div>
|
|
</AccordionSection>
|
|
|
|
{/* GREENFEE */}
|
|
<AccordionSection
|
|
title="Greenfee / Gjestespill"
|
|
badge={`${Array.isArray(formData.greenfee) ? formData.greenfee.length : 0} priser`}
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Lenke til Greenfee-side</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('greenfee_url', 'text')} onChange={e => handleChange('greenfee_url', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Krav til Gjestespill (f.eks Klubbhandicap)</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('guest_requirements', 'text')} onChange={e => handleChange('guest_requirements', e.target.value)} /></div>
|
|
</div>
|
|
<MultiSelect
|
|
label="Samarbeidende Klubber (Gjestespill etc.)"
|
|
options={allFacilities.filter(f => f.id !== initialData.id)}
|
|
selected={coopClubs}
|
|
onChange={(val) => {
|
|
setCoopClubs(val);
|
|
handleChange('cooperating_clubs', val);
|
|
}}
|
|
/>
|
|
<ListObjectEditor
|
|
label="Greenfee Priser (Legg til rader for Voksen/Junior etc)"
|
|
value={formData.greenfee}
|
|
templateKeys={['banenavn', 'priskategori', 'pris_voksne', 'pris_junior']}
|
|
onChange={(v) => handleChange('greenfee', v)}
|
|
/>
|
|
</AccordionSection>
|
|
|
|
{/* VEIEN TIL GOLF (VTG) */}
|
|
<AccordionSection
|
|
title="Veien til Golf (VTG)"
|
|
badge={getValue('vtg_pris', 'number') ? `${getValue('vtg_pris', 'number')} kr` : 'Ingen pris'}
|
|
tone="green"
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Pris VTG kurs (kun tall)</label><input type="number" className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('vtg_pris', 'number')} onChange={e => handleChange('vtg_pris', Number(e.target.value))} /></div>
|
|
<div className="flex flex-col gap-2 mb-8"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Lenke til VTG påmelding</label><input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('vtg_lenke', 'text')} onChange={e => handleChange('vtg_lenke', e.target.value)} /></div>
|
|
<div className="flex flex-col gap-2 mb-8 col-span-1 md:col-span-2"><label className="text-xs font-black uppercase tracking-widest text-gray-600">Beskrivelse / Hva er inkludert</label><textarea className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base shadow-sm focus:border-[#8bc34a] outline-none" rows={3} value={getValue('vtg_beskrivelse', 'textarea')} onChange={e => handleChange('vtg_beskrivelse', e.target.value)} /></div>
|
|
</div>
|
|
<ListObjectEditor
|
|
label="Kursdatoer"
|
|
value={formData.vtg_datoer}
|
|
templateKeys={['dato', 'status']}
|
|
onChange={(v) => handleChange('vtg_datoer', v)}
|
|
/>
|
|
</AccordionSection>
|
|
|
|
<div className="mt-8 border-t-2 border-gray-200 pt-8">
|
|
<KeyValueEditor label="Fasiliteter (Proshop, Kafé etc.)" value={formData.amenities} onChange={(v) => handleChange('amenities', v)} />
|
|
<div className="flex flex-col gap-4 mb-8 bg-gray-100 p-6 md:p-8 rounded-[2rem] border border-gray-200 shadow-sm">
|
|
<label className="text-sm font-black uppercase tracking-widest text-[#11280f]">Norsk Seniorgolf (NSG)</label>
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">NSG URL</label>
|
|
<input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('nsg_url', 'text')} onChange={e => handleChange('nsg_url', e.target.value)} />
|
|
</div>
|
|
<KeyValueEditor label="NSG Info" value={formData.nsg_data} onChange={(v) => handleChange('nsg_data', v)} />
|
|
</div>
|
|
<div className="flex flex-col gap-4 mb-8 bg-gray-100 p-6 md:p-8 rounded-[2rem] border border-gray-200 shadow-sm">
|
|
<label className="text-sm font-black uppercase tracking-widest text-[#11280f]">Golfamore</label>
|
|
<div className="flex flex-col gap-2">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Golfamore URL</label>
|
|
<input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('golfamore_url', 'text')} onChange={e => handleChange('golfamore_url', e.target.value)} />
|
|
</div>
|
|
<KeyValueEditor label="Golfamore Info" value={formData.golfamore_data} onChange={(v) => handleChange('golfamore_data', v)} />
|
|
</div>
|
|
<div className="flex flex-col gap-2 mb-8">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Lenke til Golfpakker-side</label>
|
|
<input className="p-4 rounded-2xl border-2 border-gray-300 bg-white text-black text-base font-bold shadow-sm focus:border-[#8bc34a] outline-none" value={getValue('golfpakker_url', 'text')} onChange={e => handleChange('golfpakker_url', e.target.value)} placeholder="Tomt felt bruker ordinær nettside som fallback" />
|
|
</div>
|
|
|
|
{/* HER ER GOLFPAKKENE SOM JEG MISTET I FORRIGE RUNDE */}
|
|
<ListObjectEditor
|
|
label="Golfpakker"
|
|
value={formData.golfpakker}
|
|
templateKeys={['navn', 'pris', 'beskrivelse', 'lenke']}
|
|
onChange={(v) => handleChange('golfpakker', v)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'baner' && (
|
|
<div className="flex flex-col gap-8">
|
|
<div className="flex flex-col gap-4 rounded-2xl border-2 border-[#7ca982] bg-[#f1f7ed] p-6">
|
|
<div>
|
|
<h3 className="mb-2 text-lg font-black uppercase tracking-widest text-[#11280f]">Baner og Scorekort</h3>
|
|
<p className="text-sm font-medium text-gray-800">Bruk det interaktive skjemaet under for å redigere lengder, par og utslag. Nye baner lagres sammen med anlegget og blir behandlet som egne baner i detaljvisningen.</p>
|
|
</div>
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<span className="rounded-xl bg-white px-4 py-3 text-xs font-black uppercase tracking-widest text-gray-500 shadow-sm">{formData.courses?.length || 0} baner</span>
|
|
<button onClick={handleAddCourse} className="btn btn-md btn-secondary w-full sm:w-auto">+ Legg til bane</button>
|
|
</div>
|
|
</div>
|
|
|
|
{formData.courses?.map((course: any, cIdx: number) => (
|
|
<AccordionSection
|
|
key={course.id || course._clientId || cIdx}
|
|
title={course.name || `Bane ${cIdx + 1}`}
|
|
subtitle={course.is_main_course ? 'Hovedbane' : 'Sekundærbane'}
|
|
badge={`${course.holes?.length || 0} hull`}
|
|
>
|
|
<div className="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b-2 border-gray-200 pb-4">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<label className="inline-flex items-center gap-3 rounded-xl bg-white px-4 py-2 shadow-sm">
|
|
<input
|
|
type="radio"
|
|
name="main-course"
|
|
checked={Boolean(course.is_main_course)}
|
|
onChange={() => handleSetMainCourse(cIdx)}
|
|
className="h-4 w-4 accent-[#8bc34a]"
|
|
/>
|
|
<span className="text-xs font-black uppercase tracking-widest text-[#11280f]">Hovedbane</span>
|
|
</label>
|
|
<span className={`px-4 py-2 rounded-xl text-xs font-black uppercase tracking-widest ${course.is_main_course ? 'bg-[#8bc34a] text-white shadow-md' : 'bg-gray-300 text-gray-700'}`}>
|
|
{course.is_main_course ? 'Hovedbane' : 'Sekundærbane'}
|
|
</span>
|
|
</div>
|
|
<button onClick={() => handleRemoveCourse(cIdx)} className="btn btn-md btn-danger w-full md:w-auto">Slett bane</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
|
|
<div className="flex flex-col gap-2 mb-6">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Banenavn</label>
|
|
<input className="p-4 rounded-2xl border-2 border-gray-300 focus:border-[#8bc34a] outline-none font-bold text-black bg-white text-base shadow-sm" value={course.name || ""} onChange={e => {
|
|
updateCourses((courses) => {
|
|
const nextCourses = [...courses];
|
|
nextCourses[cIdx] = {...course, name: e.target.value};
|
|
return nextCourses;
|
|
});
|
|
}} />
|
|
</div>
|
|
<div className="flex flex-col gap-2 mb-6">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Status</label>
|
|
<select className="p-4 rounded-2xl border-2 border-gray-300 focus:border-[#8bc34a] outline-none font-bold text-black bg-white text-base shadow-sm" value={course.status || "ukjent"} onChange={e => {
|
|
updateCourses((courses) => {
|
|
const nextCourses = [...courses];
|
|
nextCourses[cIdx] = {...course, status: e.target.value};
|
|
return nextCourses;
|
|
});
|
|
}}>
|
|
<option value="aapen">🟢 Åpen</option>
|
|
<option value="aapen_med_vintergreener">🟡 Vintergreener</option>
|
|
<option value="aapner_snart">🟡 Åpner Snart</option>
|
|
<option value="stengt">🔴 Stengt</option>
|
|
<option value="nedlagt">⚫ Nedlagt</option>
|
|
<option value="ukjent">⚪ Ukjent</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex flex-col gap-2 mb-6">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Total Par (Bane)</label>
|
|
<input type="number" className="p-4 rounded-2xl border-2 border-gray-300 focus:border-[#8bc34a] outline-none font-bold text-black bg-white text-base shadow-sm" value={course.par || ""} onChange={e => {
|
|
updateCourses((courses) => {
|
|
const nextCourses = [...courses];
|
|
nextCourses[cIdx] = {...course, par: Number(e.target.value)};
|
|
return nextCourses;
|
|
});
|
|
}} />
|
|
</div>
|
|
<div className="flex flex-col gap-2 mb-6">
|
|
<label className="text-xs font-black uppercase tracking-widest text-gray-600">Utløpsdato Slope</label>
|
|
<input type="date" className="p-4 rounded-2xl border-2 border-gray-300 focus:border-[#8bc34a] outline-none font-bold text-black bg-white text-base shadow-sm" value={course.slope_valid_until ? course.slope_valid_until.split('T')[0] : ""} onChange={e => {
|
|
updateCourses((courses) => {
|
|
const nextCourses = [...courses];
|
|
nextCourses[cIdx] = {...course, slope_valid_until: e.target.value};
|
|
return nextCourses;
|
|
});
|
|
}} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* DET NYE SCOREKORTET INKLUDERES HER */}
|
|
<ScorecardBuilder
|
|
course={course}
|
|
onChange={(updatedCourse) => {
|
|
updateCourses((courses) => {
|
|
const nextCourses = [...courses];
|
|
nextCourses[cIdx] = updatedCourse;
|
|
return nextCourses;
|
|
});
|
|
}}
|
|
/>
|
|
</AccordionSection>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|