Commit @f90edc527e28627fa542a0f1a3e98736594266c8

이화경 10-22

차트 JS 수정 및 나의 강의실 퍼블 진행중

@f90edc527e28627fa542a0f1a3e98736594266c8

cc08bf6

f90edc5

html/onSejong/index.html

--- html/onSejong/index.html

+++ html/onSejong/index.html


                                     <ul>
                                         <li class="working">수강생 관리,manager/myclass/memberManage_student.html</li>
                                         <li class="working">[팝업]거절사유,manager/class/pop_rejectReason.html</li>
-                                        <li class="before">초대하기</li>
+                                        <li class="working">초대하기,manager/myclass/invite.html</li>
                                         <li class="before">초대하기 링크</li>
                                         <li class="working">[팝업]학생찾기,manager/class/pop_studentFind.html</li>
                                         <li class="working">청강생관리,manager/myclass/memberManage_auditor.html</li>

                                         <li class="working">[팝업]상세보기,manager/myclass/pop_studentReflection.html</li>
                                     </ul>
                                 </li>
-                                <li class="before">학습활동 보고서</li>
+                                <li class="before">학습활동 보고서,manager/myclass/activityReport.html</li>
                                 <li class="before">SMS 보내기 </li>
                             </ul>
                         </li>

f90edc5

html/onSejong/manager/myclass/activityReport.html (added)

+++ html/onSejong/manager/myclass/activityReport.html

...	...	@@ -0,0 +1,257 @@
	1	+<!DOCTYPE html>
	2	+<html lang="ko">
	3	+ <head>
	4	+ <title>온세종학교</title>
	5	+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	6	+ <meta name="Author" content="" />
	7	+ <meta name="Keywords" content="" />
	8	+ <meta name="Description" content="" />
	9	+ <meta name="format-detection" content="telephone=no" />
	10	+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	11	+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
	12	+ <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet" />
	13	+ <!-- 공통 plugin -->
	14	+ <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script>
	15	+ <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script>
	16	+ <!-- //공통 plugin -->
	17	+ <!-- 페이지 plugin-->
	18	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/swiper/swiper-bundle.js"></script>
	19	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/etc/jQuery.tagify.min.js"></script>
	20	+ <!-- chart -->
	21	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chart4.3.0.js"></script>
	22	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-datalabels@2.0.js"></script>
	23	+ <!-- //chart -->
	24	+ <!-- //페이지 plugin-->
	25	+ <!-- 공통 퍼블 layout: 개발시 삭제-->
	26	+ <script src="/resources/front/site/SITE_00000/js/_layout.js"></script>
	27	+ <!--//퍼블 layout-->
	28	+ <!-- 공통 메뉴 js-->
	29	+ <!-- //공통 메뉴 js -->
	30	+ <!--공통 퍼블 js-->
	31	+ <script src="/resources/front/site/SITE_00000/js/common.js"></script>
	32	+ <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script>
	33	+ <!--//공통 퍼블 js-->
	34	+ </head>
	35	+
	36	+ <body>
	37	+ <div class="accessibility">
	38	+ <a href="#skipToContents" title="콘텐츠를 바로 볼 수 있도록 건너뛰기합니다.">콘텐츠 바로가기</a>
	39	+ </div>
	40	+ <!-- for-teacher / for-student -->
	41	+ <div class="container">
	42	+ <!-- 통합 헤더 및 네비게이션 -->
	43	+ <header class="site-header"></header>
	44	+ <div class="site-body" id="skipToContents">
	45	+ <div class="wrap">
	46	+ <aside class="lnb"></aside>
	47	+ <div class="site-cont">
	48	+ <ul class="breadcrumb">
	49	+ <li><a href="#none" class="home">홈</a></li>
	50	+ <li><a href="#none">1depth</a></li>
	51	+ <li><a href="#none">2depth</a></li>
	52	+ </ul>
	53	+ <div class="page-tit-area">
	54	+ <div class="l-area">
	55	+ <h2 class="title-xlg">학습활동 보고서</h2>
	56	+ </div>
	57	+ </div>
	58	+ <div class="summary-page">
	59	+ <div class="l-area">
	60	+ <div class="img-area">
	61	+ <img src="/resources/front/site/SITE_00000/images/common/ico-summary/ico-summary-message.svg" alt="" aria-hidden="true">
	62	+ </div>
	63	+ <div class="txt-area">
	64	+ <strong class="summary-tit">이용 가이드</strong>
	65	+ <ul class="bullet">
	66	+ <li>해당 과정 전체의 데이터를 확인할 수 있습니다.</li>
	67	+ <li>학생멤버를 선택하시면 멤버 1명의 데이터를 확인할 수 있습니다.</li>
	68	+ <li>학습활동이 없는 기간이나 항목의 경우 데이터가 조회되지 않을 수 있습니다.</li>
	69	+ <li>데이터는 어제까지(OR 최근) 누적된 내용으로 제공됩니다.</li>
	70	+ </ul>
	71	+ </div>
	72	+ </div>
	73	+ </div>
	74	+ <div class="fnc-extend-area sticky top0">
	75	+ <div class="extend-filter-area">
	76	+ <div class="l-area">
	77	+ <div class="txt-area">
	78	+ 학생 선택
	79	+ </div>
	80	+ <select title="학생 선택">
	81	+ <option value="">전체</option>
	82	+ </select>
	83	+ </div>
	84	+ <div class="r-area">
	85	+ <div class="txt-area">
	86	+ 기간 선택
	87	+ </div>
	88	+ <input type="date" title="시작일자 선택">
	89	+ <span>-</span>
	90	+ <input type="date" title="종료일자 선택">
	91	+ <button type="button" class="btn primary">확인</button>
	92	+ </div>
	93	+ </div>
	94	+ </div>
	95	+ <section class="section sm">
	96	+ <div class="section-tit-area">
	97	+ <div class="l-area">
	98	+ <h3 class="title-lg">학습 현황</h3>
	99	+ </div>
	100	+ </div>
	101	+ <div class="chart-summary-list">
	102	+ <li>
	103	+ <div class="txt-area">
	104	+ <h4 class="summary-tit">수업 이수율</h4>
	105	+ <div>
	106	+ <a href="#none" class="btn sm primary ico-arrow-right back">GO</a>
	107	+ </div>
	108	+ </div>
	109	+ <div class="chart-area">
	110	+ <div class="chart">
	111	+ <canvas id="chart1" class="chart-doughnut"></canvas>
	112	+ <span class="txt">0%</span>
	113	+ </div>
	114	+ </div>
	115	+ </li>
	116	+ <li>
	117	+ <div class="txt-area">
	118	+ <h4 class="summary-tit">과제 제출률</h4>
	119	+ <div>
	120	+ <a href="#none" class="btn sm primary ico-arrow-right back">GO</a>
	121	+ </div>
	122	+ </div>
	123	+ <div class="chart-area">
	124	+ <div class="chart">
	125	+ <canvas id="chart2" class="chart-doughnut"></canvas>
	126	+ <span class="txt">40%</span>
	127	+ </div>
	128	+ </div>
	129	+ </li>
	130	+ <li>
	131	+ <div class="txt-area">
	132	+ <h4 class="summary-tit">평가 참여율</h4>
	133	+ <div>
	134	+ <a href="#none" class="btn sm primary ico-arrow-right back">GO</a>
	135	+ </div>
	136	+ </div>
	137	+ <div class="chart-area">
	138	+ <div class="txt-none spacing-none">
	139	+ <figure>
	140	+ <img src="/resources/front/site/SITE_00000/images/common/common/txt_none.svg" alt="콘텐츠 없음">
	141	+ </figure>
	142	+ <p>활동 및 분석 데이터가 없습니다.</p>
	143	+ </div>
	144	+ </div>
	145	+ </li>
	146	+ </div>
	147	+ </section>
	148	+ <section class="section-box">
	149	+ <header class="box-header">
	150	+ <div class="l-area">
	151	+ <h3 class="section-box-tit">수업 이수율</h3>
	152	+ </div>
	153	+ </header>
	154	+ <div class="box-body">
	155	+ <div class="chart-area">
	156	+ <div class="chart">
	157	+ <canvas id="courseCompletion" style="max-height: 28rem;"></canvas>
	158	+ </div>
	159	+ </div>
	160	+ </div>
	161	+ </section>
	162	+ <div class="row">
	163	+ <section class="section-box">
	164	+ <header class="box-header">
	165	+ <div class="l-area">
	166	+ <h3 class="section-box-tit">문항 난이도별 정답률</h3>
	167	+ </div>
	168	+ </header>
	169	+ <div class="box-body">
	170	+ <div class="chart-area">
	171	+ <div class="chart">
	172	+ <canvas id="quizLevel" style="max-height: 28rem;"></canvas>
	173	+ </div>
	174	+ </div>
	175	+ </div>
	176	+ </section>
	177	+ <section class="section-box">
	178	+ <header class="box-header">
	179	+ <div class="l-area">
	180	+ <h3 class="section-box-tit">제일 많이 틀린 문항</h3>
	181	+ </div>
	182	+ <div class="r-area">
	183	+ <a href="#none" class="btn sm secondary ico-arrow-right back">문제풀이 결과 바로가기</a>
	184	+ </div>
	185	+ </header>
	186	+ <div class="box-body">
	187	+ <ul class="chart-bar-list">
	188	+ <li>
	189	+ <div class="chart-tit-area">
	190	+ <div class="chart-tit">#123456 \| 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
	191	+ </div>
	192	+ <div class="bar-area">
	193	+ <button type="button" class="bar" style="width:50%;">50%</button><small class="chart-label">50% 오답률</small>
	194	+ </div>
	195	+ </li>
	196	+ <li>
	197	+ <div class="chart-tit-area">
	198	+ <div class="chart-tit">#123456 \| 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
	199	+ </div>
	200	+ <div class="bar-area">
	201	+ <button type="button" class="bar" style="width:22%;">22%</button><small class="chart-label">22% 오답률</small>
	202	+ </div>
	203	+ </li>
	204	+ <li>
	205	+ <div class="chart-tit-area">
	206	+ <div class="chart-tit">#123456 \| 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
	207	+ </div>
	208	+ <div class="bar-area">
	209	+ <button type="button" class="bar" style="width:50%;">50%</button><small class="chart-label">50% 오답률</small>
	210	+ </div>
	211	+ </li>
	212	+ <li>
	213	+ <div class="chart-tit-area">
	214	+ <div class="chart-tit">#123456 \| 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 \| 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
	215	+ </div>
	216	+ <div class="bar-area">
	217	+ <button type="button" class="bar" style="width:22%;">22%</button><small class="chart-label">22% 오답률</small>
	218	+ </div>
	219	+ </li>
	220	+ </ul>
	221	+ </div>
	222	+ </section>
	223	+ </div>
	224	+ <div class="btn-cont">
	225	+ <button class="btn lg">목록</button>
	226	+ <button type="submit" class="btn lg primary">저장</button>
	227	+ </div>
	228	+ </div>
	229	+ </div>
	230	+ </div>
	231	+ <footer class="site-footer"></footer>
	232	+ </div>
	233	+ <!-- toast -->
	234	+ <div class="toast"></div>
	235	+ <!--popup-->
	236	+ <div class="dim"></div>
	237	+
	238	+ <script>
	239	+ $(document).ready(function () {
	240	+ // 학습 현황
	241	+ createChartDoughnut('chart1', 0, gradientColorPrimary);
	242	+ createChartDoughnut('chart2', 40, gradientColorPrimary);
	243	+
	244	+ // 수업 이수율
	245	+ const courseCompletionData = {
	246	+ labels: ['2025-01-01', '2025-01-02', '2025-01-03', '2025-01-04', '2025-01-05'],
	247	+ data: [0, 50, 87, 30, 100],
	248	+ };
	249	+
	250	+ createChartBarWidthauto('courseCompletion', courseCompletionData.labels, courseCompletionData.data, null, 65);
	251	+ // createChartBar('courseCompletion', courseCompletionData.labels, courseCompletionData.data,);
	252	+
	253	+ });
	254	+
	255	+ </script>
	256	+ </body>
	257	+</html>

cc08bf6

html/onSejong/manager/myclass/gradeInput copy.html (deleted)

--- html/onSejong/manager/myclass/gradeInput copy.html

...	...	@@ -1,196 +0,0 @@
	1	-<!DOCTYPE html>
	2	-<html lang="ko">
	3	- <head>
	4	- <title>온세종학교</title>
	5	- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	6	- <meta name="Author" content="" />
	7	- <meta name="Keywords" content="" />
	8	- <meta name="Description" content="" />
	9	- <meta name="format-detection" content="telephone=no" />
	10	- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	11	- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
	12	- <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet" />
	13	- <!-- 공통 plugin -->
	14	- <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script>
	15	- <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script>
	16	- <!-- //공통 plugin -->
	17	- <!-- 페이지 plugin-->
	18	- <script src="/resources/front/site/SITE_00000/js/common/vendor/swiper/swiper-bundle.js"></script>
	19	- <script src="/resources/front/site/SITE_00000/js/common/vendor/etc/jQuery.tagify.min.js"></script>
	20	- <!-- chart -->
	21	- <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chart4.3.0.js"></script>
	22	- <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-datalabels@2.0.js"></script>
	23	- <!-- //chart -->
	24	- <!-- //페이지 plugin-->
	25	- <!-- 공통 퍼블 layout: 개발시 삭제-->
	26	- <script src="/resources/front/site/SITE_00000/js/_layout.js"></script>
	27	- <!--//퍼블 layout-->
	28	- <!-- 공통 메뉴 js-->
	29	- <!-- //공통 메뉴 js -->
	30	- <!--공통 퍼블 js-->
	31	- <script src="/resources/front/site/SITE_00000/js/common.js"></script>
	32	- <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script>
	33	- <!--//공통 퍼블 js-->
	34	- </head>
	35	-
	36	- <body>
	37	- <div class="accessibility">
	38	- <a href="#skipToContents" title="콘텐츠를 바로 볼 수 있도록 건너뛰기합니다.">콘텐츠 바로가기</a>
	39	- </div>
	40	- <!-- for-teacher / for-student -->
	41	- <div class="container">
	42	- <!-- 통합 헤더 및 네비게이션 -->
	43	- <header class="site-header"></header>
	44	- <div class="site-body" id="skipToContents">
	45	- <div class="wrap">
	46	- <aside class="lnb"></aside>
	47	- <div class="site-cont">
	48	- <ul class="breadcrumb">
	49	- <li><a href="#none" class="home">홈</a></li>
	50	- <li><a href="#none">1depth</a></li>
	51	- <li><a href="#none">2depth</a></li>
	52	- </ul>
	53	- <div class="page-tit-area">
	54	- <div class="l-area">
	55	- <h2 class="title-xlg">성적직접관리</h2>
	56	- </div>
	57	- </div>
	58	- <section class="section">
	59	- <div class="section-tit-area">
	60	- <div class="l-area">
	61	- <h3 class="txt-hide">평가 상세</h3>
	62	- </div>
	63	- <div class="r-area">
	64	- <p class="msg">
	65	- <i class="required">*<span class="txt-hide">필수</span></i> 필수 입력
	66	- </p>
	67	- </div>
	68	- </div>
	69	- <div class="write-type">
	70	- <table>
	71	- <caption>
	72	- 평가 상세
	73	- </caption>
	74	- <colgroup>
	75	- <col style="width: 160px" />
	76	- <col />
	77	- </colgroup>
	78	- <tbody>
	79	- <tr>
	80	- <th scope="row">
	81	- 평가명<i class="required">*<span class="txt-hide">필수</span></i>
	82	- </th>
	83	- <td>
	84	- <input
	85	- type="text"
	86	- title="평가명을 입력하세요."
	87	- class="q4"
	88	- placeholder="평가명을 입력하세요."
	89	- />
	90	- </td>
	91	- </tr>
	92	- <tr>
	93	- <th scope="row">반영비율(%)</th>
	94	- <td>
	95	- <select title="지필 선택">
	96	- <option>지필</option>
	97	- </select>
	98	- <select title="비율 선택">
	99	- <option>%</option>
	100	- </select>
	101	- </td>
	102	- </tr>
	103	- </tbody>
	104	- </table>
	105	- </div>
	106	- </section>
	107	- <section class="section last">
	108	- <div class="fnc-area">
	109	- <div class="l-area">
	110	- <h3 class="txt-hide">성적직접관리</h3>
	111	- </div>
	112	- <div class="l-area">
	113	- <p>총 <em>00</em> 건</p>
	114	- </div>
	115	- <div class="r-area">
	116	- <fieldset class="search-area">
	117	- <legend>검색</legend>
	118	- <div class="search">
	119	- <input type="text" placeholder="검색어를 입력하세요." title="검색어를 입력하세요.">
	120	- <button class="btn ico-search">검색</button>
	121	- </div>
	122	- </fieldset>
	123	- </div>
	124	- </div>
	125	- <div class="list-type">
	126	- <table>
	127	- <caption>
	128	- 성적직접관리 상세
	129	- </caption>
	130	- <thead>
	131	- <tr>
	132	- <th scope="col">연번</th>
	133	- <th scope="col">학년</th>
	134	- <th scope="col">학교</th>
	135	- <th scope="col">반</th>
	136	- <th scope="col">번호</th>
	137	- <th scope="col">성명</th>
	138	- <th scope="col">점수 입력(점)</th>
	139	- </tr>
	140	- </thead>
	141	- <tbody>
	142	- <tr>
	143	- <td>3</td>
	144	- <td data-tit="학년">2</td>
	145	- <td data-tit="학교">다정초등학교</td>
	146	- <td data-tit="반">1</td>
	147	- <td data-tit="번호">3</td>
	148	- <td data-tit="이름">김세연</td>
	149	- <td data-tit="점수입력(점)">
	150	- <input type="number" title="점수 입력" />
	151	- </td>
	152	- </tr>
	153	- <tr>
	154	- <td>2</td>
	155	- <td data-tit="학년">2</td>
	156	- <td data-tit="학교">다정초등학교</td>
	157	- <td data-tit="반">1</td>
	158	- <td data-tit="번호">2</td>
	159	- <td data-tit="이름">김세연</td>
	160	- <td data-tit="점수입력(점)">
	161	- <input type="number" title="점수 입력" />
	162	- </td>
	163	- </tr>
	164	- <tr>
	165	- <td>1</td>
	166	- <td data-tit="학년">2</td>
	167	- <td data-tit="학교">다정초등학교</td>
	168	- <td data-tit="반">1</td>
	169	- <td data-tit="번호">1</td>
	170	- <td data-tit="이름">김세연</td>
	171	- <td data-tit="점수입력(점)">
	172	- <input type="number" title="점수 입력" />
	173	- </td>
	174	- </tr>
	175	- </tbody>
	176	- </table>
	177	- </div>
	178	- </section>
	179	- <div class="btn-fnc-cont align-left">
	180	- <button class="btn sm danger">삭제</button>
	181	- </div>
	182	- <div class="btn-cont">
	183	- <button class="btn lg">목록</button>
	184	- <button type="submit" class="btn lg primary">저장</button>
	185	- </div>
	186	- </div>
	187	- </div>
	188	- </div>
	189	- <footer class="site-footer"></footer>
	190	- </div>
	191	- <!-- toast -->
	192	- <div class="toast"></div>
	193	- <!--popup-->
	194	- <div class="dim"></div>
	195	- </body>
	196	-</html>

f90edc5

html/onSejong/manager/myclass/invite.html (added)

+++ html/onSejong/manager/myclass/invite.html

...	...	@@ -0,0 +1,151 @@
	1	+<!DOCTYPE html>
	2	+<html lang="ko">
	3	+ <head>
	4	+ <title>온세종학교</title>
	5	+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	6	+ <meta name="Author" content="" />
	7	+ <meta name="Keywords" content="" />
	8	+ <meta name="Description" content="" />
	9	+ <meta name="format-detection" content="telephone=no" />
	10	+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	11	+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
	12	+ <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet" />
	13	+ <!-- 공통 plugin -->
	14	+ <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script>
	15	+ <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script>
	16	+ <!-- //공통 plugin -->
	17	+ <!-- 페이지 plugin-->
	18	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/swiper/swiper-bundle.js"></script>
	19	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/etc/jQuery.tagify.min.js"></script>
	20	+ <!-- chart -->
	21	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chart4.3.0.js"></script>
	22	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-datalabels@2.0.js"></script>
	23	+ <!-- //chart -->
	24	+ <!-- //페이지 plugin-->
	25	+ <!-- 공통 퍼블 layout: 개발시 삭제-->
	26	+ <script src="/resources/front/site/SITE_00000/js/_layout.js"></script>
	27	+ <!--//퍼블 layout-->
	28	+ <!-- 공통 메뉴 js-->
	29	+ <!-- //공통 메뉴 js -->
	30	+ <!--공통 퍼블 js-->
	31	+ <script src="/resources/front/site/SITE_00000/js/common.js"></script>
	32	+ <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script>
	33	+ <!--//공통 퍼블 js-->
	34	+ </head>
	35	+
	36	+ <body>
	37	+ <div class="accessibility">
	38	+ <a href="#skipToContents" title="콘텐츠를 바로 볼 수 있도록 건너뛰기 합니다.">콘텐츠 바로가기</a>
	39	+ </div>
	40	+ <!-- for-teacher / for-student -->
	41	+ <div class="container">
	42	+ <!-- 통합 헤더 및 네비게이션 -->
	43	+ <header class="site-header"></header>
	44	+ <div class="site-body" id="skipToContents">
	45	+ <div class="wrap">
	46	+ <div class="site-cont">
	47	+ <ul class="breadcrumb">
	48	+ <li><a href="#none" class="home">홈</a></li>
	49	+ <li><a href="#none">1depth</a></li>
	50	+ <li><a href="#none">2depth</a></li>
	51	+ </ul>
	52	+ <div class="page-tit-area">
	53	+ <div class="l-area">
	54	+ <h2 class="title-xlg">초대하기</h2>
	55	+ </div>
	56	+ <div class="r-area">
	57	+ <div class="btn-group">
	58	+ <button class="btn secondary ico-upload">엑셀파일로 추가하기</button>
	59	+ <button class="btn secondary ico-search">학생찾기</button>
	60	+ </div>
	61	+ </div>
	62	+ </div>
	63	+ <div class="summary-page">
	64	+ <div class="l-area">
	65	+ <div class="img-area">
	66	+ <img src="/resources/front/site/SITE_00000/images/common/ico-summary/ico-summary-message.svg" alt="" aria-hidden="true" />
	67	+ </div>
	68	+ <div class="txt-area">
	69	+ <p>초대하고자 하는 학생의 이름/ID/휴대 전화번호를 입력하거나 계정을 양식에 맞춰 업로드해 주세요. <br>
	70	+ 초대는 ID 또는 휴대 전화번호로 등록할 수 있습니다.</p>
	71	+ </div>
	72	+ </div>
	73	+ <div class="r-area">
	74	+ <div class="btn-group">
	75	+ <button class="btn sm ico-download back">양식 다운로드</button>
	76	+ </div>
	77	+ </div>
	78	+ </div>
	79	+ <div class="list-type">
	80	+ <table>
	81	+ <caption>콘텐츠 목록</caption>
	82	+ <colgroup>
	83	+ <col style="width: 4.8rem">
	84	+ <col>
	85	+ <col>
	86	+ <col>
	87	+ </colgroup>
	88	+ <thead>
	89	+ <tr>
	90	+ <th scope="col">
	91	+ <div class="checkradio">
	92	+ <input type="checkbox" class="icon-only" id="chkAll">
	93	+ <label for="chkAll">선택</label>
	94	+ </div>
	95	+ </th>
	96	+ <th scope="col">회원 ID</th>
	97	+ <th scope="col">이름</th>
	98	+ <th scope="col">전화번호</th>
	99	+ </tr>
	100	+ </thead>
	101	+ <tbody>
	102	+ <tr>
	103	+ <td>
	104	+ <div class="checkradio">
	105	+ <input type="checkbox" class="icon-only" id="chk1_1">
	106	+ <label for="chk1_1">선택</label>
	107	+ </div>
	108	+ </td>
	109	+ <td data-tit="회원 ID">user_id</td>
	110	+ <td data-tit="이름">홍길동</td>
	111	+ <td data-tit="전화번호">010-1234-5678</td>
	112	+ </tr>
	113	+ <tr>
	114	+ <td>
	115	+ <div class="checkradio">
	116	+ <input type="checkbox" class="icon-only" id="chk1_2">
	117	+ <label for="chk1_1">선택</label>
	118	+ </div>
	119	+ </td>
	120	+ <td data-tit="회원 ID">user_id</td>
	121	+ <td data-tit="이름">홍길동</td>
	122	+ <td data-tit="전화번호">010-1234-5678</td>
	123	+ </tr>
	124	+ </tbody>
	125	+ </table>
	126	+ </div>
	127	+ <div class="txt-none">
	128	+ <figure>
	129	+ <img src="/resources/front/site/SITE_00000/images/common/common/txt_none.svg" alt="콘텐츠 없음">
	130	+ </figure>
	131	+ <p>추가한 학생이 없습니다.</p>
	132	+ <div class="btn-area">
	133	+ <button class="btn secondary sm ico-upload">엑셀파일로 추가하기</button>
	134	+ <button class="btn secondary sm ico-search">학생찾기</button>
	135	+ </div>
	136	+ </div>
	137	+ <div class="btn-cont">
	138	+ <button class="btn lg">목록</button>
	139	+ <button type="submit" class="btn lg primary">초대하기</button>
	140	+ </div>
	141	+ </div>
	142	+ </div>
	143	+ </div>
	144	+ <footer class="site-footer"></footer>
	145	+ </div>
	146	+ <!-- toast -->
	147	+ <div class="toast"></div>
	148	+ <!--popup-->
	149	+ <div class="dim"></div>
	150	+ </body>
	151	+</html>

cc08bf6

f90edc5

resources/front/site/SITE_00000/js/common-custom.js

--- resources/front/site/SITE_00000/js/common-custom.js

+++ resources/front/site/SITE_00000/js/common-custom.js


 // const gradientColorOrange =  ['#FF8F66', '#FF6A33'];
 //const gradientColorRed =  ['#F89999', '#F23B3B'];
 
+const gradientColorMint = ['#5FDDCD', '#AEEEE8'];
+const gradientColorSky = ['#26C1D9', '#91E7F5'];
+
 const hexToRGBA = (hex, opacity) => {
     // HEX 값에서 R, G, B 값을 추출
     const r = parseInt(hex.substring(1, 3), 16);

 }
 
 
+
 function createChartDoughnutTxt(elementId, value, gradientColors) {
     const ctx = document.getElementById(elementId).getContext('2d');
 

     });
 }
 
+function createChartBar(elementId, labels, data, onClick = null, avg = false) {
+    document.getElementById(elementId).classList.add('chart-bar');
+    const canvas = document.getElementById(elementId);
+    const chartParent = canvas.parentElement;
+    const ctx = canvas.getContext('2d');
+
+    const charBarStyle = {
+        datalabels: {
+            display: true,
+            anchor: 'end',
+            align: function (context) {
+                const dataValue = context.dataset.data[context.dataIndex];
+                var totalMinus = 95;
+                return dataValue === 0 || dataValue < totalMinus ? 'end' : 'center';
+            },
+            padding: {
+                left: isMobile ? 4 : 8,
+                right: isMobile ? 4 : 8
+            },
+            formatter: function(value) {
+                return value + '%';
+            },
+            ...chartStyleLabel
+        },
+        backgroundColor: function(context) {
+            return context.dataIndex % 2 === 0
+                ? createGradient(context.chart.ctx, gradientColorMint)
+                : createGradient(context.chart.ctx, gradientColorSky);
+        },
+        borderWidth: 0,
+        borderRadius: isMobile ? 16 : 24,
+        maxBarThickness: isMobile ? 16 : 24,
+        custom: function(context) {
+            const label = labels[context.dataIndex];
+            return label && label.id ? { id: label.id } : {};
+        }
+    };
+
+    const charBarOptions = {
+        plugins: {
+            tooltip: { enabled: false },
+            legend: { display: false },
+            annotation: {
+                annotations: {
+                    avgLine: {
+                        ...chartStyleAvgLine,
+                        display: !!avg,
+                        yMin: avg || 0,
+                        yMax: avg || 0,
+                    }
+                }
+            }
+        },
+        maintainAspectRatio: false,
+        animation: false,
+        scales: {
+            x: {
+                ticks: { ...chartStyleLabelFont },
+                grid: { display: false },
+            },
+            y: {
+                beginAtZero: true,
+                border: { dash: [2, 4] },
+                ticks: {
+                    padding: isMobile ? 0 : 8,
+                    stepSize: 25,
+                    ...chartStyleLabelFont,
+                    callback: function(value) { return value + '%'; }
+                },
+                max: 100,
+                min: 0,
+            },
+        },
+        onClick: onClick ? (event, elements) => {
+            onClick(event, elements, labels, data);
+        } : null,
+    };
+
+    new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{ data: data, ...charBarStyle }],
+        },
+        plugins: [ChartDataLabels],
+        options: charBarOptions,
+    });
+}
 
 function createChartBarWidthauto(elementId, labels, data, onClick = null, avg = false) {
     document.getElementById(elementId).classList.add('chart-bar-widthauto');

         },
         backgroundColor: function(context) {
             return context.dataIndex % 2 === 0
-            ? createGradient(context.chart.ctx, gradientColorPrimary)
-            : createGradient(context.chart.ctx, gradientColorSecondary);
+            ? createGradient(context.chart.ctx, gradientColorMint)
+            : createGradient(context.chart.ctx, gradientColorSky);
         },
         borderWidth: 0,
         borderRadius: isMobile ? 16 : 24,

Add a comment

Open 0
Closed 0

List

...	...	@@ -761,7 +761,7 @@
761	761	<ul>
762	762	<li class="working">수강생 관리,manager/myclass/memberManage_student.html</li>
763	763	<li class="working">[팝업]거절사유,manager/class/pop_rejectReason.html</li>
764		- <li class="before">초대하기</li>
	764	+ <li class="working">초대하기,manager/myclass/invite.html</li>
765	765	<li class="before">초대하기 링크</li>
766	766	<li class="working">[팝업]학생찾기,manager/class/pop_studentFind.html</li>
767	767	<li class="working">청강생관리,manager/myclass/memberManage_auditor.html</li>
...	...	@@ -793,7 +793,7 @@
793	793	<li class="working">[팝업]상세보기,manager/myclass/pop_studentReflection.html</li>
794	794	</ul>
795	795	</li>
796		- <li class="before">학습활동 보고서</li>
	796	+ <li class="before">학습활동 보고서,manager/myclass/activityReport.html</li>
797	797	<li class="before">SMS 보내기 </li>
798	798	</ul>
799	799	</li>

...	...	@@ -351,6 +351,9 @@
351	351	// const gradientColorOrange = ['#FF8F66', '#FF6A33'];
352	352	//const gradientColorRed = ['#F89999', '#F23B3B'];
353	353
	354	+const gradientColorMint = ['#5FDDCD', '#AEEEE8'];
	355	+const gradientColorSky = ['#26C1D9', '#91E7F5'];
	356	+
354	357	const hexToRGBA = (hex, opacity) => {
355	358	// HEX 값에서 R, G, B 값을 추출
356	359	const r = parseInt(hex.substring(1, 3), 16);
...	...	@@ -453,6 +456,7 @@
453	456	}
454	457
455	458
	459	+
456	460	function createChartDoughnutTxt(elementId, value, gradientColors) {
457	461	const ctx = document.getElementById(elementId).getContext('2d');
458	462
...	...	@@ -504,6 +508,94 @@
504	508	});
505	509	}
506	510
	511	+function createChartBar(elementId, labels, data, onClick = null, avg = false) {
	512	+ document.getElementById(elementId).classList.add('chart-bar');
	513	+ const canvas = document.getElementById(elementId);
	514	+ const chartParent = canvas.parentElement;
	515	+ const ctx = canvas.getContext('2d');
	516	+
	517	+ const charBarStyle = {
	518	+ datalabels: {
	519	+ display: true,
	520	+ anchor: 'end',
	521	+ align: function (context) {
	522	+ const dataValue = context.dataset.data[context.dataIndex];
	523	+ var totalMinus = 95;
	524	+ return dataValue === 0 \|\| dataValue < totalMinus ? 'end' : 'center';
	525	+ },
	526	+ padding: {
	527	+ left: isMobile ? 4 : 8,
	528	+ right: isMobile ? 4 : 8
	529	+ },
	530	+ formatter: function(value) {
	531	+ return value + '%';
	532	+ },
	533	+ ...chartStyleLabel
	534	+ },
	535	+ backgroundColor: function(context) {
	536	+ return context.dataIndex % 2 === 0
	537	+ ? createGradient(context.chart.ctx, gradientColorMint)
	538	+ : createGradient(context.chart.ctx, gradientColorSky);
	539	+ },
	540	+ borderWidth: 0,
	541	+ borderRadius: isMobile ? 16 : 24,
	542	+ maxBarThickness: isMobile ? 16 : 24,
	543	+ custom: function(context) {
	544	+ const label = labels[context.dataIndex];
	545	+ return label && label.id ? { id: label.id } : {};
	546	+ }
	547	+ };
	548	+
	549	+ const charBarOptions = {
	550	+ plugins: {
	551	+ tooltip: { enabled: false },
	552	+ legend: { display: false },
	553	+ annotation: {
	554	+ annotations: {
	555	+ avgLine: {
	556	+ ...chartStyleAvgLine,
	557	+ display: !!avg,
	558	+ yMin: avg \|\| 0,
	559	+ yMax: avg \|\| 0,
	560	+ }
	561	+ }
	562	+ }
	563	+ },
	564	+ maintainAspectRatio: false,
	565	+ animation: false,
	566	+ scales: {
	567	+ x: {
	568	+ ticks: { ...chartStyleLabelFont },
	569	+ grid: { display: false },
	570	+ },
	571	+ y: {
	572	+ beginAtZero: true,
	573	+ border: { dash: [2, 4] },
	574	+ ticks: {
	575	+ padding: isMobile ? 0 : 8,
	576	+ stepSize: 25,
	577	+ ...chartStyleLabelFont,
	578	+ callback: function(value) { return value + '%'; }
	579	+ },
	580	+ max: 100,
	581	+ min: 0,
	582	+ },
	583	+ },
	584	+ onClick: onClick ? (event, elements) => {
	585	+ onClick(event, elements, labels, data);
	586	+ } : null,
	587	+ };
	588	+
	589	+ new Chart(ctx, {
	590	+ type: 'bar',
	591	+ data: {
	592	+ labels: labels,
	593	+ datasets: [{ data: data, ...charBarStyle }],
	594	+ },
	595	+ plugins: [ChartDataLabels],
	596	+ options: charBarOptions,
	597	+ });
	598	+}
507	599
508	600	function createChartBarWidthauto(elementId, labels, data, onClick = null, avg = false) {
509	601	document.getElementById(elementId).classList.add('chart-bar-widthauto');
...	...	@@ -524,8 +616,8 @@
524	616	},
525	617	backgroundColor: function(context) {
526	618	return context.dataIndex % 2 === 0
527		- ? createGradient(context.chart.ctx, gradientColorPrimary)
528		- : createGradient(context.chart.ctx, gradientColorSecondary);
	619	+ ? createGradient(context.chart.ctx, gradientColorMint)
	620	+ : createGradient(context.chart.ctx, gradientColorSky);
529	621	},
530	622	borderWidth: 0,
531	623	borderRadius: isMobile ? 16 : 24,

Delete comment