Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
data.js
category-descriptions.js
<script>
// Data
import data from './data.js';
import categoryDescriptions from './category-descriptions.js';

// @todo Fill the selectedModules array, by checking some items programatically?
// We want to have some default items checked by default: based on item.preSelected

let selectedModules = []
$: totalTime = selectedModules.reduce((val, entry)=>val+entry.length, 0)
$: totalTimeFormatted = timeConvert(totalTime);
// Price calculation: based on time
// @todo if total time exceeds 6 hours, make a note that it should likely be split up into two workshop moments
let totalPrice = 1500;

$: if ( totalTime < 310 ) {
totalPrice = 800;
} else if ( totalTime < 510 ) {
totalPrice = 1200;
}
let groups = data.reduce((curr, val) => {
let group = curr.find(g => g.category === `${val.category}`)
if (group) {
group.values.push(val)
} else {
curr.push({ category: `${val.category}`, values: [ val ] })
}
return curr
}, [])

// @Todo the hours formatter could be nicer, just displaying minutes until you have selected 1 hour, and properly formatting hour/hours instead of using hour(s) and minute(s)
function timeConvert(n) {
loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */