gistfile1.txt

<script>
	export let name;
	let input = {
		row : { start: 0, end: 0 },
		column : { start: 1, end: 100 }
	}
	let id = 0
	let columnCount = 480
	let classPeriods = []
	function addClassPeriod() {
		let newClassPeriod = {
			selected: false,
			id: id,
			row : {...input.row},
			column : {...input.column}
		}
		classPeriods = [...classPeriods, newClassPeriod]
	}
	function hoverItem(item) {
		item.selected = !item.selected
		item.column.end+= 10
		console.log(item)
	}
</script>

<style>
	element {
		--start-col: 1;
		--end-col: 1;
		--start-row: 1;
		--end-row: 1;
		--column-count: 480;
	}

	.layout {
		position: relative;
		display: grid;
		grid-template-columns: 3fr 1fr;
		grid-auto-rows: minmax(100px, auto);
		border: 1px
	}

	.wrapper {
		position: relative;
		display: grid;
		grid-template-columns: repeat(var(--column-count), 1fr);
		grid-auto-rows: 20px;
		row-gap: 10px
	}

	

	.wrapper>div {
		background-color: blue;
		grid-column-start: var(--start-col);
		grid-column-end: var(--end-col);
		grid-row: var(--start-row) / var(--end-row)
	}

	.wrapper > .selected {
		background-color: aqua;
	}
	
	h1 {
		color: purple;
	}
</style>

<h1>Hello {name}!</h1>
number of cols:
<div>
		<input type="text" bind:value="{columnCount}" />
</div>
row:
<div>
		<input type="text" bind:value="{input.row.start}" />
		<input type="text" bind:value="{input.row.end}" />
</div>
col:
<div>
		<input type="text" bind:value="{input.column.start}" />
		<input type="text" bind:value="{input.column.end}" />
</div>

<button on:click={addClassPeriod}>Add Class</button>
<div class="layout">
	<div class="wrapper" style="--column-count: { columnCount };">
		{#each classPeriods as item}
			<div class:selected={item.selected} on:click={ () => hoverItem(item) } style="--start-col: { item.column.start }; --end-col: { item.column.end }; --start-row: {item.row.start}; --end-row: {item.row.end}"></div>
			{/each}
	</div>
	<div>
		<h1>items:</h1>
		<div>
			{#each classPeriods as item, index}
				<div>Class: [{item.column.start}, {item.column.end}]</div>
			{/each}
		</div>
	</div>
</div>