You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

130 lines
6.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schedule Grid Editor</title>
<link rel="stylesheet" href="main.css" type="text/css">
<script type="module" src="./app.js"></script>
</head>
<body>
<div id="header" class="forms noprint">
<p id="browserVersionWarning">
Working with local directories requires
<a href="https://www.google.com/chrome/">Google Chrome 86+</a>
and does not work in Firefox due to using the
<a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API">File System Access API</a>
to store the schedule data locally on your computer. Apologies for the
inconvenience.
</p>
<div id="loadButtons">
<button id="openDir" style="display: none;">Choose data directory</button>
<button id="reopenDir" style="display: none;">Reload recent schedule</button>
<button id="closeDir" style="display: none;">Close data directory</button>
</div>
</div>
<div id="scheduleSettings" class="forms noprint" style="display: none">
<div id="selectScheduleDiv">
<label>Schedule: <select id="schedules"></select></label>
<input type="file" id="importFile" accept="application/json" style="display:none" />
<button id="import">Import from file</button>
<button id="export">Export to file</button>
</div>
<div id="clone">
<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>
<button id="restoreBackup">Restore Backup</button><br>
<label>Backup name: <input id="backupName" pattern="[-_ a-zA-Z0-9]+"></label>
<button id="createBackup">Create Backup</button>
</div>
<div id="scheduleMetadata">
<label>Title: <input id="title"></label>
<button id="changeTitle">Change Title</button><br>
<label>Start time: <input type="time" id="sch_start_time"></label><br>
<label>End time: <input type="time" id="sch_end_time"></label><br>
<label>Granularity (time first row after midnight would be): <input type="time" id="granularity"></label><br>
Days: <span id="sch-days"></span><br>
<label>Name: <input id="person"></label>
<button id="addTeacher">Add Teacher</button>
<button id="addStaff">Add Staff</button>
<button id="addStudent">Add Student</button><br>
<select id="removeStaff" disabled></select>
<button id="delStaff" disabled>Delete Staff Person</button>
<button id="toTeacher" style="display: none;">Make teacher</button>
<button id="toStaff" style="display: none;">Make normal staff</button>
<input id="nameStaff">
<button id="renameStaff" disabled>Rename Staff Person</button>
<br>
<select id="removeStudent" disabled></select>
<button id="delStudent" disabled>Delete Student</button>
<input id="nameStudent">
<button id="renameStudent" disabled>Rename Student</button>
<br>
</div>
</div>
<div id="displaySettings" class="forms noprint" style="display: none">
<label>Days: <select id="displayDays"></select></label>
<label>People: <select id="displayPeople"></select></label>
</div>
<div id="personInfo" class="forms noprint" style="display: none">
<label>Start time: <input type="time" id="person_start_time"></label><br>
<label>End time: <input type="time" id="person_end_time"></label><br>
Days: <span id="person_days"></span><br>
</div>
<div id="warningsSection" class="warningsSection noprint" style="display: none">
<input type="checkbox" id="showWarnings" class="foldCheckbox" />
<h4 class="warningHeader foldCheckboxHeader">
<label for="showWarnings">Show/Hide Warnings</label>
</h4>
<div class="warnings foldable" id="warnings">
</div>
</div>
<div id="assignmentFormDiv" class="forms noprint" style="display: none">
<form id="assignmentForm" action="javascript:void(0);">
<input type="checkbox" id="showAssignmentForm" class="foldCheckbox" />
<h4 class="foldCheckboxHeader">
<label for="showAssignmentForm">Show/Hide Event Editor</label>
</h4>
<div class="foldable">
<label>Event: <select name="assignments"></select><br>
<button id="delAssignment">Delete Event</button>
<button id="newAssignment">Create New Event</button><br><br>
<label>Location: <input name="location" value=""></label><br>
<label>Start time: <input type="time" required="" name="start_time"></label><br>
<label>End time: <input type="time" required="" name="end_time"></label><br>
<label>
<acronym title="This event can be shortened (squished) or omitted in an indivudal schedule if overlapped by another event.">Squishable</acronym>:
<input type="checkbox" name="squishable">
</label><br>
<label>Width: <input name="width" type="number" min="1" max="9" value="1"></label><br>
<label>Track:
<select name="track">
<option selected="" value="auto">auto</option>
<option value="all">all (full-width)</option>
<option value="0">[0] left-most</option>
<option value="1">[1] second</option>
<option value="2">[2] third</option>
<option value="3">[3] fourth</option>
<option value="4">[4] fifth</option>
<option value="5">[5] sixth</option>
<option value="6">[6] seventh</option>
<option value="7">[7] eighth</option>
<option value="8">[8] ninth</option>
<option value="9">[9] tenth</option>
</select>
</label><br>
<label>Notes: <textarea name="notes"></textarea></label><br>
People: <table id="peopleTable" class="peopleTable"></table>
</div>
</form>
</div>
<div id="allSchedules">
</div>
</body>
</html>