Live Code 현황페이지 작업
#
패널사업부 요청으로 현황페이지 개발이 가끔 생깁니다.
(특정 문항 or 동일한 프로젝트 2개를 현황페이지 하나로 보고 싶을 때 등…)
그럴때마다 live code로 개발을 하게 되는데 현황표를 일일이 하나하나 개발하고 있는 분들이 계셔서
간단하게 현황페이지를 만들 수 있는 방법을 알려드리겠습니다.
복사 해야할 폴더
route/get/168
route/post/168
샘플로 만들어둔 168프로젝트를 기준으로 get, post 폴더를 그대로 복사합니다.
index.ejs
<!DOCTYPE html>
<html>
<head>
<%-include('../../header') %>
</head>
<body>
<div class="main-container">
<!-- 메인 헤드 -->
<div class="main-head">
<!-- 로고 -->
<div class="main-logo"></div>
</div>
<div class="pure-g page-contents">
<div class="pure-u-1-1">
<!-- quota-container 안에 쿼터표를 생성함 -->
<div class="quota-container">
</div>
</div>
</div>
</div>
</body>
<script>
//해당 프로젝트 Snum을 가져옴
const projectId = '<%=data.projectId%>';
$(function(){
init();
function init(){
getQuotaData();
}
//Ajax 함수로 쿼터에 필요한 QUESTION, ANSWER 데이터를 가져옴
function getQuotaData(){
const sendData = {
projectId: projectId,
}
Ajax('/static/'+projectId+'/getQuota',sendData, createQuota);
}
//쿼터를 만들어주는 함수
function createQuota(data){
const { title, answer, question , quota, config } = data;
//제목
$('div.main-logo').html(title);
//할당별 처리
A = answer;
//문항을 오브젝트로 만들기
question.forEach(function(q){
Q[q.NAME]=q;
});
/**
* * 단일 문항들만 가능합니다.
* 커스텀 테이블 그리는 함수 위에 A, Q 오브젝트는 필수로 있어야 합니다.
* column은 문자열
* , ( 콤마 ) 기준으로 표현할 테이블 구분
* | 기준으로는 문항 표시 ex -> 행1|열1|행2|열2
* ex) https://static.pmirnc.io/static/168/index?column=SQ1|SQ2_R
*/
if(gets.column) MakeCustomTables(gets.column);
/**
* quota 페이지에 등록되어 있는 쿼터표 그대로 그려주기
*/
for(let i = 0 ; i < quota.length ; i++){
//할당표 만들기
MakeTable(quota[i]);
}
}
});
</script>
</html>
index.js
module.exports = async({ req, res, next, mongo, projectId }) => {
try {
// 프로젝트가 존재하는지 확인 및 projectId 가져오기
const questions = await mongo.db('getData').collection('QUESTION').findOne({ _id: +projectId });
if(questions === null || questions === undefined) throw new Error('존재하지 않는 설문입니다.');
return {
projectId,
result: true,
};
} catch (e) {
return {
error: e
}
}
}
post/getQuota.js
module.exports = async({ req, res, next, mongo }) => {
try {
const { body } = req;
const { projectId, column } = body;
const answerFind = {
SNUM: +projectId,
COMPLETE: 'COMPLETE',
}
const answerProject = {
_id : 0,
UID: 1,
QUOTA: 1,
DATA: 1,
}
//응답 데이터
const answer = await mongo.db('getData').collection('ANSWER').find(answerFind, {projection:answerProject}).toArray();
//해당 프로젝트 정보
const questions = await mongo.db('getData').collection('QUESTION').findOne({ _id: +projectId });
if(questions == null || questions == undefined){
return {
result: false,
message: '존재하지 않는 설문입니다.',
};
}
const { DATA, TITLE, CONFIG } = questions;
const quota = DATA.filter( data => data.TYPE === 'QUOTA');
return {
result: true,
answer,
title: TITLE,
question: DATA,
quota,
config: CONFIG,
};
} catch (e) {
return {
result: false,
message: e.message,
}
}
}
힘들게 현황페이지를 하나하나 만들지 마시고, 위와 같이 만들어주면 간단하고 빠른 시간에 현황페이지 작업이 가능합니다.