130 lines
6.1 KiB
HTML
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>
|