Add view and stylesheets #43

wafflestudio · Oct 22, 2018 · b3f30ce · b3f30ce
1 parent ea7efc7
commit b3f30ce
Show file tree

Hide file tree

Showing 12 changed files with 1,815 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "ejs": "~2.6.1",
     "express": "~4.16.3",
     "express-promise-router": "^3.0.3",
+    "express-react-views": "^0.10.5",
     "immutable": "~3.8.2",
     "js-yaml": "~3.11.0",
     "jsonwebtoken": "~5.5.0",
@@ -48,6 +49,9 @@
     "mongoose": "~5.0.0",
     "morgan": "~1.9.0",
     "nightmare": "^3.0.1",
+    "node-sass": "^4.9.4",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
     "redis": "^2.8.0",
     "request": "^2.74.0",
     "request-promise-native": "~1.0.5",

diff --git a/resources/src/api/stylesheets/Timetable.scss b/resources/src/api/stylesheets/Timetable.scss
@@ -0,0 +1,161 @@
+@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
+
+.timetable {
+  padding: 0px;
+  border-top-width: 0;
+  table-layout: fixed;
+  background-color: #ffffff;
+  color: rgba(0, 0, 0, 0.4) !important;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-size: 14px;
+
+  td {
+    width: 100px;
+    height:20px;
+    position: relative;
+  }
+
+  .label-date {
+    border: none;
+    text-align: center;
+    font-weight: normal;
+    height: 40px;
+  }
+
+  .label-hour {
+    border: none;
+    width: 45px;
+    text-align: right;
+    padding: 0 7px 0 0;
+  }
+
+  tbody tr:nth-child(odd) .td-body {
+    border-top: 1px solid #ebeef2;
+  }
+
+  tbody tr:last-child .td-body {
+    border-bottom: 1px solid #ebeef2;
+  }
+
+  tbody tr:nth-child(even) .td-body {
+    border-top: 1px solid rgba(235, 238, 242, 0.3); //ebeef2 * 0.3 opacity
+  }
+
+  .td-body {
+    height: 20px;
+    border: none;
+  }
+
+  .blank-right {
+    width: 15px;
+    border: none !important
+  }
+
+  .dragged {
+    background-color: red
+  }
+
+  .course-div {
+    background-color: pink;
+    height:100%;
+    position: absolute; top: -1px; left: 0px;
+    width:100%;
+    border-radius: 0px;
+    z-index: 1;
+    padding: 0 2px;
+    text-align: center;
+    .title-box {
+      position: relative;
+      transform: translateY(-50%);
+      top: 50%;
+      font-size: 0.7em;
+      line-height: 1em;
+    }
+    .title-box p {
+      margin-bottom: 3px;
+    }
+
+    .tool-box-wrapper {
+        visibility: hidden;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        font-size: 20px;
+        background-color: rgba(0, 0, 0, 0.65);
+    }
+    .tool-box {
+      position: relative;
+      transform: translateY(-50%);
+      top: 50%;
+      span { margin: 0 5px; }
+    }
+    &.hovered .tool-box-wrapper {
+      visibility: visible;
+    }
+  }
+
+  .preview {
+    background-color: #D7DEE0 !important;
+    color: gray !important;
+    z-index: 2;
+    opacity: 0.5;
+  }
+
+  .table-info {
+    position: relative;
+    font-size: 13px;
+  }
+
+  .add-button {
+    float: left;
+    border-radius: 17px;
+    height: 34px;
+    opacity: 0.8;
+    border: 1px solid #b7c3ce;
+  }
+
+  .credit {
+    float: right;
+    font-size: 13px;
+  }
+}
+#timetable-container {
+  background-color: #ffffff;
+  margin-bottom: 40px;
+}
+.table-info {
+
+  padding: 0px 15px 15px 15px;
+  overflow: hidden;
+  vertical-align: middle;
+
+  .add-button {
+    margin-left: 30px;
+    border-radius: 500px;
+    border: solid 1px #d5dbe0;
+    padding: 7px 17px;
+    font-size: 13px;
+    float: left;
+    cursor: pointer;
+  }
+
+  .credit {
+    float: right;
+    padding: 7px 0px;
+    font-size: 13px;
+  }
+}
+
+.timetable {
+  margin-bottom: 15px;
+}
+
+.timetable * {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* IE/Edge */
+}
diff --git a/resources/src/api/stylesheets/index.scss b/resources/src/api/stylesheets/index.scss
@@ -0,0 +1 @@
+@import "Timetable.scss"
diff --git a/resources/src/api/views/FullscreenTimetable.jsx b/resources/src/api/views/FullscreenTimetable.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Timetable from './timetable/Timetable.jsx';
+
+const FullscreenTimetable = ({ timetable }) => {
+    return (
+        <html>
+        <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, user-scalable=no" />
+            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
+                crossorigin="anonymous" />
+            <link rel="stylesheet" href="" />
+        </head>
+
+        <body>
+            <Timetable
+                courses={timetable.lecture_list}
+            />
+        </body>
+        </html>
+    );
+  };
+
+export default FullscreenTimetable;
diff --git a/resources/src/api/views/timetable/LectureBox.jsx b/resources/src/api/views/timetable/LectureBox.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const DEFAULT_COLOR = { fg: '#1579C2', bg: '#94E6FE' };
+
+const LectureBox = ({ length, course, classroom }) => {
+    if (!course.color) { course.color = DEFAULT_COLOR; }
+    const divStyle = {
+      height: `${length * 20}px`,
+      color: course.color.fg,
+      backgroundColor: course.color.bg,
+    };
+    return (
+      <div
+        className={`course-div`}
+        style={divStyle}
+      >
+        <div className="title-box">
+          <p>{course.course_title}</p>
+          <p><strong>{classroom}</strong></p>
+        </div>
+      </div>
+     );
+  };
+
+export default LectureBox;
diff --git a/resources/src/api/views/timetable/TableBody.jsx b/resources/src/api/views/timetable/TableBody.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const TableBody = ({ lectureBoxes, hasSunday }) => {
+  const rows = [];
+  const numDay = hasSunday ? 7 : 6;
+  const numRows = lectureBoxes[0].length;
+  for (let t = 0; t < numRows; t += 1) { // rows
+    const cols = [];
+    if (t % 2 === 0) {
+      const hrIdx = t / 2;
+      cols.push(<td className="label-hour" rowSpan="2" key={-1}>{hrIdx + 8}</td>);
+    }
+    for (let d = 0; d < numDay; d += 1) { // columns
+      cols.push((
+        <td className="td-body" key={`${d}{t}`}>
+          {lectureBoxes[d][t]}
+        </td>
+      ));
+    }
+    rows.push(<tr key={t}>{cols}</tr>);
+  }
+  return (<tbody>{rows}</tbody>);
+};
+
+export default TableBody;
diff --git a/resources/src/api/views/timetable/TableHeader.jsx b/resources/src/api/views/timetable/TableHeader.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const TableHeader = ({ hasSunday }) => {
+  const days = ['월', '화', '수', '목', '금', '토'];
+  if (hasSunday) days.push('일');
+  return (
+    <thead>
+      <tr>
+        <th className="label-hour" />
+        {days.map(v => (<th className="label-date" key={v}>{v}</th>))}
+        <th className="label-date blank-right" />
+      </tr>
+    </thead>
+  );
+};
+
+export default TableHeader;
diff --git a/resources/src/api/views/timetable/Timetable.jsx b/resources/src/api/views/timetable/Timetable.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import LectureBox from './LectureBox.jsx';
+import TableHeader from './TableHeader.jsx';
+import TableBody from './TableBody.jsx';
+
+const NUM_SLOTS = 32;
+const NUM_DAY = 7;
+
+const Timetable = ({ courses }) => {
+  const lectureBoxes = new Array(NUM_DAY).fill(0).map(() => new Array(NUM_SLOTS));
+  for (const course of courses) {
+    for (const lecture of course.class_time_json) {
+      const day = lecture.day;
+      lectureBoxes[day][lecture.start * 2] = (
+        <LectureBox
+          course={course}
+          length={lecture.len * 2}
+          classroom={lecture.place}
+        />
+      );
+    }
+  }
+
+  let hasSunday = lectureBoxes[6].filter(v => Boolean(v)).length > 0;
+
+  return (
+    <div id="container-fluid">
+      <table className="table timetable">
+        <TableHeader hasSunday={hasSunday} />
+        <TableBody
+          hasSunday={hasSunday}
+          lectureBoxes={lectureBoxes}
+        />
+      </table>
+    </div>
+  );
+};
+
+export default Timetable;
diff --git a/src/api/config/express.ts b/src/api/config/express.ts
@@ -16,7 +16,9 @@ var app = express();
 
 // view engine setup
 app.set('views', path.join(__dirname, '..', 'views'));
-//app.set('view engine', 'jade');
+
+app.set('view engine', 'jsx')
+app.engine('.jsx', require('express-react-views').createEngine());
 app.engine('.html', require('ejs').renderFile);
 
 // X-Forwarded-For 헤더를 신뢰할 주소. 앞단에 nginx 프록시를 둘 경우 필요함. localhost만을 활성화한다

diff --git a/src/api/routes/TimetableRouter.ts b/src/api/routes/TimetableRouter.ts
@@ -52,6 +52,18 @@ restGet(router, '/:id')(async function(context, req) {
   return result;
 });
 
+router.get('/:id/html', async function(req, res, next) {
+  let context: RequestContext = req['context'];
+  let user:User = context.user;
+
+  let table = await TimetableService.getByMongooseId(user._id, req.params.id);
+  if (!table) {
+    throw new ApiError(404, ErrorCode.TIMETABLE_NOT_FOUND, "timetable not found");
+  }
+
+  res.render('FullscreenTimetable.jsx', { timetable: table });
+});
+
 router.get('/:id/image', async function(req, res, next) {
   let context: RequestContext = req['context'];
   let user:User = context.user;

diff --git a/src/core/nightmare/NightmareService.ts b/src/core/nightmare/NightmareService.ts
@@ -10,6 +10,9 @@ let nm = Nightmare({
 let nmLock = new AsyncLock({maxPending : 100, timeout: 5000});
 const NM_LOCK_KEY = "NightmareServiceLock";
 
+/**
+ * 하나의 Nightmare 객체를 공유하므로 lock을 사용해야 한다.
+ */
 function execute<T>(f: (Nightmare) => Promise<T>): Promise<T> {
     return nmLock.acquire(NM_LOCK_KEY, function() {
         return f(nm);