シフト提出
※横軸が時間で24時間表記で5分刻み、縦軸が17個に分かれています。
| 東新宿A | 東新宿B | 東新宿C | 東新宿D | 東新宿F | 東新宿G | |
|---|---|---|---|---|---|---|
| 三丁目 | ||||||
| 御苑A | ||||||
| 御苑B | ||||||
| 御苑C | ||||||
| 御苑D | ||||||
| 西新宿A | ||||||
| 西新宿B | ||||||
| 池袋A | ||||||
| 池袋B | ||||||
| 池袋C | ||||||
| 池袋D |
シフト管理
変更したいセルをクリックして編集してください。
| 東新宿A | 東新宿B | 東新宿C | 東新宿D | 東新宿F | 東新宿G | |
|---|---|---|---|---|---|---|
| 三丁目 | ||||||
| 御苑A | ||||||
| 御苑B | ||||||
| 御苑C | ||||||
| 御苑D | ||||||
| 西新宿A | ||||||
| 西新宿B | ||||||
| 池袋A | ||||||
| 池袋B | ||||||
| 池袋C | ||||||
| 池袋D |
シフト確認
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>シフト提出アプリ</title>
</head>
<body>
<div id="login">
<label for="password">パスワード：</label>
<input type="password" id="password">
<button id="submit" onclick="login()">ログイン</button>
</div>
<div id="content" style="display:none;">
<h1>シフト提出</h1>
<p>※横軸が時間で24時間表記で5分刻み、縦軸が17個に分かれています。</p>
<table>
<thead>
<tr>
<th></th>
<th>東新宿A</th>
<th>東新宿B</th>
<th>東新宿C</th>
<th>東新宿D</th>
<th>東新宿F</th>
<th>東新宿G</th>
</tr>
</thead>
<tbody>
<tr>
<th>三丁目</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
</tr>
<tr>
<th>御苑A</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
</tr>
<tr>
<th>御苑B</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
</tr>
<tr>
<th>御苑C</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
</tr>
<tr>
<th>御苑D</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
</tr>
<tr>
<th>西新宿A</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>西新宿B</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>池袋A</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td></td>
<td></td>
</tr>
<tr>
<th>池袋B</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td></td>
<td></td>
</tr>
<tr>
<th>池袋C</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td></td>
<td></td>
</tr>
<tr>
<th>池袋D</th>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td><input type="text" class="shift"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button onclick="submit()">提出</button>
<button onclick="cancel()">キャンセル</button>
<hr>
<h2>シフト確認</h2>
<button onclick="show()">シフトを見る</button>
<button onclick="edit()">シフトを編集</button>
</div>
<div id="admin" style="display:none;">
<h1>シフト管理</h1>
<p>変更したいセルをクリックして編集してください。</p>
<table>
<thead>
<tr>
<th></th>
<th>東新宿A</th>
<th>東新宿B</th>
<th>東新宿C</th>
<th>東新宿D</th>
<th>東新宿F</th>
<th>東新宿G</th>
</tr>
</thead>
<tbody>
<tr>
<th>三丁目</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<th>御苑A</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<th>御苑B</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<th>御苑C</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<th>御苑D</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<th>西新宿A</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>西新宿B</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>池袋A</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td></td>
<td></td>
</tr>
<tr>
<th>池袋B</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td></td>
<td></td>
</tr>
<tr>
<th>池袋C</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td></td>
<td></td>
</tr>
<tr>
<th>池袋D</th>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button onclick="confirm()">変更を確定</button>
<hr>
<h2>シフト確認</h2>
<button onclick="show()">シフトを見る</button>
<button onclick="edit()">シフトを編集</button>
</div>
<script>
// パスワード設定（仮）
const PASSWORD = "password";
// ログイン機能
function login() {
const password = document.getElementById("password").value;
if (password === PASSWORD) {
document.getElementById("login").style.display = "none";
document.getElementById("content").style.display = "block";
document.getElementById("admin").style.display = "none";
} else {
alert("パスワードが違います！");
}
}
// 提出機能
function submit() {
// TODO: サーバにデータを送信する処理を実装
alert("提出しました！");
}
// キャンセル機能
function cancel() {
// TODO: 未記入のセルがある場合は確認ダイアログを表示する
// TODO: この場合はデータは保存されないので、サーバに送信する必要はない
// TODO: データがすでにある場合は確認ダイアログを表示する
// TODO: データが保存されない場合はサーバから取得する
alert("キャンセルしました！");
}
// 管理者モードに移行する
function edit() {
const password = prompt("パスワードを入力してください：");
if (password === PASSWORD) {
document.getElementById("login").style.display = "none";
document.getElementById("content").style.display = "none";
document.getElementById("admin").style.display = "block";
} else {
alert("パスワードが違います！");
}
}
// シフトを確認する
function show() {
// TODO: サーバからデータを取得して表示する
}
// 編集内容を確認する
function confirm() {
const isConfirmed = confirm("変更を確定しますか？");
if (isConfirmed) {
// TODO: サーバにデータを送信する処理を実装
alert("変更を確定しました！");
}
}
</script>
</body>
</html>