Refactors calendar project structure and build configuration

Consolidates V2 codebase into main project directory
Updates build script to support simplified entry points
Removes redundant files and cleans up project organization

Simplifies module imports and entry points for calendar application
This commit is contained in:
Janus C. H. Knudsen 2025-12-17 23:54:25 +01:00
parent 9f360237cf
commit 863b433eba
200 changed files with 2331 additions and 16193 deletions

View file

@ -1,76 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Plantempus - Week View</title>
<!-- Modular CSS Files -->
<link rel="stylesheet" href="css/calendar-base-css.css">
<link rel="stylesheet" href="css/calendar-layout-css.css">
<link rel="stylesheet" href="css/calendar-components-css.css">
<link rel="stylesheet" href="css/calendar-events-css.css">
<link rel="stylesheet" href="css/calendar-month-css.css">
<link rel="stylesheet" href="css/calendar-popup-css.css">
</head>
<body>
<div class="calendar-wrapper">
<swp-calendar>
<!-- Navigation Bar -->
<swp-calendar-nav>
<swp-nav-group>
<swp-nav-button data-action="prev"></swp-nav-button>
<swp-nav-button data-action="next"></swp-nav-button>
<swp-nav-button data-action="today">Today</swp-nav-button>
</swp-nav-group>
<swp-week-info>
<swp-week-number>Week 3</swp-week-number>
<swp-date-range>Jan 15 - Jan 21, 2024</swp-date-range>
</swp-week-info>
<swp-search-container>
<swp-search-icon>
<svg width="16" height="16" viewBox="0 0 16 16">
<circle cx="6" cy="6" r="5" stroke="currentColor" fill="none" stroke-width="1.5"/>
<path d="M10 10l4 4" stroke="currentColor" stroke-width="1.5"/>
</svg>
</swp-search-icon>
<input type="search" placeholder="Search events..." />
<swp-search-clear hidden>
<svg width="14" height="14" viewBox="0 0 16 16">
<path d="M5 5l6 6M11 5l-6 6" stroke="currentColor" stroke-width="2"/>
</svg>
</swp-search-clear>
</swp-search-container>
<swp-view-selector>
<swp-view-button data-view="day">Day</swp-view-button>
<swp-view-button data-view="week" data-active="true">Week</swp-view-button>
<swp-view-button data-view="month">Month</swp-view-button>
</swp-view-selector>
<swp-workweek-presets>
<swp-preset-button data-workweek="standard" data-active="true">Mon-Fri</swp-preset-button>
<swp-preset-button data-workweek="compressed">Mon-Thu</swp-preset-button>
<swp-preset-button data-workweek="midweek">Wed-Fri</swp-preset-button>
<swp-preset-button data-workweek="weekend">Sat-Sun</swp-preset-button>
<swp-preset-button data-workweek="fullweek">7 Days</swp-preset-button>
</swp-workweek-presets>
</swp-calendar-nav>
<!-- Calendar Grid Container -->
<swp-calendar-container>
<!-- Headers and time slots will be generated dynamically by JavaScript -->
</swp-calendar-container>
<swp-loading-overlay hidden>
<swp-spinner></swp-spinner>
</swp-loading-overlay>
</swp-calendar>
</div>
<!-- JavaScript Bundle -->
<script type="module" src="js/calendar.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar</title>
<link rel="stylesheet" href="css/calendar.css">
</head>
<body>
<div class="calendar-wrapper">
<swp-calendar>
<swp-calendar-nav>
<!-- View switcher (small chips) -->
<swp-view-switcher>
<button class="view-chip active" data-view="simple">Datoer</button>
<button class="view-chip" data-view="day">Dag</button>
<button class="view-chip" data-view="resource">Resource</button>
<button class="view-chip" data-view="picker">Picker</button>
<button class="view-chip" data-view="team">Team</button>
<button class="view-chip" data-view="department">Dept</button>
</swp-view-switcher>
<!-- Resource selector (only visible in picker view) -->
<swp-resource-selector class="hidden">
<fieldset>
<legend>Vælg resources</legend>
<div class="resource-checkboxes"></div>
</fieldset>
</swp-resource-selector>
<!-- Workweek preset dropdown -->
<select id="workweek-select" class="workweek-dropdown">
<option value="standard">Man-Fre</option>
<option value="compressed">Man-Ons</option>
<option value="midweek">Tors-Fre</option>
<option value="weekend">Weekend</option>
<option value="fullweek">Alle dage</option>
</select>
<!-- Navigation -->
<swp-nav-group>
<swp-nav-button id="btn-prev"></swp-nav-button>
<swp-nav-button id="btn-next"></swp-nav-button>
</swp-nav-group>
<swp-week-info>
<swp-week-number>Demo</swp-week-number>
<swp-date-range id="view-info"></swp-date-range>
</swp-week-info>
<swp-nav-button id="btn-drawer" class="btn-small">Drawer</swp-nav-button>
</swp-calendar-nav>
<swp-calendar-container>
<swp-time-axis>
<swp-header-spacer></swp-header-spacer>
<swp-time-axis-content id="time-axis"></swp-time-axis-content>
</swp-time-axis>
<swp-grid-container>
<swp-header-viewport>
<swp-header-track>
<swp-calendar-header></swp-calendar-header>
</swp-header-track>
<swp-header-drawer></swp-header-drawer>
</swp-header-viewport>
<swp-content-viewport>
<swp-content-track>
<swp-scrollable-content>
<swp-time-grid>
<swp-grid-lines></swp-grid-lines>
<swp-day-columns></swp-day-columns>
</swp-time-grid>
</swp-scrollable-content>
</swp-content-track>
</swp-content-viewport>
</swp-grid-container>
</swp-calendar-container>
</swp-calendar>
</div>
<script type="module" src="js/demo.js"></script>
</body>
</html>