Generate an empty schedule when given an empty data directory so it's possible to use without an existing schedule.

www/app.js

@@ -95,6 +95,35 @@ document.getElementById('createBackup').addEventListener('click', async e => {
   await updateBackupsList();
 });
 
+async function cloneSchedule(includeAssignments) {
+  let name = document.getElementById('cloneName').value;
+  if (name.length === 0) {
+    name = new Date().toISOString().replaceAll(':', '-');
+  }
+
+  const file = await dirHandle.getFileHandle(name + '.json', {create: true});
+  if ((await file.getFile()).size !== 0) {
+    alert("Failed to create new schedule. Schedule \"" + name
+           + "\" already exists.");
+    return;
+  }
+
+  const writable = await file.createWritable();
+  if (!includeAssignments) schedule.assignments = [];
+  await writable.write(JSON.stringify(schedule.asJsonObject(), null, 2));
+  await writable.close();
+
+  window.location.reload();
+}
+
+document.getElementById('cloneSch').addEventListener('click', async e => {
+  cloneSchedule(true);
+});
+
+document.getElementById('cloneSchNoAssignments').addEventListener('click', async e => {
+  cloneSchedule(false);
+});
+
 const titleInput = document.getElementById('title');
 let allowEdits = false;
 async function updateScheduleSettings() {
@@ -188,6 +217,23 @@ async function loadDir(dir) {
   options.sort((a, b) => b.timestamp - a.timestamp).forEach(opt =>
     schedulesList.appendChild(opt));
 
+  if (newest === undefined) {
+    const file = await dirHandle.getFileHandle('default.json', {create: true});
+
+    const writable = await file.createWritable();
+    await writable.write(JSON.stringify(new Schedule({
+      title: "DEFAULT TITLE",
+      assignments: [],
+      all_days: ['M', 'T', 'W', 'R', 'F'],
+      start_time: { hour: 9 },
+      end_time: { hour: 17 },
+    }).asJsonObject(), null, 2));
+    await writable.close();
+
+    window.location.reload();
+    return;
+  }
+
   await loadFile(newest, false);
 }
 

www/index.html

@@ -27,9 +27,9 @@
         <label>Schedule: <select id="schedules"></select></label>
       </div>
       <div id="clone">
-        <label>New schedule name: <input id="cloneName" pattern="[-_ a-zA-Z0-9]+" disabled></label>
-        <button id="cloneSch" disabled>Clone to New Schedule</button>
-        <button id="cloneSchNoAssignments" disabled>Clone to New Schedule without Assignments</button>
+        <label>New schedule name: <input id="cloneName" pattern="[-_ a-zA-Z0-9]+"></label>
+        <button id="cloneSch">Clone to New Schedule</button>
+        <button id="cloneSchNoAssignments">Clone to New Schedule without Assignments</button>
       </div>
       <div id="backupsSettings">
         <label>Load backup: <select id="backups"></select></label><br>

www/schedule.js

@@ -9,9 +9,9 @@ export default class Schedule {
     // TODO Custom day names? Schedules might not be weekly.
     this.all_days = obj.all_days;
     // TODO Remove hard-coded participant kinds.
-    this.all_students = obj.all_students;
-    this.all_staff = obj.all_staff;
-    this.all_teachers = obj.all_teachers;
+    this.all_students = obj.all_students ?? [];
+    this.all_staff = obj.all_staff ?? [];
+    this.all_teachers = obj.all_teachers ?? [];
     this.granularity = obj.granularity !== undefined
       ? new utils.Duration(obj.granularity)
       : new utils.Duration({minute: 10});