성준영 / klas-file-downloader

Go to a project
Toggle navigation Toggle navigation pinning
성준영
f1ec7203 1 parent b927e105

V1 데스크탑 앱

Inline Side-by-side
Showing 11 changed files with 351 additions and 39 deletions
...@@ -6,14 +6,13 @@ var client = require('electron-connect').client; ...@@ -6,14 +6,13 @@ var client = require('electron-connect').client;
6 // Keep a global reference of the window object, if you don't, the window will 6 // Keep a global reference of the window object, if you don't, the window will
7 // be closed automatically when the JavaScript object is garbage collected. 7 // be closed automatically when the JavaScript object is garbage collected.
8 let win 8 let win
9 - 9 +// client.create(win);
10 -client.create(win);
11 10
12 11
13 12
14 function createWindow () { 13 function createWindow () {
15 // Create the browser window. 14 // Create the browser window.
16 - win = new BrowserWindow({width: 900, height: 520}) 15 + win = new BrowserWindow({width: 900, height: 530,resizable: false})
17 16
18 // and load the index.html of the app. 17 // and load the index.html of the app.
19 win.loadURL(url.format({ 18 win.loadURL(url.format({
......
...@@ -9,5 +9,5 @@ gulp.task('default', function () { ...@@ -9,5 +9,5 @@ gulp.task('default', function () {
9 // Restart browser process 9 // Restart browser process
10 gulp.watch('app.js', electron.restart); 10 gulp.watch('app.js', electron.restart);
11 // Reload renderer process 11 // Reload renderer process
12 - gulp.watch(['index.html', 'style.css', 'logic.js'], electron.reload); 12 + gulp.watch(['index.html', 'style.css'], electron.reload);
13 }); 13 });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 <!-- style --> 24 <!-- style -->
25 <link rel="stylesheet" type="text/css" href="style.css"> 25 <link rel="stylesheet" type="text/css" href="style.css">
26 26
27 - <script>require('electron-connect').client.create()</script> 27 + <!--<script>require('electron-connect').client.create()</script>-->
28 <script>if (window.module) module = window.module;</script> 28 <script>if (window.module) module = window.module;</script>
29 </head> 29 </head>
30 <body> 30 <body>
...@@ -46,28 +46,42 @@ ...@@ -46,28 +46,42 @@
46 문의 : 경희대학교 컴공 12 성준영 ( wnsdud1861@gmail.com ) 46 문의 : 경희대학교 컴공 12 성준영 ( wnsdud1861@gmail.com )
47 </div> 47 </div>
48 </div> 48 </div>
49 -
50 <div class="loginForm"> 49 <div class="loginForm">
51 <div class="input-field col s6 id"> 50 <div class="input-field col s6 id">
52 - <input placeholder="2012104095" id="id" type="text" class="validat id"> 51 + <input onKeydown="if (event.keyCode ===13) $('#loginBtn').click()" placeholder="2012104095" id="id" type="text" class="validat inputLogin">
53 <label for="pw">경희대학교 학번</label> 52 <label for="pw">경희대학교 학번</label>
54 </div> 53 </div>
55 <div class="input-field col s6 pw"> 54 <div class="input-field col s6 pw">
56 - <input placeholder="KLAS 비밀번호" id="pw" type="password" class="validat id"> 55 + <input onKeydown="if (event.keyCode ===13) $('#loginBtn').click()" placeholder="KLAS 비밀번호" id="pw" type="password" class="validat inputLogin">
57 <label for="pw">KLAS 비밀번호</label> 56 <label for="pw">KLAS 비밀번호</label>
58 </div> 57 </div>
59 <div class="loginBtnWrapper"> 58 <div class="loginBtnWrapper">
60 - <button id="loginBtn" class="waves-effect waves-light btn #424242 grey darken-3">다운받으러 가기</button> 59 + <button id="loginBtn" class="waves-effect waves-light btn #424242 grey darken-3">다운받으러 가기 (기본 자동로그인)</button>
61 </div> 60 </div>
62 </div> 61 </div>
63 62
64 -<div class="listWrapper"> 63 +<div class="listWrapper" hidden="hidden">
65 <div class="lectureListWrapper"> 64 <div class="lectureListWrapper">
66 - 65 + <div class="listDesc">자료를 다운로드할 강의를 선택하세요:)</div>
66 + <div class="collection lectureCollection">
67 + </div>
67 </div> 68 </div>
68 <div class="fileListWrapper"> 69 <div class="fileListWrapper">
69 - 70 + <div class="listDesc">챕터선택 (클릭시 ~/Downloads 폴더에 저장됩니다.)</div>
71 + <div class="collection chapterCollection">
72 + <div class="selectChapter">강의를 선택하세요!</div>
73 + </div>
70 </div> 74 </div>
75 + <a class="btn-floating btn-large waves-effect waves-light grey darken-3 downloadAll">전체다운</a>
76 +</div>
77 +
78 +<div class="loadingLayer" hidden="hidden">
79 + <div id="loading"></div>
80 + <div id="loadingText"><br/>잠시만 기다려주세요!</div>
81 +</div>
82 +
83 +<div id="logout" hidden="hidden">
84 + < 로그아웃
71 </div> 85 </div>
72 86
73 87
......
...@@ -31,4 +31,24 @@ exports.isValidIdPw = function(id, pw, cb){ ...@@ -31,4 +31,24 @@ exports.isValidIdPw = function(id, pw, cb){
31 .catch(function(){ 31 .catch(function(){
32 cb(false); 32 cb(false);
33 }) 33 })
34 +};
35 +
36 +exports.downloadSelectedFiles = function(selectedChapter, selectedLecture, cb){
37 + functions.downloadSelectedFiles(selectedChapter, selectedLecture,null)
38 + .then(function(res){
39 + cb(res);
40 + })
41 + .catch(function(err){
42 + cb(err);
43 + })
44 +};
45 +
46 +exports.downloadAllFiles = function(selectedFilesArr, selectedLecture, cb){
47 + functions.downloadAllFiles(selectedFilesArr, selectedLecture,null)
48 + .then(function(res){
49 + cb(res);
50 + })
51 + .catch(function(err){
52 + cb(err);
53 + })
34 }; 54 };
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -6,36 +6,66 @@ ...@@ -6,36 +6,66 @@
6 let klasFD = require('./klasFD/module'); 6 let klasFD = require('./klasFD/module');
7 7
8 let userLectures = []; 8 let userLectures = [];
9 +let lectureFiles = [];
10 +let selectedLecture = '';
9 $(document).ready(function () { 11 $(document).ready(function () {
10 // 앱 시작하면 로그인 바로 체크 12 // 앱 시작하면 로그인 바로 체크
11 - // checkLoginState(function(isValid){ 13 + disableAll('로그인 상태를 체크중입니다...');
12 - // if(isValid){ 14 + if (localStorage.getItem('id')) {
13 - // swal({ 15 + checkLoginState(function (isValid) {
14 - // title: "로그인 되었습니다!", 16 + ableAll();
15 - // type: "success", 17 + if (isValid) {
16 - // confirmButtonText: "OK", 18 + swal({
17 - // confirmButtonColor: "#424242", 19 + title: "로그인 되었습니다!",
18 - // }); 20 + type: "success",
19 - // $('.loginForm').hide(); 21 + confirmButtonText: "OK",
20 - // } else { 22 + confirmButtonColor: "#424242",
21 - // // 로그인 실패 23 + });
22 - // swal({ 24 + // 로그인되면 강의정보 가져오고 레이아웃 업데이트
23 - // title: "로그인에 실패했습니다!", 25 + const id = localStorage.getItem('id');
24 - // text: "다시 로그인해주세요!", 26 + const pw = localStorage.getItem('pw');
25 - // type: "error", 27 + klasFD.getLectureList(id, pw, function (res) {
26 - // confirmButtonText: "OK", 28 + if (res.code) {
27 - // confirmButtonColor: "#424242", 29 + swal({
28 - // }); 30 + title: "강의정보를 가져오는데 실패했습니다!",
29 - // } 31 + text: res.message,
30 - // }); 32 + type: "error",
33 + confirmButtonText: "OK",
34 + confirmButtonColor: "#424242",
35 + });
36 + } else {
37 + userLectures = res;
38 + renderLectureList();
39 + updateLayoutInLogin();
40 + }
41 + });
42 +
43 +
44 + } else {
45 + // 로그인 실패
46 + swal({
47 + title: "로그인에 실패했습니다!",
48 + text: "다시 로그인해주세요!",
49 + type: "error",
50 + confirmButtonText: "OK",
51 + confirmButtonColor: "#424242",
52 + });
53 + }
54 + });
55 + } else {
56 + ableAll();
57 + }
31 58
32 $('#loginBtn').click(function () { 59 $('#loginBtn').click(function () {
33 let id = $('#id').val(); 60 let id = $('#id').val();
34 let pw = $('#pw').val(); 61 let pw = $('#pw').val();
35 62
63 + disableAll('로그인 중입니다...');
36 klasFD.getLectureList(id, pw, function (res) { 64 klasFD.getLectureList(id, pw, function (res) {
65 +
37 console.log(res); 66 console.log(res);
38 if (res.code) { 67 if (res.code) {
68 + ableAll();
39 // 로그인 실패 69 // 로그인 실패
40 swal({ 70 swal({
41 title: "로그인에 실패했습니다!", 71 title: "로그인에 실패했습니다!",
...@@ -44,25 +74,175 @@ $(document).ready(function () { ...@@ -44,25 +74,175 @@ $(document).ready(function () {
44 confirmButtonText: "OK", 74 confirmButtonText: "OK",
45 confirmButtonColor: "#424242", 75 confirmButtonColor: "#424242",
46 }); 76 });
47 -
48 - return;
49 } else { 77 } else {
50 // 로그인 성공 78 // 로그인 성공
51 localStorage.setItem('id', id); 79 localStorage.setItem('id', id);
52 localStorage.setItem('pw', pw); 80 localStorage.setItem('pw', pw);
53 81
54 - console.log('LOGIN SUCCESS'); 82 + // 강의정보 가져오기
55 - console.log(localStorage); 83 + disableAll('강의정보를 가져오고 있습니다...');
56 - userLectures = res; 84 + klasFD.getLectureList(id, pw, function (res) {
85 + ableAll();
86 + if (res.code) {
87 + swal({
88 + title: "강의정보를 가져오는데 실패했습니다!",
89 + text: res.message,
90 + type: "error",
91 + confirmButtonText: "OK",
92 + confirmButtonColor: "#424242",
93 + });
94 + } else {
95 + swal({
96 + title: "로그인 되었습니다!",
97 + type: "success",
98 + confirmButtonText: "OK",
99 + confirmButtonColor: "#424242",
100 + });
101 + userLectures = res;
102 + renderLectureList();
103 + updateLayoutInLogin();
104 + }
105 + });
57 } 106 }
107 + });
108 + });
58 109
110 + // 강의 선택
111 + $(document).on('click', '.my-lecture', function () {
112 + let $a = $(this);
113 + $('.my-lecture').removeClass('collection-item active white-text grey darken-3 my-lecture')
114 + .addClass('collection-item grey-text text-darken-3 my-lecture');
115 + $a.attr('class', 'collection-item active white-text grey darken-3 my-lecture')
59 116
60 - }); 117 + const lectureIndex = $a.attr('href').substr(1);
61 - }) 118 + selectedLecture = userLectures[lectureIndex].lectureName;
119 + renderChapterList(userLectures[lectureIndex]);
120 + });
121 +
122 + // 챕터 다운로드
123 + $(document).on('click', '.lecture-chapter', function () {
124 + let $a = $(this);
125 + const chapterIndex = $a.attr('href').substr(1);
126 + disableAll('강의자료를 다운로드하고 있습니다..');
127 + klasFD.downloadSelectedFiles(lectureFiles[chapterIndex], selectedLecture, function (res) {
128 + ableAll();
129 + swal({
130 + title: '다운로드 완료',
131 + text: res,
132 + type: "success",
133 + confirmButtonText: "OK",
134 + confirmButtonColor: "#424242",
135 + });
136 + })
137 + });
62 138
139 + // 강의 전체다운
140 + $('.downloadAll').click(function () {
141 + if (userLectures.length === 0) {
142 + // 강의를 선택해주세요
143 + swal({
144 + title: "에러!",
145 + text: "강의를 선택해주세요!",
146 + type: "error",
147 + confirmButtonText: "OK",
148 + confirmButtonColor: "#424242",
149 + });
150 + } else if (lectureFiles.length === 0) {
151 + // 다운할수 있는 파일이 없어요
152 + swal({
153 + title: "에러!",
154 + text: "다운할 수 있는 파일이 없어요!",
155 + type: "error",
156 + confirmButtonText: "OK",
157 + confirmButtonColor: "#424242",
158 + });
159 + } else {
160 + // 로딩 시작, 선택 가능한 모든 것들 disabled
161 + disableAll('전체 강의를 다운로드 중입니다. \n 잠시만 기다려주세요...');
162 + klasFD.downloadAllFiles(lectureFiles, selectedLecture, function (res) {
163 + ableAll();
164 + swal({
165 + title: '다운로드 완료',
166 + text: res,
167 + type: "success",
168 + confirmButtonText: "OK",
169 + confirmButtonColor: "#424242",
170 + });
171 + })
172 + }
173 + });
63 174
175 + $('#logout').click(function () {
176 + localStorage.clear();
177 + updateLayoutInLogout();
178 + });
179 +
180 + // 로그인 상태 확인
64 function checkLoginState(cb) { 181 function checkLoginState(cb) {
65 klasFD.isValidIdPw(localStorage.getItem('id'), localStorage.getItem('pw'), cb); 182 klasFD.isValidIdPw(localStorage.getItem('id'), localStorage.getItem('pw'), cb);
66 } 183 }
67 184
185 + // 사용자의 강의 리스트 렌더
186 + function renderLectureList() {
187 + console.log(userLectures);
188 + for (let i in userLectures) {
189 + $('.lectureCollection')
190 + .append('<a href="#' + i + '" class="collection-item grey-text text-darken-3 my-lecture">'
191 + + userLectures[i].lectureName + '</a>')
192 + }
193 + }
194 +
195 + // 선택한 강의의 챕터 렌더
196 + function renderChapterList(lectureObj) {
197 + console.log(lectureObj);
198 + klasFD.getLectureFileLinks(lectureObj, function (fileList) {
199 + lectureFiles = fileList;
200 + console.log(fileList);
201 + $('.chapterCollection').empty();
202 + if (fileList.length === 0) {
203 + $('.chapterCollection')
204 + .append('<div class="noChapter">해당 강의에서 다운받을 수 있는 자료가 없어요!</div>')
205 + }
206 + for (let i in fileList) {
207 + $('.chapterCollection')
208 + .append('<a href="#' + i + '" class="collection-item grey-text text-darken-3 lecture-chapter">'
209 + + fileList[i].chapter + '</a>')
210 + }
211 + })
212 + }
213 +
214 + // 로그인 시 레이아웃 변경
215 + function updateLayoutInLogin() {
216 + $('.loginForm').hide();
217 + $('.desc').hide();
218 + $('.me').attr('style', 'top: 175px;');
219 + $('.layer').attr('style', 'height: 205px;');
220 + $('.imageWrapper').attr('style', 'height: 205px;');
221 + $('.listWrapper').show();
222 + $('#logout').show();
223 + }
224 +
225 + // 로그인 시 레이아웃 변경
226 + function updateLayoutInLogout() {
227 + $('.loginForm').show();
228 + $('.desc').show();
229 + $('.me').attr('style', 'top: 260px;');
230 + $('.layer').attr('style', 'height: 300px;');
231 + $('.imageWrapper').attr('style', 'height: 300px;');
232 + $('.listWrapper').hide();
233 + $('#logout').hide();
234 + $('#id').text('');
235 + $('#pw').text('');
236 + }
237 +
238 + function disableAll(text) {
239 + $('#loadingText').text(text);
240 + $('#loadingText').html($('#loadingText').html().replace(/\n/g, '<br/>'));
241 + $('.loadingLayer').show();
242 + }
243 +
244 + function ableAll() {
245 + $('.loadingLayer').hide();
246 + }
247 +
68 }); 248 });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 "gulp": "^3.9.1" 8 "gulp": "^3.9.1"
9 }, 9 },
10 "dependencies": { 10 "dependencies": {
11 + "electron-connect": "^0.6.1",
11 "klas-file-downloader": "^0.2.7", 12 "klas-file-downloader": "^0.2.7",
12 "sweetalert": "^1.1.3" 13 "sweetalert": "^1.1.3"
13 } 14 }
......
No preview for this file type
...@@ -80,6 +80,7 @@ body { ...@@ -80,6 +80,7 @@ body {
80 .input-field input[type=text]:focus + label, .input-field input[type=password]:focus + label { 80 .input-field input[type=text]:focus + label, .input-field input[type=password]:focus + label {
81 color: #424242; 81 color: #424242;
82 } 82 }
83 +
83 /* label underline focus color */ 84 /* label underline focus color */
84 .input-field input[type=text]:focus, .input-field input[type=password]:focus { 85 .input-field input[type=text]:focus, .input-field input[type=password]:focus {
85 border-bottom: 1px solid #424242; 86 border-bottom: 1px solid #424242;
...@@ -89,3 +90,100 @@ body { ...@@ -89,3 +90,100 @@ body {
89 #loginBtn { 90 #loginBtn {
90 width: 100%; 91 width: 100%;
91 } 92 }
93 +
94 +.listWrapper {
95 + width: 100%;
96 + height: auto;
97 + padding: 1% 1% 0 1%;
98 +}
99 +
100 +.listDesc {
101 + font-family: BMDOHYEON;
102 + padding: 2% 0 0 4%;
103 +}
104 +
105 +.lectureListWrapper, .fileListWrapper {
106 + display: inline-block;
107 + width: 49.6%;
108 +}
109 +
110 +.lecture {
111 + color: #424242;
112 +}
113 +
114 +.collection {
115 + height: 230px;
116 + overflow-y: scroll;
117 +}
118 +
119 +.noChapter, .selectChapter {
120 + margin-top: 100px;
121 + text-align: center;
122 + font-family: BMDOHYEON;
123 + font-size: 16px;
124 + color: #424242;
125 +}
126 +
127 +.downloadAll {
128 + position: fixed;
129 + right: 25px;
130 + bottom: 40px;
131 +}
132 +
133 +.loadingLayer {
134 + width: 100%;
135 + height: 100%;
136 + background-color: black;
137 + position: fixed;
138 + top: 0;
139 + left: 0;
140 + opacity: 0.9;
141 + z-index:999;
142 +}
143 +
144 +
145 +#loading {
146 + position: fixed;
147 + left: 50%;
148 + top: 50%;
149 + margin-left: -30px;
150 + margin-top: -60px;
151 + display: inline-block;
152 + width: 50px;
153 + height: 50px;
154 + border: 3px solid rgba(255,255,255,.3);
155 + border-radius: 50%;
156 + border-top-color: #fff;
157 + animation: spin 1s ease-in-out infinite;
158 + -webkit-animation: spin 1s ease-in-out infinite;
159 +}
160 +
161 +#loadingText {
162 + position: fixed;
163 + font-size: 20px;
164 + left: 50%;
165 + width: 400px;
166 + margin-left: -200px;
167 + text-align: center;
168 + top: 55%;
169 + font-family: BMDOHYEON;
170 + color: white;
171 +}
172 +
173 +#logout {
174 + position: fixed;
175 + font-size: 18px;
176 + left: 20px;
177 + top: 20px;
178 + cursor: pointer;
179 + font-family: BMDOHYEON;
180 + width: 200px;
181 + color: white;
182 +}
183 +
184 +@keyframes spin {
185 + to { -webkit-transform: rotate(360deg); }
186 +}
187 +@-webkit-keyframes spin {
188 + to { -webkit-transform: rotate(360deg); }
189 +}
...\ No newline at end of file ...\ No newline at end of file
......