Hugging Face's logo

Spaces:
ikun520
/
class
Build error

App Files Community
ikun520 commited on
Commit
83334a6
·
verified ·
1 Parent(s): e874674

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +492 -492
templates/index.html CHANGED
@@ -1,493 +1,493 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <!-- 适配不同设备 -->
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8
- <title>课程表</title>
9
- <style>
10
- /* 全局样式 */
11
- body {
12
- font-family: 'Roboto', Arial, sans-serif;
13
- margin: 0;
14
- padding: 0;
15
- background-color: #f4f6f9;
16
- color: #333;
17
- }
18
- h1 {
19
- text-align: center;
20
- margin: 20px 0;
21
- font-size: 28px;
22
- font-weight: bold;
23
- color: #0078d4;
24
- letter-spacing: 1.2px;
25
- }
26
- /* 控制区域样式 */
27
- .controls {
28
- display: flex;
29
- justify-content: space-between;
30
- align-items: center;
31
- padding: 15px 20px;
32
- background-color: #0078d4;
33
- color: white;
34
- border-radius: 10px;
35
- margin: 10px 20px;
36
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
37
- }
38
- .controls div {
39
- flex: 1; /* 保证每个div等宽 */
40
- text-align: center; /* 中心对齐 */
41
- }
42
- .controls label {
43
- font-weight: bold;
44
- margin-right: 10px;
45
- }
46
- .controls select,
47
- .controls button {
48
- padding: 8px 12px;
49
- font-size: 14px;
50
- border: none;
51
- border-radius: 5px;
52
- background-color: #fff;
53
- color: #0078d4;
54
- font-weight: bold;
55
- cursor: pointer;
56
- transition: all 0.3s ease;
57
- }
58
- .controls select:hover,
59
- .controls button:hover {
60
- background-color: #eaf4fc;
61
- }
62
- .controls select:focus,
63
- .controls button:focus {
64
- outline: none;
65
- box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
66
- }
67
- /* 导航按钮样式 */
68
- .nav-button {
69
- padding: 10px 15px;
70
- font-size: 14px;
71
- border: none;
72
- border-radius: 5px;
73
- background-color: #fff;
74
- color: #0078d4;
75
- font-weight: bold;
76
- cursor: pointer;
77
- transition: all 0.3s ease;
78
- }
79
- .nav-button:hover {
80
- background-color: #eaf4fc;
81
- }
82
- .nav-button:focus {
83
- outline: none;
84
- box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
85
- }
86
- /* 时间表头样式 */
87
- .time-header {
88
- display: grid;
89
- grid-template-columns: 70px repeat(7, 1fr);
90
- background: linear-gradient(135deg, #0078d4 0%, #0056a6 100%);
91
- color: white;
92
- text-align: center;
93
- margin: 10px 20px;
94
- font-size: 14px;
95
- font-weight: bold;
96
- padding: 10px 0;
97
- border-radius: 8px;
98
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
99
- }
100
- .time-header div {
101
- border-right: 1px solid #f0f0f0;
102
- padding: 5px;
103
- transition: transform 0.2s ease-in-out, background-color 0.2s;
104
- }
105
- .time-header div:last-child {
106
- border-right: none;
107
- }
108
- .time-header div:hover {
109
- transform: translateY(-2px);
110
- background-color: rgba(255, 255, 255, 0.2);
111
- cursor: pointer;
112
- }
113
- /* 时间列样式 */
114
- .time-column {
115
- background-color: #f8f9fa;
116
- text-align: center;
117
- font-size: 14px;
118
- display: flex;
119
- flex-direction: column;
120
- border-right: 1px solid #ddd;
121
- }
122
- .time-column div {
123
- flex: 1;
124
- padding: 10px 0;
125
- border-top: 1px solid #ddd;
126
- font-weight: bold;
127
- }
128
- .time-column div:first-child {
129
- border-top: none;
130
- }
131
- /* 每日课程样式 */
132
- .day {
133
- background-color: white;
134
- border: 1px solid #ddd;
135
- padding: 5px;
136
- height: 500px;
137
- display: flex;
138
- flex-direction: column;
139
- position: relative;
140
- border-radius: 0 0 8px 8px;
141
- overflow: hidden;
142
- transition: transform 0.3s ease, box-shadow 0.3s ease;
143
- }
144
- .day:hover {
145
- transform: translateY(-5px);
146
- box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
147
- }
148
- /* 时间槽样式 */
149
- .time-slot {
150
- flex: 1;
151
- position: relative;
152
- border-top: 1px solid #eee;
153
- overflow: hidden;
154
- }
155
- .time-slot:first-child {
156
- border-top: none;
157
- }
158
- /* 课程样式 */
159
- .time-slot .course {
160
- position: absolute;
161
- background-color: #a7d8de;
162
- color: #333;
163
- border-radius: 5px;
164
- padding: 25px;
165
- font-size: 15px;
166
- font-weight: bold;
167
- text-align: center;
168
- margin: 5px;
169
- width: 75%;
170
- box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
171
- transition: transform 0.3s ease, background-color 0.3s ease;
172
- height: 50%;
173
- }
174
- .time-slot .course:hover {
175
- transform: scale(1.05);
176
- background-color: #80c7cd;
177
- }
178
- /* 网格容器样式 */
179
- .schedule-container {
180
- display: grid;
181
- grid-template-columns: 70px repeat(7, 1fr);
182
- gap: 1px;
183
- margin: 10px 20px;
184
- background-color: #fff;
185
- border-radius: 10px;
186
- overflow: hidden;
187
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
188
- }
189
-
190
- /* 移动端适配 */
191
- @media (max-width: 768px) {
192
- body {
193
- font-size: 14px;
194
- padding: 5px;
195
- }
196
- h1 {
197
- font-size: 20px;
198
- margin: 15px 0;
199
- }
200
- .controls {
201
- display: flex;
202
- flex-direction: row; /* 保持在一行内 */
203
- flex-wrap: nowrap; /* 禁止换行 */
204
- justify-content: space-around; /* 均匀分布各个控件 */
205
- align-items: center; /* 纵向居中 */
206
- padding: 10px 5px; /* 增加一些内边距，使其不显得太拥挤 */
207
- margin: 5px;
208
- gap: 5px; /* 控制组件之间的间距 */
209
- }
210
- .controls select,
211
- .controls button {
212
- padding: 6px; /* 适当减少内边距以适应小屏幕 */
213
- font-size: 12px; /* 调整字体大小适应小屏幕 */
214
- margin: 2px;
215
- min-width: 80px; /* 设置最小宽度，确保控件在小屏幕上仍可点击 */
216
- }
217
-
218
- .time-header {
219
- grid-template-columns: 25px repeat(7, 1fr);
220
- font-size: 12px; /* 调整字体大小以适合移动端 */
221
- padding: 12px 5px; /* 增加上下的内边距使其看起来更高 */
222
- width: 95%;
223
- margin: 10px 5px;
224
- }
225
- .schedule-container {
226
- grid-template-columns: 22px repeat(7, minmax(0, 1fr));
227
- margin: 3px;
228
- display: grid;
229
- gap: 1px;
230
-
231
- background-color: #fff;
232
- border-radius: 10px;
233
- overflow: hidden;
234
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
235
-
236
- }
237
- .day {
238
- padding: 3px;
239
- border: 1px solid #ccc;
240
- border-radius: 5px;
241
- }
242
- .time-column {
243
- grid-column: 1;
244
- text-align: center;
245
- font-size: 15px;
246
- display: flex;
247
- flex-direction: column;
248
- justify-content: center;
249
- line-height: 1.2;
250
-
251
- }
252
- .time-slot .course {
253
- font-size: 12px;
254
- padding: 3px;
255
- /*height: auto;*/
256
- width: auto;
257
- word-break: break-word; /* 确保长单词在小屏幕上也会换行 */
258
- white-space: normal; /* 允许文本换行 */
259
- overflow-wrap: break-word; /* 处理可能过长的文本，强制其换行 */
260
- margin: 1px;
261
- height: 90%;
262
- }
263
- }
264
- /* .time-slot .course {*/
265
- /* position: absolute;*/
266
- /* background-color: #a7d8de;*/
267
- /* color: #333;*/
268
- /* border-radius: 5px;*/
269
- /* padding: 25px;*/
270
- /* font-size: 10px;*/
271
- /* font-weight: bold;*/
272
- /* text-align: center;*/
273
- /* margin: 5px;*/
274
- /* width: 65%;*/
275
- /* !* height: 100%; *!*/
276
- /* box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);*/
277
- /* transition: transform 0.3s ease, background-color 0.3s ease;*/
278
- /*}*/
279
-
280
- </style>
281
- </head>
282
-
283
- <body>
284
- <h1>信息技术课表</h1>
285
- <div class="controls">
286
- <div>
287
- <label for="week-select">周次：</label>
288
- <select id="week-select"></select>
289
- </div>
290
- <div>
291
- <button class="nav-button" onclick="navigateToSection_01()">学生查询</button>
292
- <button class="nav-button" onclick="navigateToSection_02()">教师查询</button>
293
- </div>
294
- <div>
295
- <label for="grade-select">年级：</label>
296
- <select id="grade-select">
297
- <option value="22级">22级</option>
298
- <option value="23级">23级</option>
299
- <option value="24级">24级</option>
300
- </select>
301
- <label for="class-select">班级：</label>
302
- <select id="class-select">
303
- <!-- 动态生成 -->
304
- </select>
305
- </div>
306
- </div>
307
-
308
- <div class="time-header" id="time-header">
309
- <div>时间</div>
310
- <div><span>09/02</span><br><span>周一</span></div>
311
- <div><span>09/03</span><br><span>周二</span></div>
312
- <div><span>09/04</span><br><span>周三</span></div>
313
- <div><span>09/05</span><br><span>周四</span></div>
314
- <div><span>09/06</span><br><span>周五</span></div>
315
- <div><span>09/07</span><br><span>周六</span></div>
316
- <div><span>09/08</span><br><span>周日</span></div>
317
- </div>
318
-
319
- <div class="schedule-container" id="schedule">
320
- <div class="time-column">
321
- <div>1-3节</div>
322
- <div>4-5节</div>
323
- <div>6-8节</div>
324
- <div>9-11节</div>
325
- </div>
326
- </div>
327
-
328
- <script>
329
- function navigateToSection_01() {
330
- window.location.href = "/students";
331
- }
332
- function navigateToSection_02() {
333
- window.location.href = "/teachers";
334
- }
335
- let currentWeek = getCurrentWeek(); // 使用 getCurrentWeek() 函数获取当前周次
336
-
337
- function initializeWeeks() {
338
- const weekSelect = document.getElementById("week-select");
339
- for (let i = 1; i <= 18; i++) {
340
- const option = document.createElement("option");
341
- option.value = i;
342
- option.textContent = `第${i}周`;
343
- if (i === currentWeek) {
344
- option.selected = true; // 默认选中当前周次
345
- }
346
- weekSelect.appendChild(option);
347
- }
348
- }
349
-
350
- function getCurrentWeek() {
351
- const firstWeekStartDate = new Date("2024-09-02"); // 假设第一周从2024年9月2日（周一）开始
352
- const today = new Date();
353
- const timeDifference = today - firstWeekStartDate;
354
- const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
355
- return Math.floor(daysDifference / 7) + 1; // 根据天数计算当前周次
356
- }
357
- function loadClasses() {
358
- const gradeSelect = document.getElementById("grade-select").value;
359
- fetch(`/api/classes`)
360
- .then(response => response.json())
361
- .then(classes => {
362
- const classSelect = document.getElementById("class-select");
363
- classSelect.innerHTML = ""; // 清空班级选项
364
- const defaultOption = document.createElement("option");
365
- defaultOption.value = "";
366
- defaultOption.textContent = "请选择班级";
367
- defaultOption.selected = true;
368
- classSelect.appendChild(defaultOption);
369
- const filteredClasses = classes.filter(cls => cls.includes(gradeSelect.replace("级", "")));
370
- filteredClasses.forEach(cls => {
371
- const option = document.createElement("option");
372
- option.value = cls;
373
- option.textContent = cls;
374
- classSelect.appendChild(option);
375
- });
376
- });
377
- }
378
- function randomColor() {
379
- const colors = ["#ffcccb", "#c6e2ff", "#d5f5e3", "#f7dc6f", "#f1948a", "#aed6f1", "#d7bde2"];
380
- return colors[Math.floor(Math.random() * colors.length)];
381
- }
382
- function generateWeekDates(startDate) {
383
- const dates = [];
384
- for (let i = 0; i < 7; i++) {
385
- const date = new Date(startDate);
386
- date.setDate(date.getDate() + i);
387
- dates.push(date);
388
- }
389
- return dates;
390
- }
391
- function updateTimeHeader(weekStartDate) {
392
- const timeHeader = document.getElementById("time-header");
393
- const weekDates = generateWeekDates(weekStartDate);
394
- // 清空表头后重新生成
395
- timeHeader.innerHTML = `
396
- <div>时间</div>
397
- `;
398
- weekDates.forEach((date, index) => {
399
- const dayOfWeek = "一二三四五六日"[index];
400
- const formattedDate = date.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
401
- const headerDiv = document.createElement("div");
402
- headerDiv.innerHTML = `
403
- <span>${formattedDate}</span>
404
- <br />
405
- <span>周${dayOfWeek}</span>
406
- `;
407
- timeHeader.appendChild(headerDiv);
408
- });
409
- }
410
- function loadSchedule() {
411
- const gradeSelect = document.getElementById("grade-select");
412
- const classSelect = document.getElementById("class-select");
413
- const weekSelect = document.getElementById("week-select");
414
- const selectedGrade = gradeSelect.value;
415
- const selectedClass = classSelect.value;
416
- const selectedWeek = weekSelect.value;
417
- if (!selectedClass) {
418
- const scheduleContainer = document.getElementById("schedule");
419
- scheduleContainer.innerHTML = "<p style='text-align: center; color: #777;'>请选择班级以查看课程表。</p>";
420
- return;
421
- }
422
- let apiUrl = `/api/student_courses?week=${selectedWeek}`;
423
- if (selectedGrade) apiUrl += `&grade=${encodeURIComponent(selectedGrade)}`;
424
- if (selectedClass) apiUrl += `&admin_class=${encodeURIComponent(selectedClass)}`;
425
- fetch(apiUrl)
426
- .then(response => response.json())
427
- .then(data => {
428
- const scheduleContainer = document.getElementById("schedule");
429
- scheduleContainer.innerHTML = `
430
- <div class='time-column'>
431
- <div>1-3节</div>
432
- <div>4-5节</div>
433
- <div>6-8节</div>
434
- <div>9-11节</div>
435
- </div>
436
- `;
437
- // 获取第一天日期（从后端返回或计算）
438
- const firstDayDate = new Date(data[0]?.日期 || "2024-09-02"); // 默认值为 9 月 2 日
439
- updateTimeHeader(firstDayDate);
440
- // 初始化空白的课程表
441
- const groupedByDay = Array.from({ length: 7 }, () => ({
442
- intervals: Array.from({ length: 4 }, () => []),
443
- }));
444
- // 填充有课程的时间段
445
- data.forEach(course => {
446
- const dayIndex = course.星期 - 1;
447
- const startPeriod = course.节次[0];
448
- let intervalIndex = 0;
449
- if (startPeriod >= 1 && startPeriod <= 3) {
450
- intervalIndex = 0;
451
- } else if (startPeriod >= 4 && startPeriod <= 5) {
452
- intervalIndex = 1;
453
- } else if (startPeriod >= 6 && startPeriod <= 8) {
454
- intervalIndex = 2;
455
- } else if (startPeriod >= 9 && startPeriod <= 11) {
456
- intervalIndex = 3;
457
- }
458
- if (!groupedByDay[dayIndex].intervals[intervalIndex].length) {
459
- groupedByDay[dayIndex].intervals[intervalIndex].push(course);
460
- }
461
- });
462
- // 渲染课程表
463
- groupedByDay.forEach((dayData, dayIndex) => {
464
- const dayDiv = document.createElement("div");
465
- dayDiv.className = "day";
466
- dayData.intervals.forEach((intervalCourses, intervalIndex) => {
467
- const intervalDiv = document.createElement("div");
468
- intervalDiv.className = "time-slot";
469
- if (intervalCourses.length > 0) {
470
- const course = intervalCourses[0]; // 只展示一个课程
471
- const courseDiv = document.createElement("div");
472
- courseDiv.className = "course";
473
- courseDiv.innerText = `${course.课程} ${course.地点}`;
474
- courseDiv.style.backgroundColor = randomColor(); // 随机背景颜色
475
- intervalDiv.appendChild(courseDiv);
476
- }
477
- dayDiv.appendChild(intervalDiv);
478
- });
479
- scheduleContainer.appendChild(dayDiv);
480
- });
481
- });
482
- }
483
- document.getElementById("week-select").addEventListener("change", loadSchedule);
484
- document.getElementById("grade-select").addEventListener("change", () => {
485
- loadClasses();
486
- loadSchedule();
487
- });
488
- document.getElementById("class-select").addEventListener("change", loadSchedule);
489
- initializeWeeks();
490
- loadClasses();
491
- </script>
492
- </body>
493
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <!-- 适配不同设备 -->
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8
+ <title>课程表</title>
9
+ <style>
10
+ /* 全局样式 */
11
+ body {
12
+ font-family: 'Roboto', Arial, sans-serif;
13
+ margin: 0;
14
+ padding: 0;
15
+ background-color: #f4f6f9;
16
+ color: #333;
17
+ }
18
+ h1 {
19
+ text-align: center;
20
+ margin: 20px 0;
21
+ font-size: 28px;
22
+ font-weight: bold;
23
+ color: #0078d4;
24
+ letter-spacing: 1.2px;
25
+ }
26
+ /* 控制区域样式 */
27
+ .controls {
28
+ display: flex;
29
+ justify-content: space-between;
30
+ align-items: center;
31
+ padding: 15px 20px;
32
+ background-color: #0078d4;
33
+ color: white;
34
+ border-radius: 10px;
35
+ margin: 10px 20px;
36
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
37
+ }
38
+ .controls div {
39
+ flex: 1; /* 保证每个div等宽 */
40
+ text-align: center; /* 中心对齐 */
41
+ }
42
+ .controls label {
43
+ font-weight: bold;
44
+ margin-right: 10px;
45
+ }
46
+ .controls select,
47
+ .controls button {
48
+ padding: 8px 12px;
49
+ font-size: 14px;
50
+ border: none;
51
+ border-radius: 5px;
52
+ background-color: #fff;
53
+ color: #0078d4;
54
+ font-weight: bold;
55
+ cursor: pointer;
56
+ transition: all 0.3s ease;
57
+ }
58
+ .controls select:hover,
59
+ .controls button:hover {
60
+ background-color: #eaf4fc;
61
+ }
62
+ .controls select:focus,
63
+ .controls button:focus {
64
+ outline: none;
65
+ box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
66
+ }
67
+ /* 导航按钮样式 */
68
+ .nav-button {
69
+ padding: 10px 15px;
70
+ font-size: 14px;
71
+ border: none;
72
+ border-radius: 5px;
73
+ background-color: #fff;
74
+ color: #0078d4;
75
+ font-weight: bold;
76
+ cursor: pointer;
77
+ transition: all 0.3s ease;
78
+ }
79
+ .nav-button:hover {
80
+ background-color: #eaf4fc;
81
+ }
82
+ .nav-button:focus {
83
+ outline: none;
84
+ box-shadow: 0 0 5px rgba(0, 120, 212, 0.8);
85
+ }
86
+ /* 时间表头样式 */
87
+ .time-header {
88
+ display: grid;
89
+ grid-template-columns: 70px repeat(7, 1fr);
90
+ background: linear-gradient(135deg, #0078d4 0%, #0056a6 100%);
91
+ color: white;
92
+ text-align: center;
93
+ margin: 10px 20px;
94
+ font-size: 14px;
95
+ font-weight: bold;
96
+ padding: 10px 0;
97
+ border-radius: 8px;
98
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
99
+ }
100
+ .time-header div {
101
+ border-right: 1px solid #f0f0f0;
102
+ padding: 5px;
103
+ transition: transform 0.2s ease-in-out, background-color 0.2s;
104
+ }
105
+ .time-header div:last-child {
106
+ border-right: none;
107
+ }
108
+ .time-header div:hover {
109
+ transform: translateY(-2px);
110
+ background-color: rgba(255, 255, 255, 0.2);
111
+ cursor: pointer;
112
+ }
113
+ /* 时间列样式 */
114
+ .time-column {
115
+ background-color: #f8f9fa;
116
+ text-align: center;
117
+ font-size: 14px;
118
+ display: flex;
119
+ flex-direction: column;
120
+ border-right: 1px solid #ddd;
121
+ }
122
+ .time-column div {
123
+ flex: 1;
124
+ padding: 10px 0;
125
+ border-top: 1px solid #ddd;
126
+ font-weight: bold;
127
+ }
128
+ .time-column div:first-child {
129
+ border-top: none;
130
+ }
131
+ /* 每日课程样式 */
132
+ .day {
133
+ background-color: white;
134
+ border: 1px solid #ddd;
135
+ padding: 5px;
136
+ height: 500px;
137
+ display: flex;
138
+ flex-direction: column;
139
+ position: relative;
140
+ border-radius: 0 0 8px 8px;
141
+ overflow: hidden;
142
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
143
+ }
144
+ .day:hover {
145
+ transform: translateY(-5px);
146
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
147
+ }
148
+ /* 时间槽样式 */
149
+ .time-slot {
150
+ flex: 1;
151
+ position: relative;
152
+ border-top: 1px solid #eee;
153
+ overflow: hidden;
154
+ }
155
+ .time-slot:first-child {
156
+ border-top: none;
157
+ }
158
+ /* 课程样式 */
159
+ .time-slot .course {
160
+ position: absolute;
161
+ background-color: #a7d8de;
162
+ color: #333;
163
+ border-radius: 5px;
164
+ padding: 25px;
165
+ font-size: 15px;
166
+ font-weight: bold;
167
+ text-align: center;
168
+ margin: 5px;
169
+ width: 75%;
170
+ box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
171
+ transition: transform 0.3s ease, background-color 0.3s ease;
172
+ height: 50%;
173
+ }
174
+ .time-slot .course:hover {
175
+ transform: scale(1.05);
176
+ background-color: #80c7cd;
177
+ }
178
+ /* 网格容器样式 */
179
+ .schedule-container {
180
+ display: grid;
181
+ grid-template-columns: 70px repeat(7, 1fr);
182
+ gap: 1px;
183
+ margin: 10px 20px;
184
+ background-color: #fff;
185
+ border-radius: 10px;
186
+ overflow: hidden;
187
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
188
+ }
189
+
190
+ /* 移动端适配 */
191
+ @media (max-width: 768px) {
192
+ body {
193
+ font-size: 14px;
194
+ padding: 5px;
195
+ }
196
+ h1 {
197
+ font-size: 20px;
198
+ margin: 15px 0;
199
+ }
200
+ .controls {
201
+ display: flex;
202
+ flex-direction: row; /* 保持在一行内 */
203
+ flex-wrap: nowrap; /* 禁止换行 */
204
+ justify-content: space-around; /* 均匀分布各个控件 */
205
+ align-items: center; /* 纵向居中 */
206
+ padding: 10px 5px; /* 增加一些内边距，使其不显得太拥挤 */
207
+ margin: 5px;
208
+ gap: 5px; /* 控制组件之间的间距 */
209
+ }
210
+ .controls select,
211
+ .controls button {
212
+ padding: 6px; /* 适当减少内边距以适应小屏幕 */
213
+ font-size: 12px; /* 调整字体大小适应小屏幕 */
214
+ margin: 2px;
215
+ min-width: 80px; /* 设置最小宽度，确保控件在小屏幕上仍可点击 */
216
+ }
217
+
218
+ .time-header {
219
+ grid-template-columns: 25px repeat(7, 1fr);
220
+ font-size: 12px; /* 调整字体大小以适合移动端 */
221
+ padding: 12px 5px; /* 增加上下的内边距使其看起来更高 */
222
+ width: 95%;
223
+ margin: 10px 5px;
224
+ }
225
+ .schedule-container {
226
+ grid-template-columns: 22px repeat(7, minmax(0, 1fr));
227
+ margin: 3px;
228
+ display: grid;
229
+ gap: 1px;
230
+
231
+ background-color: #fff;
232
+ border-radius: 10px;
233
+ overflow: hidden;
234
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
235
+
236
+ }
237
+ .day {
238
+ padding: 3px;
239
+ border: 1px solid #ccc;
240
+ border-radius: 5px;
241
+ }
242
+ .time-column {
243
+ grid-column: 1;
244
+ text-align: center;
245
+ font-size: 15px;
246
+ display: flex;
247
+ flex-direction: column;
248
+ justify-content: center;
249
+ line-height: 1.2;
250
+
251
+ }
252
+ .time-slot .course {
253
+ font-size: 12px;
254
+ padding: 1px;
255
+ /*height: auto;*/
256
+ width: auto;
257
+ word-break: break-word; /* 确保长单词在小屏幕上也会换行 */
258
+ white-space: normal; /* 允许文本换行 */
259
+ overflow-wrap: break-word; /* 处理可能过长的文本，强制其换行 */
260
+ margin: 1px;
261
+ height: 90%;
262
+ }
263
+ }
264
+ /* .time-slot .course {*/
265
+ /* position: absolute;*/
266
+ /* background-color: #a7d8de;*/
267
+ /* color: #333;*/
268
+ /* border-radius: 5px;*/
269
+ /* padding: 25px;*/
270
+ /* font-size: 10px;*/
271
+ /* font-weight: bold;*/
272
+ /* text-align: center;*/
273
+ /* margin: 5px;*/
274
+ /* width: 65%;*/
275
+ /* !* height: 100%; *!*/
276
+ /* box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);*/
277
+ /* transition: transform 0.3s ease, background-color 0.3s ease;*/
278
+ /*}*/
279
+
280
+ </style>
281
+ </head>
282
+
283
+ <body>
284
+ <h1>信息技术课表</h1>
285
+ <div class="controls">
286
+ <div>
287
+ <label for="week-select">周次：</label>
288
+ <select id="week-select"></select>
289
+ </div>
290
+ <div>
291
+ <button class="nav-button" onclick="navigateToSection_01()">学生查询</button>
292
+ <button class="nav-button" onclick="navigateToSection_02()">教师查询</button>
293
+ </div>
294
+ <div>
295
+ <label for="grade-select">年级：</label>
296
+ <select id="grade-select">
297
+ <option value="22级">22级</option>
298
+ <option value="23级">23级</option>
299
+ <option value="24级">24级</option>
300
+ </select>
301
+ <label for="class-select">班级：</label>
302
+ <select id="class-select">
303
+ <!-- 动态生成 -->
304
+ </select>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="time-header" id="time-header">
309
+ <div>时间</div>
310
+ <div><span>09/02</span><br><span>周一</span></div>
311
+ <div><span>09/03</span><br><span>周二</span></div>
312
+ <div><span>09/04</span><br><span>周三</span></div>
313
+ <div><span>09/05</span><br><span>周四</span></div>
314
+ <div><span>09/06</span><br><span>周五</span></div>
315
+ <div><span>09/07</span><br><span>周��</span></div>
316
+ <div><span>09/08</span><br><span>周日</span></div>
317
+ </div>
318
+
319
+ <div class="schedule-container" id="schedule">
320
+ <div class="time-column">
321
+ <div>1-3节</div>
322
+ <div>4-5节</div>
323
+ <div>6-8节</div>
324
+ <div>9-11节</div>
325
+ </div>
326
+ </div>
327
+
328
+ <script>
329
+ function navigateToSection_01() {
330
+ window.location.href = "/students";
331
+ }
332
+ function navigateToSection_02() {
333
+ window.location.href = "/teachers";
334
+ }
335
+ let currentWeek = getCurrentWeek(); // 使用 getCurrentWeek() 函数获取当前周次
336
+
337
+ function initializeWeeks() {
338
+ const weekSelect = document.getElementById("week-select");
339
+ for (let i = 1; i <= 18; i++) {
340
+ const option = document.createElement("option");
341
+ option.value = i;
342
+ option.textContent = `第${i}周`;
343
+ if (i === currentWeek) {
344
+ option.selected = true; // 默认选中当前周次
345
+ }
346
+ weekSelect.appendChild(option);
347
+ }
348
+ }
349
+
350
+ function getCurrentWeek() {
351
+ const firstWeekStartDate = new Date("2024-09-02"); // 假设第一周从2024年9月2日（周一）开始
352
+ const today = new Date();
353
+ const timeDifference = today - firstWeekStartDate;
354
+ const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
355
+ return Math.floor(daysDifference / 7) + 1; // 根据天数计算当前周次
356
+ }
357
+ function loadClasses() {
358
+ const gradeSelect = document.getElementById("grade-select").value;
359
+ fetch(`/api/classes`)
360
+ .then(response => response.json())
361
+ .then(classes => {
362
+ const classSelect = document.getElementById("class-select");
363
+ classSelect.innerHTML = ""; // 清空班级选项
364
+ const defaultOption = document.createElement("option");
365
+ defaultOption.value = "";
366
+ defaultOption.textContent = "请选择班级";
367
+ defaultOption.selected = true;
368
+ classSelect.appendChild(defaultOption);
369
+ const filteredClasses = classes.filter(cls => cls.includes(gradeSelect.replace("级", "")));
370
+ filteredClasses.forEach(cls => {
371
+ const option = document.createElement("option");
372
+ option.value = cls;
373
+ option.textContent = cls;
374
+ classSelect.appendChild(option);
375
+ });
376
+ });
377
+ }
378
+ function randomColor() {
379
+ const colors = ["#ffcccb", "#c6e2ff", "#d5f5e3", "#f7dc6f", "#f1948a", "#aed6f1", "#d7bde2"];
380
+ return colors[Math.floor(Math.random() * colors.length)];
381
+ }
382
+ function generateWeekDates(startDate) {
383
+ const dates = [];
384
+ for (let i = 0; i < 7; i++) {
385
+ const date = new Date(startDate);
386
+ date.setDate(date.getDate() + i);
387
+ dates.push(date);
388
+ }
389
+ return dates;
390
+ }
391
+ function updateTimeHeader(weekStartDate) {
392
+ const timeHeader = document.getElementById("time-header");
393
+ const weekDates = generateWeekDates(weekStartDate);
394
+ // 清空表头后重新生成
395
+ timeHeader.innerHTML = `
396
+ <div>时间</div>
397
+ `;
398
+ weekDates.forEach((date, index) => {
399
+ const dayOfWeek = "一二三四五六日"[index];
400
+ const formattedDate = date.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
401
+ const headerDiv = document.createElement("div");
402
+ headerDiv.innerHTML = `
403
+ <span>${formattedDate}</span>
404
+ <br />
405
+ <span>周${dayOfWeek}</span>
406
+ `;
407
+ timeHeader.appendChild(headerDiv);
408
+ });
409
+ }
410
+ function loadSchedule() {
411
+ const gradeSelect = document.getElementById("grade-select");
412
+ const classSelect = document.getElementById("class-select");
413
+ const weekSelect = document.getElementById("week-select");
414
+ const selectedGrade = gradeSelect.value;
415
+ const selectedClass = classSelect.value;
416
+ const selectedWeek = weekSelect.value;
417
+ if (!selectedClass) {
418
+ const scheduleContainer = document.getElementById("schedule");
419
+ scheduleContainer.innerHTML = "<p style='text-align: center; color: #777;'>请选择班级以查看课程表。</p>";
420
+ return;
421
+ }
422
+ let apiUrl = `/api/student_courses?week=${selectedWeek}`;
423
+ if (selectedGrade) apiUrl += `&grade=${encodeURIComponent(selectedGrade)}`;
424
+ if (selectedClass) apiUrl += `&admin_class=${encodeURIComponent(selectedClass)}`;
425
+ fetch(apiUrl)
426
+ .then(response => response.json())
427
+ .then(data => {
428
+ const scheduleContainer = document.getElementById("schedule");
429
+ scheduleContainer.innerHTML = `
430
+ <div class='time-column'>
431
+ <div>1-3节</div>
432
+ <div>4-5节</div>
433
+ <div>6-8节</div>
434
+ <div>9-11节</div>
435
+ </div>
436
+ `;
437
+ // 获取第一天日期（从后端返回或计算）
438
+ const firstDayDate = new Date(data[0]?.日期 || "2024-09-02"); // 默认值为 9 月 2 日
439
+ updateTimeHeader(firstDayDate);
440
+ // 初始化空白的课程表
441
+ const groupedByDay = Array.from({ length: 7 }, () => ({
442
+ intervals: Array.from({ length: 4 }, () => []),
443
+ }));
444
+ // 填充有课程的时间段
445
+ data.forEach(course => {
446
+ const dayIndex = course.星期 - 1;
447
+ const startPeriod = course.节次[0];
448
+ let intervalIndex = 0;
449
+ if (startPeriod >= 1 && startPeriod <= 3) {
450
+ intervalIndex = 0;
451
+ } else if (startPeriod >= 4 && startPeriod <= 5) {
452
+ intervalIndex = 1;
453
+ } else if (startPeriod >= 6 && startPeriod <= 8) {
454
+ intervalIndex = 2;
455
+ } else if (startPeriod >= 9 && startPeriod <= 11) {
456
+ intervalIndex = 3;
457
+ }
458
+ if (!groupedByDay[dayIndex].intervals[intervalIndex].length) {
459
+ groupedByDay[dayIndex].intervals[intervalIndex].push(course);
460
+ }
461
+ });
462
+ // 渲染课程表
463
+ groupedByDay.forEach((dayData, dayIndex) => {
464
+ const dayDiv = document.createElement("div");
465
+ dayDiv.className = "day";
466
+ dayData.intervals.forEach((intervalCourses, intervalIndex) => {
467
+ const intervalDiv = document.createElement("div");
468
+ intervalDiv.className = "time-slot";
469
+ if (intervalCourses.length > 0) {
470
+ const course = intervalCourses[0]; // 只展示一个课程
471
+ const courseDiv = document.createElement("div");
472
+ courseDiv.className = "course";
473
+ courseDiv.innerText = `${course.课程} ${course.地点}`;
474
+ courseDiv.style.backgroundColor = randomColor(); // 随机背景颜色
475
+ intervalDiv.appendChild(courseDiv);
476
+ }
477
+ dayDiv.appendChild(intervalDiv);
478
+ });
479
+ scheduleContainer.appendChild(dayDiv);
480
+ });
481
+ });
482
+ }
483
+ document.getElementById("week-select").addEventListener("change", loadSchedule);
484
+ document.getElementById("grade-select").addEventListener("change", () => {
485
+ loadClasses();
486
+ loadSchedule();
487
+ });
488
+ document.getElementById("class-select").addEventListener("change", loadSchedule);
489
+ initializeWeeks();
490
+ loadClasses();
491
+ </script>
492
+ </body>
493
  </html>