Add: search_record popup htmls

src/web/module/maestro_section_record.html

@@ -83,7 +83,7 @@ function selectElementContents(el) {
 
 			<!-- 날짜 -->
 			<div class="form-group row">
-				<h5 class="col-sm-2 my-2 text-right">날짜</h5>
+				<label class="col-sm-2 my-2 text-right">날짜</label>
 				<div class="col-sm-10">
 
 					<div class="form-row align-items-center">
@@ -117,7 +117,11 @@ function selectElementContents(el) {
 
 			<!-- 학생 이름 -->
 			<div class="form-group row">
-				<h5 class="col-sm-2 my-2 text-right">학생 이름</h5>
+				<!-- <h5 class="col-sm-2 my-2 text-right">학생 이름</h5> -->
+				<label class="col-sm-2 my-2 text-right">
+					학생 이름&nbsp;
+					<span class="badge badge-pill badge-info" onClick='showModal("recordPopupModal", "recordPopupContent", "search_record_player_name");' style="cursor: pointer;">?</span>
+				</label>
 				<div class="col-sm-10">
 					<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
 				</div>
@@ -125,18 +129,22 @@ function selectElementContents(el) {
 
 			<!-- 과목 -->
 			<div class="form-group row mb-0">
-				<h5 class="col-sm-2 my-2 text-right">과목</h5>
+				<!-- <h5 class="col-sm-2 my-2 text-right">과목</h5> -->
+				<label class="col-sm-2 my-2 text-right">
+					과목&nbsp;
+					<span class="badge badge-pill badge-info" onClick='showModal("recordPopupModal", "recordPopupContent", "search_record_subject");' style="cursor: pointer;">?</span>
+				</label>
 				<div class="col-sm-10">
 					<div class="row">
 						<label for="time" class="col-sm-2 col-form-label py-0">타자 연습</label>
 						<div class="col-sm-10">
 							<div class="form-check form-check-inline">
 								<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
-								<label class="form-check-label" for="inlineRadio1">한글 타자 연습</label>
+								<label class="form-check-label" for="inlineRadio1">한글 타자 연습 묶음</label>
 							</div>
 							<div class="form-check form-check-inline">
 								<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
-								<label class="form-check-label" for="inlineRadio2">영문 타자 연습</label>
+								<label class="form-check-label" for="inlineRadio2">영문 타자 연습 묶음</label>
 							</div>
 							<div class="form-check form-check-inline">
 								<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
@@ -150,11 +158,11 @@ function selectElementContents(el) {
 						<div class="col-sm-10">
 							<div class="form-check form-check-inline">
 								<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
-								<label class="form-check-label" for="inlineRadio1">한글 타자 연습</label>
+								<label class="form-check-label" for="inlineRadio1">한글 타자 시험 묶음</label>
 							</div>
 							<div class="form-check form-check-inline">
 								<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
-								<label class="form-check-label" for="inlineRadio2">영문 타자 연습</label>
+								<label class="form-check-label" for="inlineRadio2">영문 타자 시험 묶음</label>
 							</div>
 							<div class="form-check form-check-inline">
 								<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
@@ -178,7 +186,7 @@ function selectElementContents(el) {
 <div class="row justify-content-between mb-2">
 	<div class="col-auto">
 		<button type="button" class="btn btn-primary" onClick="selectElementContents( document.getElementById('dataTable') );">표 내용을 클립보드에 복사</button>
-		<span class="badge badge-pill badge-info" onClick='showModal("recordPopupModal", "recordPopupContent", "copy_result_to_clipboard");' style="cursor: pointer;">?</span>
+		<span class="badge badge-pill badge-info" onClick='showModal("recordPopupModal", "recordPopupContent", "search_record_copy_result_to_clipboard");' style="cursor: pointer;">?</span>
 	</div>
 	<div class="col-auto">
 		<button type="button" class="btn btn-primary" disabled>표 내용을 엑셀 파일로 다운로드</button>

src/web/popup/copy_result_to_clipboard.html

@@ -1,183 +0,0 @@
-<script type="text/javascript">
-
-
-$(document).ready(function() {
-	$('.shortcut_icon_maestro_id').append(maestroInfo.maestroName);
-});
-
-
-</script>
-
-
-<div class="modal-header">
-	<h5 class="modal-title" id="contractModalLabel">바로 가기 아이콘 생성</h5>
-	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-		<span aria-hidden="true">&times;</span>
-	</button>
-</div>
-
-<div class="modal-body">
-
-	<div class="card">
-		<h5 class="card-header bg-dark text-white">바로 가기 주소</h5>
-		<div class="card-body">
-			<table class="table table-sm table-borderless">
-				<tbody>
-					<tr>
-						<td scope="row">학생 로그인 화면</td>
-						<td>http://www.chocomae.com/<span class="text-danger">login</span>/<span class="shortcut_icon_maestro_id"></span></td>
-					</tr>
-					<tr>
-						<td scope="row">타이머 로그인 화면</td>
-						<td>http://www.chocomae.com/<span class="text-primary">timer</span>/<span class="shortcut_icon_maestro_id"></span></td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
-	</div>
-	<br/>
-
-	<div class="card">
-		<h5 class="card-header bg-success text-white">직접 만들기 (권장)</h5>
-		<div class="card-body">
-			<h5 class="card-title">바탕화면에 아이콘 생성</h5>
-			<p class="card-text">
-				<ol>
-					<li>
-						바탕화면 빈 곳에서 마우스 오른쪽 버튼 클릭
-						<ul>
-							<li>팝업창에서 [새로 만들기(W)] > [바로 가기(S)] 클릭</li>
-						</ul>
-						​<picture>
-							<source srcset="./../../../resources/image/help/make_shortcut_file.png" type="image/svg+xml">
-							<img src="./../../../resources/image/help/make_shortcut_file.png" class="img-fluid img-thumbnail" alt="새로 만들기">
-						</picture>
-					</li>
-					<br/>
-					<li>
-						[바로 가기 만들기] 팝업창 실행
-						<ol>
-							<li>"항목 위치 입력(T)"에 바로 가기 url 입력</li>
-							<li>[다음(N)] 버튼 클릭</li>
-							<li>"바로 가기에 사용할 이름 입력(T)"에 아이콘 이름 입력</li>
-							<li>[마침(F)] 버튼 클릭</li>
-						</ol>
-					</li>
-					<br/>
-					<li>바탕 화면에 바로 가기 아이콘이 생성된 것을 확인</li>
-				</ol>
-			</p>
-		</div>
-	</div>
-	<br/>
-
-	<div class="card">
-		<h5 class="card-header bg-info text-white">바로 가기 파일 다운받고 수정하기</h5>
-		<div class="card-body">
-			<h5 class="card-title">바로 가기 파일 다운받기</h5>
-			<p class="card-text">
-				<ul>
-					<li>아래의 바로 가기 파일 다운로드 받기</li>
-				</ul>
-				<a href="./../../../resources/file/chocomae.url" download>
-					<img src="./../../../resources/image/icon/icon_chocomae.png" class="rounded mx-auto d-block" alt="바로 가기 아이콘 파일">
-					<div class="text-center">초코마에 바로 가기 아이콘 다운로드</div>
-				</a>
-			</p>
-			<br/>
-
-			<h5 class="card-title">내용 수정하기</h5>
-			<p class="card-text">
-				<ul>
-					<li>바로 가기 파일을 마우스 오른쪽 버튼 클릭</li>
-					<li>팝업창에서 [속성(R)] 클릭</li>
-					<li>
-						[웹 문서] 탭에서 "URL(U)"에 수정할 주소 입력
-						​<picture>
-							<source srcset="./../../../resources/image/help/shortcut_icon_url.png" type="image/svg+xml">
-							<img src="./../../../resources/image/help/shortcut_icon_url.png" class="img-fluid img-thumbnail" alt="바로 가기 주소 수정">
-						</picture>
-					</li>
-					<li>[확인] 버튼 클릭</li>
-				</ul>
-			</p>
-		</div>
-	</div>
-	<br/>
-
-	<div class="card">
-		<h5 class="card-header bg-danger text-white">브라우저에서 드래그해서 만들기 (권장하지 않음)</h5>
-		<div class="card-body">
-			<h5 class="card-title">Chrome</h5>
-			<p class="card-text">
-				<ul>
-					<li>
-						<span class="text-primary">생성 가능</span>
-						<ol>
-							<li>주소입력창 왼쪽의 사이트 아이콘을 클릭-드래그 시작</li>
-							<li>바탕화면으로 끌고 와서 드롭</li>
-						</ol>
-						​<picture>
-							<source srcset="./../../../resources/image/help/chrome_shortcut_icon_drag.png" type="image/svg+xml">
-							<img src="./../../../resources/image/help/chrome_shortcut_icon_drag.png" class="img-fluid img-thumbnail" alt="새로 만들기">
-						</picture>
-					</li>
-					<li>
-						<span class="text-primary">주소 변경 가능</span>
-						<ol>
-							<li>바로 가기 아이콘을 마우스 오른쪽 클릭하고 [속성(R)] 클릭</li>
-							<li>팝업창에서 바로 가기 url을 새로 입력</li>
-						</ol>
-					</li>
-				</ul>
-			</p>
-
-			<h5 class="card-title">IE11</h5>
-			<p class="card-text">
-				<ul>
-					<li>
-						<span class="text-primary">생성 가능</span>
-						<ol>
-							<li>주소입력창 왼쪽의 사이트 아이콘을 클릭-드래그 시작</li>
-							<li>바탕화면으로 끌고 와서 드롭</li>
-						</ol>
-						​<picture>
-							<source srcset="./../../../resources/image/help/ie11_shortcut_icon_drag.png" type="image/svg+xml">
-							<img src="./../../../resources/image/help/ie11_shortcut_icon_drag.png" class="img-fluid img-thumbnail" alt="새로 만들기">
-						</picture>
-					</li>
-					<li>
-						<span class="text-danger">주소 변경 불가능</span>
-						<ul>
-							<li>생성된 아이콘 파일이 .url 이 아니라 .website 여서 내용 변경이 안됨
-							</li>
-						</ul>
-					</li>
-				</ul>
-			</p>
-
-			<h5 class="card-title">MS Edge</h5>
-			<p class="card-text">
-				<ul>
-					<li>
-						<span class="text-danger">생성 불가능</span>
-						<ol>
-							<li>주소입력창 왼쪽의 사이트 아이콘을 클릭-드래그 시작</li>
-							<li>바탕화면에 <span class="text-danger">드롭 불가 표시</span>가 나타남</li>
-						</ol>
-						​<picture>
-							<source srcset="./../../../resources/image/help/edge_shortcut_icon_drag.png" type="image/svg+xml">
-							<img src="./../../../resources/image/help/edge_shortcut_icon_drag.png" class="img-fluid img-thumbnail" alt="새로 만들기">
-						</picture>
-					</li>
-					<li>
-						<span class="text-danger">주소 변경 불가능</span>
-					</li>
-				</ul>
-			</p>
-
-		</div>
-	</div>
-	<br/>
-
-</div>	<!-- modal-body -->

src/web/popup/result_copy_result_to_clipboard.html

@@ -0,0 +1,78 @@
+<div class="modal-header">
+	<h5 class="modal-title" id="contractModalLabel">엑셀에 클립보드 데이터 붙여넣기</h5>
+	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+
+<div class="modal-body">
+
+	<div class="card">
+		<h5 class="card-header bg-info text-white">엑셀에 데이터 붙여넣기</h5>
+		<div class="card-body">
+			<h5 class="card-title">바로 가기 파일 다운받기</h5>
+			<p class="card-text">
+				<ul>
+					<li>아래의 바로 가기 파일 다운로드 받기</li>
+				</ul>
+				<a href="./../../../resources/file/chocomae.url" download>
+					<img src="./../../../resources/image/icon/icon_chocomae.png" class="rounded mx-auto d-block" alt="바로 가기 아이콘 파일">
+					<div class="text-center">초코마에 바로 가기 아이콘 다운로드</div>
+				</a>
+			</p>
+			<br/>
+
+			<h5 class="card-title">내용 수정하기</h5>
+			<p class="card-text">
+				<ul>
+					<li>바로 가기 파일을 마우스 오른쪽 버튼 클릭</li>
+					<li>팝업창에서 [속성(R)] 클릭</li>
+					<li>
+						[웹 문서] 탭에서 "URL(U)"에 수정할 주소 입력
+						​<picture>
+							<source srcset="./../../../resources/image/help/shortcut_icon_url.png" type="image/svg+xml">
+							<img src="./../../../resources/image/help/shortcut_icon_url.png" class="img-fluid img-thumbnail" alt="바로 가기 주소 수정">
+						</picture>
+					</li>
+					<li>[확인] 버튼 클릭</li>
+				</ul>
+			</p>
+		</div>
+	</div>
+	<br/>
+
+	<div class="card">
+		<h5 class="card-header bg-info text-white">필터 사용</h5>
+		<div class="card-body">
+			<h5 class="card-title">필터 적용하기</h5>
+			<p class="card-text">
+				<ul>
+					<li>아래의 바로 가기 파일 다운로드 받기</li>
+				</ul>
+				<a href="./../../../resources/file/chocomae.url" download>
+					<img src="./../../../resources/image/icon/icon_chocomae.png" class="rounded mx-auto d-block" alt="바로 가기 아이콘 파일">
+					<div class="text-center">초코마에 바로 가기 아이콘 다운로드</div>
+				</a>
+			</p>
+			<br/>
+
+			<h5 class="card-title">필터링하기</h5>
+			<p class="card-text">
+				<ul>
+					<li>바로 가기 파일을 마우스 오른쪽 버튼 클릭</li>
+					<li>팝업창에서 [속성(R)] 클릭</li>
+					<li>
+						[웹 문서] 탭에서 "URL(U)"에 수정할 주소 입력
+						​<picture>
+							<source srcset="./../../../resources/image/help/shortcut_icon_url.png" type="image/svg+xml">
+							<img src="./../../../resources/image/help/shortcut_icon_url.png" class="img-fluid img-thumbnail" alt="바로 가기 주소 수정">
+						</picture>
+					</li>
+					<li>[확인] 버튼 클릭</li>
+				</ul>
+			</p>
+		</div>
+	</div>
+	<br/>
+
+</div>	<!-- modal-body -->

src/web/popup/search_record_copy_result_to_clipboard.html

@@ -0,0 +1,78 @@
+<div class="modal-header">
+	<h5 class="modal-title" id="contractModalLabel">엑셀에 클립보드 데이터 붙여넣기</h5>
+	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+
+<div class="modal-body">
+
+	<div class="card">
+		<h5 class="card-header bg-info text-white">엑셀에 데이터 붙여넣기</h5>
+		<div class="card-body">
+			<h5 class="card-title">바로 가기 파일 다운받기</h5>
+			<p class="card-text">
+				<ul>
+					<li>아래의 바로 가기 파일 다운로드 받기</li>
+				</ul>
+				<a href="./../../../resources/file/chocomae.url" download>
+					<img src="./../../../resources/image/icon/icon_chocomae.png" class="rounded mx-auto d-block" alt="바로 가기 아이콘 파일">
+					<div class="text-center">초코마에 바로 가기 아이콘 다운로드</div>
+				</a>
+			</p>
+			<br/>
+
+			<h5 class="card-title">내용 수정하기</h5>
+			<p class="card-text">
+				<ul>
+					<li>바로 가기 파일을 마우스 오른쪽 버튼 클릭</li>
+					<li>팝업창에서 [속성(R)] 클릭</li>
+					<li>
+						[웹 문서] 탭에서 "URL(U)"에 수정할 주소 입력
+						​<picture>
+							<source srcset="./../../../resources/image/help/shortcut_icon_url.png" type="image/svg+xml">
+							<img src="./../../../resources/image/help/shortcut_icon_url.png" class="img-fluid img-thumbnail" alt="바로 가기 주소 수정">
+						</picture>
+					</li>
+					<li>[확인] 버튼 클릭</li>
+				</ul>
+			</p>
+		</div>
+	</div>
+	<br/>
+
+	<div class="card">
+		<h5 class="card-header bg-info text-white">필터 사용</h5>
+		<div class="card-body">
+			<h5 class="card-title">필터 적용하기</h5>
+			<p class="card-text">
+				<ul>
+					<li>아래의 바로 가기 파일 다운로드 받기</li>
+				</ul>
+				<a href="./../../../resources/file/chocomae.url" download>
+					<img src="./../../../resources/image/icon/icon_chocomae.png" class="rounded mx-auto d-block" alt="바로 가기 아이콘 파일">
+					<div class="text-center">초코마에 바로 가기 아이콘 다운로드</div>
+				</a>
+			</p>
+			<br/>
+
+			<h5 class="card-title">필터링하기</h5>
+			<p class="card-text">
+				<ul>
+					<li>바로 가기 파일을 마우스 오른쪽 버튼 클릭</li>
+					<li>팝업창에서 [속성(R)] 클릭</li>
+					<li>
+						[웹 문서] 탭에서 "URL(U)"에 수정할 주소 입력
+						​<picture>
+							<source srcset="./../../../resources/image/help/shortcut_icon_url.png" type="image/svg+xml">
+							<img src="./../../../resources/image/help/shortcut_icon_url.png" class="img-fluid img-thumbnail" alt="바로 가기 주소 수정">
+						</picture>
+					</li>
+					<li>[확인] 버튼 클릭</li>
+				</ul>
+			</p>
+		</div>
+	</div>
+	<br/>
+
+</div>	<!-- modal-body -->

src/web/popup/search_record_player_name.html

@@ -0,0 +1,52 @@
+<div class="modal-header">
+	<h5 class="modal-title" id="contractModalLabel">학생 이름으로 검색하기</h5>
+	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+
+<div class="modal-body">
+
+	<div class="card">
+		<h5 class="card-header bg-info text-white">학생 이름 검색 팁</h5>
+		<div class="card-body">
+			<h5 class="card-title">전체 학생 검색</h5>
+			<p class="card-text">
+				<ul>
+					<li>
+						전체 학생을 검색하려면, 학생 이름을 <span class="text-danger">빈 칸</span>으로 남겨주세요.
+						<input type="text" class="form-control" placeholder="" disabled>
+					</li>
+				</ul>
+			</p>
+			<br/>
+
+<!--
+			<h5 class="card-title">여러 명을 한꺼번에 검색</h5>
+			<p class="card-text">
+				<ul>
+					<li>
+						검색할 학생들의 이름 사이에 <b>공백</b>을 입력합니다.
+						<input type="text" class="form-control" placeholder="홍길동 최영희 김철수" disabled>
+					</li>
+				</ul>
+			</p>
+			<br/>
+ -->
+
+			<h5 class="card-title">검색어를 포함하는 모든 이름이 출력됩니다.</h5>
+			<p class="card-text">
+				<ul>
+					<li class="mb-1">
+						검색어 : <span class="text-primary">영희</span><br/>→ 결과 : 김<span class="text-success">영희</span>, 박<span class="text-success">영희</span>, 최<span class="text-success">영희</span>
+					</li>
+					<li>
+						검색어 : <span class="text-primary">박</span><br/>→ 결과 : <span class="text-success">박</span>수혁, 존<span class="text-success">박</span>, 최<span class="text-success">박</span>수
+					</li>
+				</ul>
+			</p>
+		</div>
+	</div>
+	<br/>
+
+</div>	<!-- modal-body -->

src/web/popup/search_record_subject.html

@@ -0,0 +1,41 @@
+<div class="modal-header">
+	<h5 class="modal-title" id="contractModalLabel">과목별로 검색하기</h5>
+	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		<span aria-hidden="true">&times;</span>
+	</button>
+</div>
+
+<div class="modal-body">
+
+	<div class="card">
+		<h5 class="card-header bg-info text-white">과목 검색 안내</h5>
+		<div class="card-body">
+			<h5 class="card-title">한 과목씩만 검색</h5>
+			<p class="card-text">
+				<ul>
+					<li>서버 부담을 줄이기 위해, 한 과목씩만 검색하도록 제한하였습니다.</li>
+					<li></li>
+				</ul>
+			</p>
+			<br/>
+
+			<h5 class="card-title">묶음 검색</h5>
+			<p class="card-text">
+				<ul>
+					<li>타자 연습, 타자 시험의 경우 묶음 검색을 제공합니다.</li>
+					<li>한글, 영문으로 구분되어 제공됩니다.</li>
+					<li class="mb-1">
+						<b>한글 타자 <span class="text-primary">연습</span> 묶음</b>에는 아래와 같은 과목이 포함됩니다.<br/>
+						<span class="text-secondary">: 기본 자리, 왼손 윗글쇠, 검지 글쇠, 오른손 윗글쇠, 왼손 밑글쇠, 오른손 밑글쇠, 왼손 쌍자음, 오른손 쌍모음</span>
+					</li>
+					<li>
+						<b>한글 타자 <span class="text-primary">시험</span> 묶음</b>에는 아래와 같은 과목이 포함됩니다.<br/>
+						<span class="text-secondary">: 기본 자리, 왼손 윗글쇠, 검지 글쇠, 오른손 윗글쇠, 왼손 밑글쇠, 오른손 밑글쇠, 왼손 쌍자음, 오른손 쌍모음, <span class="text-info">시험 - 단어, 시험 - 문장</span></span>
+					</li>
+				</ul>
+			</p>
+		</div>
+	</div>
+	<br/>
+
+</div>	<!-- modal-body -->