cool-website#2 Fix building bugs and typos.

TODO: Make the video responsive accordingly.

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "amfe-flexible": "^2.2.1",
     "axios": "^0.19.0",
+    "babel-loader": "^8.1.0",
     "core-js": "^3.6.4",
     "element-ui": "^2.12.0",
     "postcss-px2rem": "^0.3.0",
@@ -73,4 +74,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

src/router/index.js

@@ -7,7 +7,7 @@ const routes = [
   {
     path: '/',
     name: 'dashboard',
-    component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashboard.vue'),
+    component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashBoard.vue'),
   },
 ];
 

src/views/dashBoard.vue

@@ -8,9 +8,9 @@
       <el-col>
         <el-row class="top-title">Cool: a COhort OnLine analytical processing system</el-row>
         <el-row class="sub-top-title">Cool is an online cohort analytical processing system that
-          supports various types of data analytics,including cubequery,
-          ice-berg query and cohort query.The objective of Cool is to
-          provide high performance (nearreal-time) analytical response
+          supports various types of data analytics, including cubequery,
+          ice-berg query and cohort query. The objective of Cool is to
+          provide high performance (near real-time) analytical response
           for emerging data warehouse domain.
         </el-row>
       </el-col>
@@ -31,13 +31,13 @@
           Similar to conventional databases, Cool organizes data records
           intables. Each table is maintained by a user-defined schema,
           consisting of multiple columns called fields or dimensions. A
-          dimension filere cording the hierarchy of several dimensions is
-          also given by the users in order to support cube queries.Each
+          dimension file recording the hierarchy of several dimensions is
+          also given by the users in order to support cube queries. Each
           dimension of the table is bound to a field type describing the
-          format of the values.The primitive types include varied-length
-          integer, float, string,boolean, time and event.The first four are
+          format of the values. The primitive types include varied-length
+          integer, float, string, boolean, time and event. The first four are
           similar to underlying database types while the remaining types
-          are specifically defined by Cool.Time deals with the timestamps
+          are specifically defined by Cool. Time deals with the timestamps
           of the records and event is a particular string representing user
           actions or behaviors. A dimension tree is constructed in systems
           etup guided by the dimension file and persisted in storage.
@@ -57,7 +57,7 @@
       </el-row>
     </el-container>
     <el-container class="box query-box">
-      <el-row class="query-title">Data Model & Query</el-row>
+      <el-row class="query-title">Data Model &amp; Query</el-row>
       <el-row class="query-desc">
         In Cool, all the queries are written in JSON format with a pre-defined syntax.
         Two types of queries are supported:
@@ -94,7 +94,8 @@
         cohort analysis and our systems:
       </el-row>
       <el-row class="img-content">
-        <img src="@/assets/images/demo.jpg" />
+        <!-- TODO: Make the following video box responsive. -->
+        <iframe class="video" src="https://www.youtube-nocookie.com/embed/r28_jBD9qKg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       </el-row>
     </el-container>
     <el-container class="box footer">
@@ -105,7 +106,8 @@
       <el-row></el-row>
       <el-row>
         © 2020 DBsystem &nbsp; &nbsp; &nbsp;
-        All rights reserved by the team from DBsystem, School of Computing, NUS
+        All rights reserved by the Cool Squad.
+        Members are from DBSystem Lab, NUS, Zhejiang University and MZH Tech.
       </el-row>
     </el-container>
   </el-container>
@@ -116,9 +118,9 @@ export default {
   data() {
     return {
       queryList: [
-        '(1) OLAP query. Cool can be treated as a conventional OLAP system dealing with cube queries.The system supports basic cube operations, including roll-up, drill-down, pivot and slice and dice,upon data cubes built atop the fields and the dimension tree. Cool can also provide responses for iceberg query, a prevailing type of query selecting a small number of records which satisfy some given conditions.',
-        '(2) Cohort Query. Cool cansupport an enhanced version of cohort queries.Traditional cohort query can only support aggregations on cohorts born with a single event along a fixed time window.However, Cool supports aggregations on cohorts born with a series of events, namely an event sequence, along either a fixed time window or an elastictime window delimited by givenevents. ',
-        'Cool supports composite query processing by runninga successive query atop the result of a precedentquery.  The type of the precedent query and the successive query can be any combination of the two aforementioned query types.For instance, a cohort generated in a precedent cohort query can act as a data source for either a successive OLAP query or a successive cohort query.Such composite query is sometimes called funnel analysis in the literature. In the implementation,based on the user-defined schema and the dimension tree, data cube and cohort are stored conceptually as the intermediate structures to support such query. The meaning of “conceptually”here isthat Cool materializes the matched records of the precedent query as well as the correspondingd imension structure int hestorage layer and aggregates the corresponding results in runtime,instead of storingt here sultant cohort or data cube tuplesdirectly. By default,such intermediate structure sexistina fixed period and the system can be configured toper sisthempermanently.',
+        '(1) OLAP query. Cool can be treated as a conventional OLAP system dealing with cube queries. The system supports basic cube operations, including roll-up, drill-down, pivot and slice and dice, upon data cubes built atop the fields and the dimension tree. Cool can also provide responses for iceberg query, a prevailing type of query selecting a small number of records which satisfy some given conditions.',
+        '(2) Cohort Query. Cool can support an enhanced version of cohort queries. Traditional cohort query can only support aggregations on cohorts born with a single event along a fixed time window. However, Cool supports aggregations on cohorts born with a series of events, namely an event sequence, along either a fixed time window or an elastic time window delimited by given events. ',
+        'Cool supports composite query processing by running a successive query atop the result of a precedentquery.  The type of the precedent query and the successive query can be any combination of the two aforementioned query types. For instance, a cohort generated in a precedent cohort query can act as a data source for either a successive OLAP query or a successive cohort query. Such composite query is sometimes called funnel analysis in the literature. In the implementation, based on the user-defined schema and the dimension tree, data cube and cohort are stored conceptually as the intermediate structures to support such query. The meaning of “conceptually” here is that Cool materializes the matched records of the precedent query as well as the corresponding dimension structure in the storage layer and aggregates the corresponding results in runtime, instead of storing the resultant cohort or data cube tuples directly. By default, such intermediate structures exist in a fixed period and the system can be configured to persist them permanently.',
       ],
     };
   },

vue.config.js

@@ -8,6 +8,7 @@ module.exports = {
   publicPath: './',
   outputDir: 'dist',
   devServer: {
+    // TODO: Change the comments to English.
     open: true, // 是否自动弹出浏览器页面
     https: false, // 是否使用https协议
     hotOnly: true, // 是否开启热更新