-
- Services medarbejderen kan udføre
-
-
-
-
-
-
- Klip & Farve
- 60-120 min · fra 795 kr
-
- Varighed: Standard
-
+
+
+ Priserne vises for stillingen "Master Stylist". Tip: Hold Shift nede for at vælge en række, eller Ctrl for at vælge flere enkeltvis.
+
+ ⋮⋮
+
+ ${service.name}
+
+
+ kr
+
+ ${formatDuration(effectiveDuration)}
+ `;
+ } else {
+ // Available: name only (no price/duration)
+ row.innerHTML = `
+ ⋮⋮
+
+ ${service.name}
+
+ `;
+ }
+
+ return row;
+ }
+
+ // Render all services
+ function renderServices(searchQuery = '') {
+ const lowerQuery = searchQuery.toLowerCase();
+
+ // Group services by category
+ const selectedByCategory = {};
+ const availableByCategory = {};
+
+ allServices.forEach(service => {
+ const state = serviceState.get(service.id);
+ const matchesSearch = !searchQuery || service.name.toLowerCase().includes(lowerQuery);
+
+ if (state.selected) {
+ if (!selectedByCategory[service.category]) {
+ selectedByCategory[service.category] = [];
+ }
+ selectedByCategory[service.category].push(service);
+ } else if (matchesSearch) {
+ if (!availableByCategory[service.category]) {
+ availableByCategory[service.category] = [];
+ }
+ availableByCategory[service.category].push(service);
+ }
});
+
+ // Render selected services
+ selectedContainer.innerHTML = '';
+ const selectedCategories = Object.entries(selectedByCategory);
+
+ if (selectedCategories.length === 0) {
+ selectedContainer.innerHTML = `
+
+
+ Træk services hertil
+
+ `;
+ } else {
+ selectedCategories.forEach(([category, services]) => {
+ const group = document.createElement('swp-service-category-group');
+ group.innerHTML = `${category} `;
+ services.forEach(service => {
+ group.appendChild(createServiceRow(service, true));
+ });
+ selectedContainer.appendChild(group);
+ });
+ }
+
+ // Render available services
+ availableContainer.innerHTML = '';
+ const availableCategories = Object.entries(availableByCategory);
+
+ availableCategories.forEach(([category, services]) => {
+ const group = document.createElement('swp-service-category-group');
+ group.innerHTML = `${category} `;
+ services.forEach(service => {
+ group.appendChild(createServiceRow(service, false));
+ });
+ availableContainer.appendChild(group);
+ });
+ }
+
+ // Multi-selection state
+ let selectedServiceIds = new Set();
+ let lastClickedId = null;
+
+ // Get all service IDs in order (for shift-selection)
+ function getOrderedServiceIds(container) {
+ return Array.from(container.querySelectorAll('swp-service-row'))
+ .map(row => parseInt(row.dataset.id));
+ }
+
+ // Handle service row click for selection
+ function handleServiceClick(e, row) {
+ const serviceId = parseInt(row.dataset.id);
+ const container = row.closest('swp-services-selected, swp-services-available');
+
+ if (e.shiftKey && lastClickedId !== null) {
+ // Shift+click: range selection
+ const orderedIds = getOrderedServiceIds(container);
+ const startIndex = orderedIds.indexOf(lastClickedId);
+ const endIndex = orderedIds.indexOf(serviceId);
+
+ if (startIndex !== -1 && endIndex !== -1) {
+ const minIndex = Math.min(startIndex, endIndex);
+ const maxIndex = Math.max(startIndex, endIndex);
+
+ for (let i = minIndex; i <= maxIndex; i++) {
+ selectedServiceIds.add(orderedIds[i]);
+ }
+ }
+ } else if (e.ctrlKey || e.metaKey) {
+ // Ctrl/Cmd+click: toggle individual selection
+ if (selectedServiceIds.has(serviceId)) {
+ selectedServiceIds.delete(serviceId);
+ } else {
+ selectedServiceIds.add(serviceId);
+ }
+ } else {
+ // Simple click: single selection
+ selectedServiceIds.clear();
+ selectedServiceIds.add(serviceId);
+ }
+
+ lastClickedId = serviceId;
+ updateSelectionVisual();
+ }
+
+ // Update visual selection state
+ function updateSelectionVisual() {
+ document.querySelectorAll('swp-service-row').forEach(row => {
+ const serviceId = parseInt(row.dataset.id);
+ if (selectedServiceIds.has(serviceId)) {
+ row.classList.add('multi-selected');
+ } else {
+ row.classList.remove('multi-selected');
+ }
+ });
+ }
+
+ // Move service between columns
+ function moveService(serviceId, toSelected) {
+ const state = serviceState.get(parseInt(serviceId));
+ if (state) {
+ state.selected = toSelected;
+ renderServices(serviceSearch.value);
+ }
+ }
+
+ // Move multiple services
+ function moveMultipleServices(serviceIds, toSelected) {
+ serviceIds.forEach(id => {
+ const state = serviceState.get(id);
+ if (state) {
+ state.selected = toSelected;
+ }
+ });
+ selectedServiceIds.clear();
+ renderServices(serviceSearch.value);
+ }
+
+ // Drag and drop handlers
+ let draggedId = null;
+ let draggedIds = [];
+
+ // Click handler for row selection
+ document.addEventListener('click', (e) => {
+ const row = e.target.closest('swp-service-row');
+ // Don't select on input focus
+ if (row && e.target.tagName !== 'INPUT') {
+ handleServiceClick(e, row);
+ }
});
- // Specialty tag selection
- document.querySelectorAll('swp-specialty-tag').forEach(tag => {
- tag.addEventListener('click', () => {
- tag.classList.toggle('selected');
- });
+ document.addEventListener('dragstart', (e) => {
+ const row = e.target.closest('swp-service-row');
+ if (row) {
+ const serviceId = parseInt(row.dataset.id);
+
+ // If dragging a selected row, drag all selected
+ if (selectedServiceIds.has(serviceId) && selectedServiceIds.size > 1) {
+ draggedIds = Array.from(selectedServiceIds);
+ // Mark all selected as dragging
+ document.querySelectorAll('swp-service-row.multi-selected').forEach(r => {
+ r.classList.add('dragging');
+ });
+ } else {
+ // Otherwise, just drag this one
+ draggedIds = [serviceId];
+ row.classList.add('dragging');
+ }
+
+ draggedId = row.dataset.id;
+ e.dataTransfer.effectAllowed = 'move';
+ e.dataTransfer.setData('text/plain', draggedIds.join(','));
+ }
});
+ document.addEventListener('dragend', (e) => {
+ document.querySelectorAll('swp-service-row.dragging').forEach(row => {
+ row.classList.remove('dragging');
+ });
+ draggedId = null;
+ draggedIds = [];
+ selectedContainer.classList.remove('drag-over');
+ availableContainer.classList.remove('drag-over');
+ });
+
+ selectedContainer.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ selectedContainer.classList.add('drag-over');
+ });
+
+ selectedContainer.addEventListener('dragleave', (e) => {
+ if (!selectedContainer.contains(e.relatedTarget)) {
+ selectedContainer.classList.remove('drag-over');
+ }
+ });
+
+ selectedContainer.addEventListener('drop', (e) => {
+ e.preventDefault();
+ selectedContainer.classList.remove('drag-over');
+ if (draggedIds.length > 0) {
+ moveMultipleServices(draggedIds, true);
+ } else if (draggedId) {
+ moveService(draggedId, true);
+ }
+ });
+
+ availableContainer.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ availableContainer.classList.add('drag-over');
+ });
+
+ availableContainer.addEventListener('dragleave', (e) => {
+ if (!availableContainer.contains(e.relatedTarget)) {
+ availableContainer.classList.remove('drag-over');
+ }
+ });
+
+ availableContainer.addEventListener('drop', (e) => {
+ e.preventDefault();
+ availableContainer.classList.remove('drag-over');
+ if (draggedIds.length > 0) {
+ moveMultipleServices(draggedIds, false);
+ } else if (draggedId) {
+ moveService(draggedId, false);
+ }
+ });
+
+ // Price input handler
+ selectedContainer.addEventListener('input', (e) => {
+ if (e.target.type === 'number') {
+ const row = e.target.closest('swp-service-row');
+ const serviceId = parseInt(row.dataset.id);
+ const state = serviceState.get(serviceId);
+ const originalPrice = parseInt(e.target.dataset.original);
+ const newPrice = parseInt(e.target.value) || originalPrice;
+
+ if (newPrice !== originalPrice) {
+ state.priceOverride = newPrice;
+ row.classList.add('has-override');
+ } else {
+ state.priceOverride = null;
+ row.classList.remove('has-override');
+ }
+ }
+ });
+
+ // Search handler
+ let searchTimeout;
+ serviceSearch.addEventListener('input', (e) => {
+ clearTimeout(searchTimeout);
+ searchTimeout = setTimeout(() => {
+ renderServices(e.target.value);
+ }, 150);
+ });
+
+ // Initial load from JSON
+ loadServices();
+
+ // Services panel toggle
+ const servicesPanel = document.getElementById('servicesPanel');
+ const panelToggle = document.getElementById('panelToggle');
+ const editServicesBtn = document.getElementById('editServicesBtn');
+
+ function toggleServicesPanel() {
+ const isCollapsed = servicesPanel.classList.contains('collapsed');
+ servicesPanel.classList.toggle('collapsed', !isCollapsed);
+ servicesPanel.classList.toggle('expanded', isCollapsed);
+ editServicesBtn.classList.toggle('active', isCollapsed);
+ editServicesBtn.innerHTML = isCollapsed
+ ? ` Luk`
+ : ` Rediger`;
+ }
+
+ panelToggle.addEventListener('click', toggleServicesPanel);
+ editServicesBtn.addEventListener('click', toggleServicesPanel);
+
// Checkbox rows
document.querySelectorAll('swp-checkbox-row').forEach(row => {
row.addEventListener('click', () => {
+
+
+
+
+
+
+
+ Tilgængelige services
+
+ 
+
+
+
+
+
+
+
+
-
-
-
-
-
- Balayage
- 90-150 min · fra 1.295 kr
-
- Varighed: Standard
-
-
-
-
-
-
-
- Dameklip
- 45 min · fra 395 kr
-
- Varighed: -10 min
-
-
-
-
-
-
-
- Herreklip
- 30 min · fra 295 kr
-
- Varighed: Standard
-
-
-
-
-
-
-
- Extensions
- 120-180 min · fra 2.500 kr
-
- Varighed: —
-
-
-
-
-
-
-
- Olaplex Behandling
- 45 min · 350 kr
-
- Varighed: Standard
-
-
-
-
-
- Specialer
-
- Farve
- Balayage
- Highlights
- Extensions
- Olaplex
- Permanent
- Brude-styling
- Kort hår
-
+
+
+
+ Valgte services
+
+
+
+
+
+ Træk services hertil
+
+
@@ -2045,20 +2461,434 @@
});
});
- // Service item selection
- document.querySelectorAll('swp-service-item').forEach(item => {
- item.addEventListener('click', () => {
- item.classList.toggle('selected');
+ // ==========================================
+ // Services Drag-Drop Functionality
+ // ==========================================
+
+ // Category colors
+ const categoryColors = {
+ 'Klip dame, herre og børn': '#1e88e5',
+ 'Farvebehandlinger': '#8e24aa',
+ 'Striber/ Refleksbehandling': '#f4511e',
+ 'Hårvask med styling eller uden styling': '#00897b',
+ 'Henna naturlig hårfarver': '#6d4c41',
+ 'Kurbehandling': '#43a047',
+ 'Bryn og vipper': '#ec407a',
+ 'Balayage': '#ab47bc',
+ 'Skæg': '#5c6bc0',
+ 'Gloss': '#ffb300',
+ 'Håropsætning': '#e91e63',
+ 'Modeller': '#78909c',
+ 'Tristan farve modeller': '#26a69a',
+ 'Uden kategori': '#607d8b',
+ 'Tilvalg services': '#009688'
+ };
+
+ // Pre-selected services (by name)
+ const preSelectedServices = [
+ // Klip
+ 'Dameklip',
+ 'Dameklip uden snak',
+ 'Herreklip',
+ 'Herreklip uden snak',
+ 'Skin fade',
+ 'Børneklip 0-4 år',
+ 'Børneklip 4-8 år',
+ // Farve
+ 'Bundfarve almindelig udgroning maks 3 cm',
+ 'Helfarve kort hår',
+ 'Helfarve mellemlangt hår',
+ // Striber
+ 'Striber kort hår',
+ 'Striber mellemlangt hår',
+ // Bryn og vipper
+ 'Farvning vipper & bryn',
+ 'Farvning vipper',
+ 'Farvning og retning af bryn',
+ // Balayage
+ 'Balayage maks til skulderen',
+ 'Balayage langt hår',
+ // Gloss
+ 'Glossing kort hår',
+ 'Glossing mellemlangt/ langt hår'
+ ];
+
+ // All services data - loaded from JSON
+ let allServices = [];
+ const serviceState = new Map();
+
+ const selectedContainer = document.getElementById('selectedServices');
+ const availableContainer = document.getElementById('availableServices');
+ const serviceSearch = document.getElementById('serviceSearch');
+
+ // Load services from JSON
+ async function loadServices() {
+ try {
+ const response = await fetch('data/kk-services.json');
+ const data = await response.json();
+
+ let id = 1;
+ for (const [category, services] of Object.entries(data)) {
+ const color = categoryColors[category] || '#607d8b';
+ services.forEach(service => {
+ const isPreSelected = preSelectedServices.includes(service.name);
+ allServices.push({
+ id: id,
+ name: service.name,
+ category: category,
+ color: color,
+ duration: service.duration,
+ price: service.price,
+ selected: isPreSelected
+ });
+
+ serviceState.set(id, {
+ selected: isPreSelected,
+ priceOverride: null,
+ durationOverride: 0
+ });
+
+ id++;
+ });
+ }
+
+ console.log(`Loaded ${allServices.length} services from JSON`);
+ renderServices();
+ } catch (error) {
+ console.error('Fejl ved indlæsning af services:', error);
+ }
+ }
+
+ // Format duration
+ function formatDuration(minutes) {
+ if (minutes >= 60) {
+ const hours = Math.floor(minutes / 60);
+ const mins = minutes % 60;
+ return mins > 0 ? `${hours}t ${mins}m` : `${hours}t`;
+ }
+ return `${minutes}m`;
+ }
+
+ // Create service row HTML
+ function createServiceRow(service, isSelected) {
+ const state = serviceState.get(service.id);
+ const effectivePrice = state.priceOverride !== null ? state.priceOverride : service.price;
+ const effectiveDuration = service.duration + state.durationOverride;
+
+ const row = document.createElement('swp-service-row');
+ row.dataset.id = service.id;
+ row.dataset.category = service.category;
+ row.draggable = true;
+
+ if (state.priceOverride !== null || state.durationOverride !== 0) {
+ row.classList.add('has-override');
+ }
+
+ if (isSelected) {
+ // Selected: with editable inputs
+ row.innerHTML = `
+
+
+