성준영

V1 데스크탑 앱

......@@ -6,14 +6,13 @@ var client = require('electron-connect').client;
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
client.create(win);
// client.create(win);
function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 900, height: 520})
win = new BrowserWindow({width: 900, height: 530,resizable: false})
// and load the index.html of the app.
win.loadURL(url.format({
......
......@@ -9,5 +9,5 @@ gulp.task('default', function () {
// Restart browser process
gulp.watch('app.js', electron.restart);
// Reload renderer process
gulp.watch(['index.html', 'style.css', 'logic.js'], electron.reload);
gulp.watch(['index.html', 'style.css'], electron.reload);
});
\ No newline at end of file
......
......@@ -24,7 +24,7 @@
<!-- style -->
<link rel="stylesheet" type="text/css" href="style.css">
<script>require('electron-connect').client.create()</script>
<!--<script>require('electron-connect').client.create()</script>-->
<script>if (window.module) module = window.module;</script>
</head>
<body>
......@@ -46,28 +46,42 @@
문의 : 경희대학교 컴공 12 성준영 ( wnsdud1861@gmail.com )
</div>
</div>
<div class="loginForm">
<div class="input-field col s6 id">
<input placeholder="2012104095" id="id" type="text" class="validat id">
<input onKeydown="if (event.keyCode ===13) $('#loginBtn').click()" placeholder="2012104095" id="id" type="text" class="validat inputLogin">
<label for="pw">경희대학교 학번</label>
</div>
<div class="input-field col s6 pw">
<input placeholder="KLAS 비밀번호" id="pw" type="password" class="validat id">
<input onKeydown="if (event.keyCode ===13) $('#loginBtn').click()" placeholder="KLAS 비밀번호" id="pw" type="password" class="validat inputLogin">
<label for="pw">KLAS 비밀번호</label>
</div>
<div class="loginBtnWrapper">
<button id="loginBtn" class="waves-effect waves-light btn #424242 grey darken-3">다운받으러 가기</button>
<button id="loginBtn" class="waves-effect waves-light btn #424242 grey darken-3">다운받으러 가기 (기본 자동로그인)</button>
</div>
</div>
<div class="listWrapper">
<div class="listWrapper" hidden="hidden">
<div class="lectureListWrapper">
<div class="listDesc">자료를 다운로드할 강의를 선택하세요:)</div>
<div class="collection lectureCollection">
</div>
</div>
<div class="fileListWrapper">
<div class="listDesc">챕터선택 (클릭시 ~/Downloads 폴더에 저장됩니다.)</div>
<div class="collection chapterCollection">
<div class="selectChapter">강의를 선택하세요!</div>
</div>
</div>
<a class="btn-floating btn-large waves-effect waves-light grey darken-3 downloadAll">전체다운</a>
</div>
<div class="loadingLayer" hidden="hidden">
<div id="loading"></div>
<div id="loadingText"><br/>잠시만 기다려주세요!</div>
</div>
<div id="logout" hidden="hidden">
< 로그아웃
</div>
......
......@@ -31,4 +31,24 @@ exports.isValidIdPw = function(id, pw, cb){
.catch(function(){
cb(false);
})
};
exports.downloadSelectedFiles = function(selectedChapter, selectedLecture, cb){
functions.downloadSelectedFiles(selectedChapter, selectedLecture,null)
.then(function(res){
cb(res);
})
.catch(function(err){
cb(err);
})
};
exports.downloadAllFiles = function(selectedFilesArr, selectedLecture, cb){
functions.downloadAllFiles(selectedFilesArr, selectedLecture,null)
.then(function(res){
cb(res);
})
.catch(function(err){
cb(err);
})
};
\ No newline at end of file
......
......@@ -6,36 +6,66 @@
let klasFD = require('./klasFD/module');
let userLectures = [];
let lectureFiles = [];
let selectedLecture = '';
$(document).ready(function () {
// 앱 시작하면 로그인 바로 체크
// checkLoginState(function(isValid){
// if(isValid){
// swal({
// title: "로그인 되었습니다!",
// type: "success",
// confirmButtonText: "OK",
// confirmButtonColor: "#424242",
// });
// $('.loginForm').hide();
// } else {
// // 로그인 실패
// swal({
// title: "로그인에 실패했습니다!",
// text: "다시 로그인해주세요!",
// type: "error",
// confirmButtonText: "OK",
// confirmButtonColor: "#424242",
// });
// }
// });
disableAll('로그인 상태를 체크중입니다...');
if (localStorage.getItem('id')) {
checkLoginState(function (isValid) {
ableAll();
if (isValid) {
swal({
title: "로그인 되었습니다!",
type: "success",
confirmButtonText: "OK",
confirmButtonColor: "#424242",
});
// 로그인되면 강의정보 가져오고 레이아웃 업데이트
const id = localStorage.getItem('id');
const pw = localStorage.getItem('pw');
klasFD.getLectureList(id, pw, function (res) {
if (res.code) {
swal({
title: "강의정보를 가져오는데 실패했습니다!",
text: res.message,
type: "error",
confirmButtonText: "OK",
confirmButtonColor: "#424242",
});
} else {
userLectures = res;
renderLectureList();
updateLayoutInLogin();
}
});
} else {
// 로그인 실패
swal({
title: "로그인에 실패했습니다!",
text: "다시 로그인해주세요!",
type: "error",
confirmButtonText: "OK",
confirmButtonColor: "#424242",
});
}
});
} else {
ableAll();
}
$('#loginBtn').click(function () {
let id = $('#id').val();
let pw = $('#pw').val();
disableAll('로그인 중입니다...');
klasFD.getLectureList(id, pw, function (res) {
console.log(res);
if (res.code) {
ableAll();
// 로그인 실패
swal({
title: "로그인에 실패했습니다!",
......@@ -44,25 +74,175 @@ $(document).ready(function () {
confirmButtonText: "OK",
confirmButtonColor: "#424242",
});
return;
} else {
// 로그인 성공
localStorage.setItem('id', id);
localStorage.setItem('pw', pw);
console.log('LOGIN SUCCESS');
console.log(localStorage);
userLectures = res;
// 강의정보 가져오기
disableAll('강의정보를 가져오고 있습니다...');
klasFD.getLectureList(id, pw, function (res) {
ableAll();
if (res.code) {
swal({
title: "강의정보를 가져오는데 실패했습니다!",
text: res.message,
type: "error",
confirmButtonText: "OK",
confirmButtonColor: "#424242",
});
} else {
swal({
title: "로그인 되었습니다!",
type: "success",
confirmButtonText: "OK",
confirmButtonColor: "#424242",
});
userLectures = res;
renderLectureList();
updateLayoutInLogin();
}
});
}
});
});
// 강의 선택
$(document).on('click', '.my-lecture', function () {
let $a = $(this);
$('.my-lecture').removeClass('collection-item active white-text grey darken-3 my-lecture')
.addClass('collection-item grey-text text-darken-3 my-lecture');
$a.attr('class', 'collection-item active white-text grey darken-3 my-lecture')
});
})
const lectureIndex = $a.attr('href').substr(1);
selectedLecture = userLectures[lectureIndex].lectureName;
renderChapterList(userLectures[lectureIndex]);
});
// 챕터 다운로드
$(document).on('click', '.lecture-chapter', function () {
let $a = $(this);
const chapterIndex = $a.attr('href').substr(1);
disableAll('강의자료를 다운로드하고 있습니다..');
klasFD.downloadSelectedFiles(lectureFiles[chapterIndex], selectedLecture, function (res) {
ableAll();
swal({
title: '다운로드 완료',
text: res,
type: "success",
confirmButtonText: "OK",
confirmButtonColor: "#424242",
});
})
});
// 강의 전체다운
$('.downloadAll').click(function () {
if (userLectures.length === 0) {
// 강의를 선택해주세요
swal({
title: "에러!",
text: "강의를 선택해주세요!",
type: "error",
confirmButtonText: "OK",
confirmButtonColor: "#424242",
});
} else if (lectureFiles.length === 0) {
// 다운할수 있는 파일이 없어요
swal({
title: "에러!",
text: "다운할 수 있는 파일이 없어요!",
type: "error",
confirmButtonText: "OK",
confirmButtonColor: "#424242",
});
} else {
// 로딩 시작, 선택 가능한 모든 것들 disabled
disableAll('전체 강의를 다운로드 중입니다. \n 잠시만 기다려주세요...');
klasFD.downloadAllFiles(lectureFiles, selectedLecture, function (res) {
ableAll();
swal({
title: '다운로드 완료',
text: res,
type: "success",
confirmButtonText: "OK",
confirmButtonColor: "#424242",
});
})
}
});
$('#logout').click(function () {
localStorage.clear();
updateLayoutInLogout();
});
// 로그인 상태 확인
function checkLoginState(cb) {
klasFD.isValidIdPw(localStorage.getItem('id'), localStorage.getItem('pw'), cb);
}
// 사용자의 강의 리스트 렌더
function renderLectureList() {
console.log(userLectures);
for (let i in userLectures) {
$('.lectureCollection')
.append('<a href="#' + i + '" class="collection-item grey-text text-darken-3 my-lecture">'
+ userLectures[i].lectureName + '</a>')
}
}
// 선택한 강의의 챕터 렌더
function renderChapterList(lectureObj) {
console.log(lectureObj);
klasFD.getLectureFileLinks(lectureObj, function (fileList) {
lectureFiles = fileList;
console.log(fileList);
$('.chapterCollection').empty();
if (fileList.length === 0) {
$('.chapterCollection')
.append('<div class="noChapter">해당 강의에서 다운받을 수 있는 자료가 없어요!</div>')
}
for (let i in fileList) {
$('.chapterCollection')
.append('<a href="#' + i + '" class="collection-item grey-text text-darken-3 lecture-chapter">'
+ fileList[i].chapter + '</a>')
}
})
}
// 로그인 시 레이아웃 변경
function updateLayoutInLogin() {
$('.loginForm').hide();
$('.desc').hide();
$('.me').attr('style', 'top: 175px;');
$('.layer').attr('style', 'height: 205px;');
$('.imageWrapper').attr('style', 'height: 205px;');
$('.listWrapper').show();
$('#logout').show();
}
// 로그인 시 레이아웃 변경
function updateLayoutInLogout() {
$('.loginForm').show();
$('.desc').show();
$('.me').attr('style', 'top: 260px;');
$('.layer').attr('style', 'height: 300px;');
$('.imageWrapper').attr('style', 'height: 300px;');
$('.listWrapper').hide();
$('#logout').hide();
$('#id').text('');
$('#pw').text('');
}
function disableAll(text) {
$('#loadingText').text(text);
$('#loadingText').html($('#loadingText').html().replace(/\n/g, '<br/>'));
$('.loadingLayer').show();
}
function ableAll() {
$('.loadingLayer').hide();
}
});
\ No newline at end of file
......
......@@ -8,6 +8,7 @@
"gulp": "^3.9.1"
},
"dependencies": {
"electron-connect": "^0.6.1",
"klas-file-downloader": "^0.2.7",
"sweetalert": "^1.1.3"
}
......
No preview for this file type
......@@ -80,6 +80,7 @@ body {
.input-field input[type=text]:focus + label, .input-field input[type=password]:focus + label {
color: #424242;
}
/* label underline focus color */
.input-field input[type=text]:focus, .input-field input[type=password]:focus {
border-bottom: 1px solid #424242;
......@@ -89,3 +90,100 @@ body {
#loginBtn {
width: 100%;
}
.listWrapper {
width: 100%;
height: auto;
padding: 1% 1% 0 1%;
}
.listDesc {
font-family: BMDOHYEON;
padding: 2% 0 0 4%;
}
.lectureListWrapper, .fileListWrapper {
display: inline-block;
width: 49.6%;
}
.lecture {
color: #424242;
}
.collection {
height: 230px;
overflow-y: scroll;
}
.noChapter, .selectChapter {
margin-top: 100px;
text-align: center;
font-family: BMDOHYEON;
font-size: 16px;
color: #424242;
}
.downloadAll {
position: fixed;
right: 25px;
bottom: 40px;
}
.loadingLayer {
width: 100%;
height: 100%;
background-color: black;
position: fixed;
top: 0;
left: 0;
opacity: 0.9;
z-index:999;
}
#loading {
position: fixed;
left: 50%;
top: 50%;
margin-left: -30px;
margin-top: -60px;
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
#loadingText {
position: fixed;
font-size: 20px;
left: 50%;
width: 400px;
margin-left: -200px;
text-align: center;
top: 55%;
font-family: BMDOHYEON;
color: white;
}
#logout {
position: fixed;
font-size: 18px;
left: 20px;
top: 20px;
cursor: pointer;
font-family: BMDOHYEON;
width: 200px;
color: white;
}
@keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
\ No newline at end of file
......