-
Notifications
You must be signed in to change notification settings - Fork 2
/
custom.html
368 lines (353 loc) · 17.8 KB
/
custom.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280">
<link rel="stylesheet" href="static/css/style.css?date=0815">
<link rel="stylesheet" href="static/css/custom.css">
<link rel="icon" href="static/img/favicon.ico">
<!-- 웹 참조-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/e8a335040d.js" crossorigin="anonymous"></script>
<script src="static/js/includeHTML.js"></script>
<!-- 웹 폰트 참조-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&display=swap" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-219523848-1"></script>
<!-- 아이콘 참조 -->
<link rel= "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<title>Smunity</title>
</head>
<body>
<div include-html="reference/navbar.html"></div>
<div class="custom_content">
<!-- 제목 -->
<!-- <div class="custom_title">과목 수정</div> -->
<!-- 사용법 -->
<div class="custom_title" style="margin-top: 100px;">사용 방법
<i id="custom_info" class="fa-solid fa-circle-question"></i>
<div id="custom_use" class="custom_use">
- 과목 추가 <br>
1. 과목 검색 박스 안의 검색 칸에 원하는 과목의 이름을 입력하고 검색을 누릅니다. <br>
2. 원하는 과목의 옵션을 선택하고 추가를 누릅니다. <br> <br>
- 과목 삭제 <br>
1. 삭제를 하고싶은 과목의 오른쪽에 '삭제'버튼을 누릅니다. <br>
(자신이 추가한 과목만 삭제할 수 있습니다.)
</div>
</div>
<!-- 검색 -->
<div class="custom_box">
<div class="custom_title">과목 검색</div>
<form class="custom_form" action="post">
<input name="custom_search" type="text" placeholder="과목명"> <button class="custom_search_btn" onclick="modal_open(this)" open="custom_modal">검색</button>
</form>
</div>
<!-- 검색결과 -->
<div id="custom_modal">
<div class="custom_search_result">
<div class="custom_modal_content">
<div class="custom_modal_title">
<img src="/static/img/deericon.png" style="width: 30px; height: 30px; top: 10px;"> 검색 결과 <span class="close" onclick="modal_close(this)" close="custom_modal">×</span>
</div>
<div class="custom_modal_content">
<table id="custom_search_result" class="search_result">
<tr>
<th class="grade_table_th" style="width:10%">년도</th>
<th class="grade_table_th" style="width:12%">학기</th>
<th class="grade_table_th" style="width:10%">학수번호</th>
<th class="grade_table_th" style="width:36%">과목명</th>
<th class="grade_table_th" style="width:10%">이수구분</th>
<th class="grade_table_th" style="width:14%">선택영역</th>
<th class="grade_table_th" style="width:8%;">학점</th>
<th class="grade_table_th" style="width:8%; border-right :0px"></th>
</tr>
<!-- 결과 내용 -->
{% for cg in custom_grade %}
<tr>
<td class="grade_table_td">2022</td>
<td class="grade_table_td">2</td>
<td class="grade_table_td">11031</td>
<td class="grade_table_td">스뮤니티 과목</td>
<td class="grade_table_td">전공</td>
<td class="grade_table_td">전심</td>
<td class="grade_table_td">3</td>
<td class="grade_table_td" style="border-right :0px">
<button class='custom_search_btn' onclick='custom_add(), modal_close(this)'>추가</button>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
</div>
<!-- 내 기이수과목 -->
<div style="margin-top:5rem;">
<!-- -->
<form action='/f_add_custom/' method='post' onclick='combine()'>
{% csrf_token %}
<div class="my_box_title">
<div style="font-size: 20px;">
내 기이수과목
</div>
<div style="text-align: right;">
<input type='submit' onclick='pop_modal()' class="custom_search_btn save_btn" value='저장' s>
</div>
</div>
<hr>
<table id="mytable" class="grade_table" style='margin-bottom:3rem;'>
<tr>
<th class="grade_table_th" style="width:9%">년도</th>
<th class="grade_table_th" style="width:9%">학기</th>
<th class="grade_table_th" style="width:9%">학수번호</th>
<th class="grade_table_th" style="width:36%">과목명</th>
<th class="grade_table_th" style="width:9%">이수구분</th>
<th class="grade_table_th" style="width:14%">선택영역</th>
<th class="grade_table_th" style="width:6%;">학점</th>
<th class="grade_table_th" style="width:6%; border-right :0px"></th>
</tr>
<!-- 커스텀 과목 먼저 띄우기 -->
{% for cg in custom_grade %}
<tr style='color : #1ac06d'>
<td class="grade_table_td">{{ cg.year }}</td>
<td class="grade_table_td">{{ cg.semester }}</td>
<td class="grade_table_td">{{ cg.subject_num }}</td>
<td class="grade_table_td">{{ cg.subject_name }}</td>
<td class="grade_table_td">{{ cg.classification }}</td>
<td class="grade_table_td">{{ cg.selection }}</td>
<td class="grade_table_td">{{ cg.grade | floatformat }}</td>
<td class="grade_table_td" style="border-right :0px">
<button class='custom_search_btn' onclick='del_row_old(this)'>삭제</button>
</td>
</tr>
{% endfor %}
{% for g in grade %}
<tr>
<td class="grade_table_td">{{ g.year }}</td>
<td class="grade_table_td">{{ g.semester }}</td>
<td class="grade_table_td">{{ g.subject_num }}</td>
<td class="grade_table_td">{{ g.subject_name }}</td>
<td class="grade_table_td">{{ g.classification }}</td>
<td class="grade_table_td">{{ g.selection }}</td>
<td class="grade_table_td">{{ g.grade | floatformat }}</td>
<td class="grade_table_td" style="border-right :0px"></td>
</tr>
{% endfor %}
</table>
<!-- 추가된 과목정보 + 삭제된 과목 정보를 묶어서 보내주는 숨겨진 input-->
<input type='hidden' id='id_year' name='arr_year' value=''>
<input type='hidden' id='id_semester' name='arr_semester' value=''>
<input type='hidden' id='id_subject_num' name='arr_subject_num' value=''>
<input type='hidden' id='id_subject_name' name='arr_subject_name' value=''>
<input type='hidden' id='id_classification' name='arr_classification' value=''>
<input type='hidden' id='id_selection' name='arr_selection' value=''>
<input type='hidden' id='id_grade' name='arr_grade' value=''>
<input type='hidden' id='id_delete' name='arr_delete' value=''>
</form>
</div>
</div>
<!-- 모달 -->
<div id='load_madal' class="modal">
<div class="load-modal-content">
<div class="modal_loadcontainer">
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
<div class="loading">
<span>정</span>
<span>보</span>
<span>업</span>
<span>데</span>
<span>이</span>
<span>트</span>
<span>중</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<div class="load_info">
창을 이동하지 마세요!
</div>
</div>
</div>
</div>
<div include-html="reference/footer.html"></div>
</body>
<script type="text/javascript" rel="javascript" src="/static/js/custom.js"></script>
<script>
includeHTML();
function logout() {
var back_head = confirm('✋ 정말 로그아웃 하시겠습니까? ✋');
if (back_head) {
location.href = '/f_logout/';
}
}
// 학번추출
const user_id = '{{request.session.id }}';
const year = Number(user_id.substring(0, 2));
// 저장하기 클릭시 로딩모달
function pop_modal() {
document.getElementById('load_madal').style.display = "block";
}
// 커스텀 페이지에서의 과목 추가/삭제 현황을 저장하는 학수번호 배열
var list_delete = []
function ajax_conn() {
var input_s_num = $("#s_num").val();
// 영어과목 이수면제 커맨드 입력시
if(input_s_num == '면제'){
if(year <= 21){
show_table(['10352', 'English Listening Practice 1', '', '이수면제용', 0]);
var classification_input = document.getElementById('classification');
classification_input.value = '교필';
classification_input.disabled = true;
return;
}
else{
show_table(['11304', '대학영어', '', '이수면제용', 0]);
var classification_input = document.getElementById('classification');
classification_input.value = '공필';
classification_input.disabled = true;
return;
}
}
// ajax 통신 시작
$.ajax(
{
type: 'POST',
url: '/a_search/',
// views에는 back_s_num 이라는 이름으로 input에 있는 학수번호를 넘겨준다.
data: { back_s_num: input_s_num },
dataType: 'json',
// 성공시 백에서 result 변수가 넘어온다.
success: function (context) {
if (context['result'] === '검색실패') {
show_fail();
}
else {
show_table(context['result']);
}
},
// 에러시 설정
error: function (e) { }
}
);
}
function show_fail() {
var div = document.querySelector('#result_div');
html = "<div class='caution_div'>해당 학수번호가 데이터베이스에서 검색되지 않습니다.</div>"
div.innerHTML = html;
}
function show_table(result) {
var div = document.querySelector('#result_div');
html = "<table class='grade_table' style='margin-top:0'>";
html += "<tr>";
html += "<th class='grade_table_th' style='width:10%'>년도</th>"
html += "<th class='grade_table_th' style='width:10%'>학기</th>"
html += "<th class='grade_table_th' style='width:10%'>학수번호</th>"
html += "<th class='grade_table_th' style='width:40%'>과목명</th>"
html += "<th class='grade_table_th' style='width:10%'>이수구분</th>"
html += "<th class='grade_table_th' style='width:14%'>선택영역</th>"
html += "<th class='grade_table_th' style='width:6%; border-right :0px'>학점</th>"
html += "</tr>";
html += "<tr>";
html += "<td class='grade_table_td'><input class='td_input' type='text' id='year' value='커스텀' readonly></td>";
html += "<td class='grade_table_td'><input class='td_input' type='text' id='semester' value='커스텀' readonly></td>";
html += "<td class='grade_table_td'><input class='td_input' type='text' id='subject_num' value='" + result[0] + "' readonly></td>";
html += "<td class='grade_table_td'><input class='td_input' type='text' id='subject_name' value='" + result[1] + "' readonly></td>";
html += "<td class='grade_table_td'>";
html += "<select id='classification' class='td_input'>";
html += "<option value='x' selected>-- 선택 --</option>"
html += "<option value='전필'>전필</option>"
html += "<option value='전선'>전선</option>"
html += "<option value='교필'>교필</option>"
html += "<option value='교선1'>교선1</option>"
html += "<option value='교선2'>교선2</option>"
html += "<option value='기교'>기교</option>"
html += "<option value='연필'>연필</option>"
html += "<option value='연선'>연선</option>"
html += "<option value='복필'>복필</option>"
html += "<option value='복선'>복선</option>"
html += "<option value='교선'>교선(22학번 이후)</option>"
html += "<option value='공필'>공필</option>"
html += "<option value='균필'>균필</option>"
html += "<option value='기필'>기필</option>"
html += "</select>";
html += "</td>";
html += "<td class='grade_table_td'><input class='td_input' type='text' id='selection' value='" + result[3] + "' readonly></td>";
html += "<td class='grade_table_td' style='border-right :0px'><input class='td_input' type='text' id='grade' value='" + result[4] + "' readonly></td>";
html += "</tr>";
html += "</table>";
html += "<button class='add_btn' onclick='add_subject()'>과목 추가하기</button>";
div.innerHTML = html;
}
function del_row_new(obj) {
// 테이블 불러오기
var table = document.getElementById('mytable');
// td -> tr -> 행인덱스 찾기
var index = $(obj).parent().parent().index();
// 테이블에서 해당 인덱스 삭제
table.deleteRow(index);
}
function del_row_old(obj) {
// del_s_num 전역배열에 삭제한 기존 커스텀의 학수번호를 추가
var tr = $(obj).parent().parent()
var td = tr.children()
var s_num = td.eq(2).text()
list_delete.push(s_num);
// 프론트 테이블에서 삭제
var table = document.getElementById('mytable');
var index = $(obj).parent().parent().index();
table.deleteRow(index);
}
function combine(){
// 각각 빈 리스트 생성
var list_year = [];
var list_semester = [];
var list_subject_num = [];
var list_subject_name = [];
var list_classification = [];
var list_selection = [];
var list_grade = [];
// 각각 칼럼별 name으로 모두 불러와서 리스트에다가 저장
$('input[name=year]').each(function(index, item){
list_year.push($(item).val());
});
$('input[name=semester]').each(function(index, item){
list_semester.push($(item).val());
});
$('input[name=subject_num]').each(function(index, item){
list_subject_num.push($(item).val());
});
$('input[name=subject_name]').each(function(index, item){
list_subject_name.push($(item).val());
});
$('input[name=classification]').each(function(index, item){
list_classification.push($(item).val());
});
$('input[name=selection]').each(function(index, item){
list_selection.push($(item).val());
});
$('input[name=grade]').each(function(index, item){
list_grade.push($(item).val());
});
// 리스트를 hidden input으로 넣은 후 submit
$('#id_year').val(list_year);
$('#id_semester').val(list_semester);
$('#id_subject_num').val(list_subject_num);
$('#id_subject_name').val(list_subject_name);
$('#id_classification').val(list_classification);
$('#id_selection').val(list_selection);
$('#id_grade').val(list_grade);
// 이건 기존 커스텀에서 삭제한 학수번호 리스트
$('#id_delete').val(list_delete);
}
</script>
</html>