Giter VIP home page Giter VIP logo

hyu-lms-helper's Introduction

Gunmo Ku (a.k.a. Rn, thak, Morgan)

Profile

Hits

  • Gunmo Ku (a.k.a. Rn, thak, Morgan)
  • Hanyang University, Department of Computer Sofrware Engineering
  • more info

Blog

Online Judge

I’m currently learning

  • Algorithms
  • Backend (With Golang)
  • Cloud (With AWS)
  • Infrastructure (With Docker, Kubernetes)

Cards

streak

Top Langs

thak00's solvedac profile

hyu-lms-helper's People

Contributors

1cekrim avatar angpangman avatar jihoo0201 avatar thak1411 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

ingyu1008 1cekrim

hyu-lms-helper's Issues

새로고침 할 때에도 페이지 유지

현재 구현에서는 헬퍼를 켜 놓고 새로고침을 하면, 원래 페이지로 이동됨
헬퍼 페이지에서 새로고침을 했을 때, 헬퍼 페이지에 그대로 머물게 하는 것이 좀 더 직관적일 것 같음

출결/학습 현황과 다르게 출력되는 문제

다름

출석/결석/- 구분

원본 표에서는 '출석', '결석', '출결 대상 아님', '-' 이렇게 4가지로 나뉘지만, main 브랜치의 구현에서는 아래와 같이 '출석'과 '출결 대상 아님'으로만 구분함
즉 출석/결석/- 이 출석 하나로 표현된다는 의미인데, 이 셋을 구분할 필요가 있어 보임

(component.use_attendance ? '출석' : '출결 대상 아님'),

주차/차시가 잘못 합쳐짐

현재 구현에서는 아래와 같이 과목/주차/차시를 html 기준으로 병합하고 있음

$.fn.setRowspan = function(num) {
var mergeItem = "";
var mergeCount = 0;
var mergeRowNum = 0;
$('tr').each(function(row) {
if(row > 0 ){
var item = $(':eq(' + num +')',$(this)).html();
if (mergeItem != item ) {
mergeCount = 1;
mergeItem = item;
mergeRowNum = row;
} else {
mergeCount = mergeCount + 1;
$("tr:eq("+mergeRowNum+") > td:eq("+num+")").attr("rowspan",mergeCount);
if ($('td:eq('+5+')',$(this)).css('background-color') == 'rgb(255, 204, 203)') {
$("tr:eq("+mergeRowNum+") > td:eq("+num+")").css('background-color', LIGHTRED);
}
$('td:eq('+num+')',$(this)).hide();
}
}
})
}
$(tbody).setRowspan(0);
$(tbody).setRowspan(1);
$(tbody).setRowspan(2);

이 때 각 td 태그에는 아래와 같이, 과목명/주차명/차시명이 textContent에 들어감

var cell = document.createElement('td');
if (items[5] == '완료') cell.style.backgroundColor = LIGHTGREEN;
else if (items[5] == '-') cell.style.backgroundColor = LIGHTRED;
cell.textContent = item;
line.appendChild(cell);

서로 다른 강의/주차/차시 더라도 그 이름은 같을 수 있기 때문에, 실제로는 다른 강의/주차/차시 이지만 표가 병합되는 현상이 발생 (맨 위 이미지 참고)

이를 해결하기 위해 각 과목/주차/차시의 고유한 id (course_id, section_id, unit_id)를 td 태그의 attribute로 추가할 필요가 있음

[질문] 기능 추가

@thak1411
안녕하세요 한양대 컴소 학생입니다.
출결 관련 기능은 아니지만 lms 익스텐션으로 넣을만한 아이디어가 있어서요!
lms 캘린더에 뜨는 일정을 구글 캘린더에 연동해서 lms에 뭔가가 추가되거나 사용자가 추가하면, 연결한 계정의 구글 캘린더 일정에도 함께 추가하는 기능이 있으면 어떨까하는데 제가 개발해서 PR을 넣어도 될까요?
익스텐션 본래 취지와 맞지 않다고 생각하시면 개인적으로 레포 파서 만드려고 합니다.

HELPER를 사용하지 않을 때에도 getCourse가 계속 호출되는 문제

var main = function () {
getCourse();
addButtton();
};
main();

현재 구현에서는 위와 같이 매번 getCourse를 호출한 이후에 addButtton를 호출함
이런 구조면 HELPER를 사용하지 않을 때에도, 버튼이 추가될 때마다 서버로 리퀘스트를 보내니 비효율적임

버튼을 클릭했을 때만 서버에 리퀘스트를 보내도록 해야 함

if (window.rn_Loading) {
setTimeout(function () {
drawTable();
}, 500);
return;
}

또한 위와 같이 drawTable 함수에서 getCourse가 끝났는지를 유사 재귀를 이용해 체크하고 있음

아마 콜백이 많아져 복잡해지는 것 때문에 위와 같이 구현해 놓으신 것 같은데, async-await으로 잘 짜면 위에 언급한 문제들 해결하면서 코드도 더 깔끔해질 수 있을 듯 합니다

async-await으로 바꾸는 김에 jquery ajax를 fetch로 바꿔도 괜찮을 것 같음 (어차피 한양대 lms는 ie에서 사용 불가능하니 fetch 써도 됨)

표 디자인 개선

과목명 길이

과목명이 너무 길어서 가독성이 떨어짐
과목명은 (과목코드)_(과목명) 이런 포맷으로 되어 있는데, 과목명만 출력되게 해도 괜찮을 것 같음

표 너비 달라지는 문제

HELPER 버튼을 클릭하기 전에 어느 메뉴에 있었느냐에 따라 표 너비가 달라짐
대시보드, 과목, 계정: 오른쪽에 여백이 있음
캘린더, 메시지함: 꽉 참

원인은 다음과 같음
대시보드, 과목, 계정의 경우 main 태그 밖의 #wrapper (.ic-Layout-wrapper) 에
max-width: 1366px;
라는 스타일이 적용되어 있음. 그래서 오른쪽에 여백이 생김
해당 스타일을 제거하는 코드를 추가해야 함

표 컨텐츠가 여러 줄로 표시되는 문제

셀 너비는 컨텐츠 길이에 따라 자동으로 맞춰짐
그런데 주차/차시/강의명이 길면 그거에 우선적으로 맞추느라 학습현황이나 출결현황이 여러 줄로 출력되는 문제가 발생
이런 경우를 방지하기 위해 각 컬럼별로 글자수 제한을 둬야 함

예:
1차시 / Lesson-1 : [온라인강의] 후치형 소유 형용사와 소유 대명사
->
1차시 / Lesson-1...

{i}주차 / Unit-{j}
{i}차시 / Lesson-{j} : 부제
이런 형식으로 주차와 차시가 출력되고 있는데, 이거 파싱해서 : 전까지만 출력되게 해도 좋을 것 같음

마우스 올려 놓으면, 글자 전체가 마우스 아래에 말풍선으로 뜨게 구현하면 괜찮을 것 같음

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.