You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@iotdb.apache.org by do...@apache.org on 2019/01/25 16:24:08 UTC
[incubator-iotdb-website] branch master updated: New release for
iotdb-website (#9)
This is an automated email from the ASF dual-hosted git repository.
dope pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-iotdb-website.git
The following commit(s) were added to refs/heads/master by this push:
new 2300f7b New release for iotdb-website (#9)
2300f7b is described below
commit 2300f7b0c4cb20cb2c4743207847fb84568549bd
Author: XuYi <My...@users.noreply.github.com>
AuthorDate: Sat Jan 26 00:24:03 2019 +0800
New release for iotdb-website (#9)
* add rest of pages
* adaptive to mobile side
---
.travis.yml | 17 +
build/webpack.base.conf.js | 4 +
deploy.sh | 6 +
package.json | 6 +
src/App.vue | 40 ++
.../fonts/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2 | Bin 0 -> 2832 bytes
src/assets/fonts/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2 | Bin 0 -> 14076 bytes
src/assets/fonts/S6uyw4BMUTPHjx4wXiWtFCc.woff2 | Bin 0 -> 13944 bytes
src/assets/fonts/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2 | Bin 0 -> 2824 bytes
src/assets/img/arrow.png | Bin 0 -> 88 bytes
src/assets/img/tools.jpg | Bin 360273 -> 347602 bytes
src/components/Footer.vue | 25 --
src/components/FooterFixed.vue | 41 +-
src/components/Global.vue | 59 +++
src/components/NavBar.vue | 239 +++++-----
src/components/SideBar.vue | 124 +++---
src/main.js | 2 +
src/router/index.js | 75 +++-
src/views/Community.vue | 98 ++++-
src/views/Development.vue | 83 +++-
src/views/Documents.vue | 466 +++++++++++++++-----
src/views/Download.vue | 92 +++-
src/views/Example.vue | 82 ++++
src/views/Home.vue | 392 +++++++++--------
src/views/LatestDoc.vue | 98 +++++
src/views/Materials.vue | 58 +++
src/views/NotFound.vue | 31 ++
src/views/SingleMaterial.vue | 97 +++++
src/views/SingleTool.vue | 109 +++++
src/views/Tools.vue | 482 +++++++++------------
30 files changed, 1907 insertions(+), 819 deletions(-)
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..f907c73
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,17 @@
+language: node_js
+
+dist: trusty
+
+node_js:
+ - "11"
+ - "10"
+ - "9"
+ - "8"
+
+cache: npm
+
+install:
+ - npm install
+
+script:
+ - npm run test
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index c4ccfea..e3025bc 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -65,6 +65,10 @@ module.exports = {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
+ },
+ {
+ test: /\.md$/,
+ loaders: 'text-loader'
}
]
},
diff --git a/deploy.sh b/deploy.sh
new file mode 100644
index 0000000..452a498
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,6 @@
+#!/bin/sh
+
+nvm use v9.11.2
+git pull
+npm install
+npm run build
diff --git a/package.json b/package.json
index da88f73..8c891d0 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,13 @@
"deploy": "node build/deploy.js"
},
"dependencies": {
+ "axios": "^0.18.0",
+ "cheerio": "^1.0.0-rc.2",
"popper.js": "^1.14.6",
+ "text-loader": "0.0.1",
+ "unit": "^1.0.4",
"vue": "^2.5.2",
+ "vue-markdown": "^2.2.4",
"vue-router": "^3.0.1"
},
"devDependencies": {
@@ -67,6 +72,7 @@
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
+ "vue-md-loader": "^1.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
diff --git a/src/App.vue b/src/App.vue
index b1ae8dd..9afff26 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,10 +16,50 @@
</script>
<style>
+ /* latin-ext */
+ @font-face {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Lato Regular'), local('Lato-Regular'), url(./assets/fonts/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+ }
+ /* latin */
+ @font-face {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Lato Regular'), local('Lato-Regular'), url(./assets/fonts/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+ }
+ /* latin-ext */
+ @font-face {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Lato Bold'), local('Lato-Bold'), url(/assets/fonts/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+ }
+ /* latin */
+ @font-face {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Lato Bold'), local('Lato-Bold'), url(/assets/fonts/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+ }
#app {
color: #2c3e50;
}
+ html {
+ position: relative;
+ min-height: 100%;
+ }
body{
font-family: 'Lato', sans-serif;
}
+ ::-webkit-scrollbar{
+ width: 0px;
+ background: transparent;
+ }
</style>
diff --git a/src/assets/fonts/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2 b/src/assets/fonts/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2
new file mode 100644
index 0000000..4f778f9
Binary files /dev/null and b/src/assets/fonts/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2 differ
diff --git a/src/assets/fonts/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2 b/src/assets/fonts/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2
new file mode 100644
index 0000000..e9d0b3f
Binary files /dev/null and b/src/assets/fonts/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2 differ
diff --git a/src/assets/fonts/S6uyw4BMUTPHjx4wXiWtFCc.woff2 b/src/assets/fonts/S6uyw4BMUTPHjx4wXiWtFCc.woff2
new file mode 100644
index 0000000..597b855
Binary files /dev/null and b/src/assets/fonts/S6uyw4BMUTPHjx4wXiWtFCc.woff2 differ
diff --git a/src/assets/fonts/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2 b/src/assets/fonts/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2
new file mode 100644
index 0000000..c5f3b20
Binary files /dev/null and b/src/assets/fonts/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2 differ
diff --git a/src/assets/img/arrow.png b/src/assets/img/arrow.png
new file mode 100644
index 0000000..0477c27
Binary files /dev/null and b/src/assets/img/arrow.png differ
diff --git a/src/assets/img/tools.jpg b/src/assets/img/tools.jpg
index efef195..ff5f18f 100644
Binary files a/src/assets/img/tools.jpg and b/src/assets/img/tools.jpg differ
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
deleted file mode 100644
index e7d7c33..0000000
--- a/src/components/Footer.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
- <div class="footer">
- <div class="container">
- <p>Copyright © 2018 The Apache Software Foundation. Apache and the Apache feather logo are trademarks of The
- Apache Software Foundation.</p>
- </div>
- </div>
-</template>
-
-<script>
- export default {
- name: "Footer"
- }
-</script>
-
-<style scoped>
-.footer{
- height:50px;
- padding:10px 0;
- margin-top: 30px;
- text-align:center;
- color:#fff;
- background:#222222;
-}
-</style>
diff --git a/src/components/FooterFixed.vue b/src/components/FooterFixed.vue
index 12f6df4..fd2859e 100644
--- a/src/components/FooterFixed.vue
+++ b/src/components/FooterFixed.vue
@@ -1,9 +1,9 @@
<template>
- <div class="footer navbar-fixed-bottom">
- <div class="container">
- <p>Copyright © 2018 The Apache Software Foundation. Apache and the Apache feather logo are trademarks of The Apache Software Foundation.</p>
- </div>
+ <footer class="footer">
+ <div class="container">
+ <span>Copyright © 2018 The Apache Software Foundation. Apache and the Apache feather logo are trademarks of The Apache Software Foundation.</span>
</div>
+ </footer>
</template>
<script>
@@ -13,12 +13,35 @@
</script>
<style>
-.footer{
- height:50px;
- padding:10px 0;
- margin-top: 30px;
+ .footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ padding-top: 10px;
+ padding-bottom: 10px;
text-align:center;
color:#fff;
background:#222222;
-}
+ }
+ @media (min-width: 992px){
+ body {
+ margin-bottom: 40px; /* Margin bottom by footer height */
+ }
+ }
+ @media (min-width: 499px){
+ body {
+ margin-bottom: 60px; /* Margin bottom by footer height */
+ }
+ }
+ @media (min-width: 355px){
+ body {
+ margin-bottom: 80px; /* Margin bottom by footer height */
+ }
+ }
+
+ @media (min-width: 200px){
+ body {
+ margin-bottom: 120px; /* Margin bottom by footer height */
+ }
+ }
</style>
diff --git a/src/components/Global.vue b/src/components/Global.vue
new file mode 100644
index 0000000..ecc4314
--- /dev/null
+++ b/src/components/Global.vue
@@ -0,0 +1,59 @@
+<script>
+ const downloadIotdbCli='https://github.com/apache/incubator-iotdb';
+ const downloadGrafanaConnector='https://github.com/apache/incubator-iotdb';
+ const downloadHadoopConnector='https://github.com/apache/incubator-iotdb';
+ const downloadSparkConnector='https://github.com/apache/incubator-iotdb';
+
+ const cheerio = require('cheerio');
+ const DOC_URL_PREFIX = "https://raw.githubusercontent.com/apache/incubator-iotdb/";
+ const LATEST_VERSION = "0.7.0";
+ const LATEST_STR = "latest";
+ const SUPPORT_VERSION = {
+ "latest": {
+ "branch": "doc",
+ "doc-prefix": DOC_URL_PREFIX,
+ 'version': "V0.7.0",
+ 'chapters': [
+ '1-Overview.md',
+ '2-Concept.md',
+ '3-Operation%20Manual.md',
+ '4-Deployment%20and%20Management.md',
+ '5-SQL%20Documentation.md',
+ '6-JDBC%20Documentation.md'
+ ]
+ },
+ "0.7.0": {
+ "branch": "doc",
+ "doc-prefix": DOC_URL_PREFIX,
+ 'version': "V0.7.0",
+ 'chapters': [
+ '1-Overview.md',
+ '2-Concept.md',
+ '3-Operation%20Manual.md',
+ '4-Deployment%20and%20Management.md',
+ '5-SQL%20Documentation.md',
+ '6-JDBC%20Documentation.md'
+ ]
+ }
+ };
+
+ function isReadyForPrerender(html){
+ const $ = cheerio.load(html);
+ $('ul a').each( function(i, elem) {
+ $(this).attr('href', window.location.href+$(this).attr('href'));
+ });
+ return $('body').html();
+ };
+
+ export default
+ {
+ downloadIotdbCli,
+ downloadGrafanaConnector,
+ downloadHadoopConnector,
+ downloadSparkConnector,
+ LATEST_VERSION,
+ SUPPORT_VERSION,
+ LATEST_STR,
+ isReadyForPrerender
+ }
+</script>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index a427896..7c81c42 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,111 +1,114 @@
<template>
<div class="header">
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
- <div class="container-fluid">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">IoTDB</a>
- </div>
+ <nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: rgb(34,34,34); min-height:50px" role="navigation">
+ <div class="container">
+ <!-- Brand and toggle get grouped for better mobile display -->
+ <div class="navbar-header">
+ <a class="navbar-brand" href="#/">IoTDB</a>
+ </div>
- <!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- <li class="nav-item">
- <router-link to="/" class="nav-link"><span>Home</span></router-link>
- </li>
- <li class="nav-item">
- <router-link to="/Download" class="nav-link"><span>Download</span></router-link>
- </li>
- <li class="dropdown" >
- <router-link to="/Documents" class="dropdown-toggle" data-toggle="dropdown" role="button"
- aria-haspopup="true" aria-expanded="false"><span>Documents<b class="caret"></b></span></router-link>
- <ul class="dropdown-menu">
- <li v-for="item in Documents">
- <router-link :to=item.url class="nav-link"><span>{{item.content}}</span></router-link>
- </li>
- </ul>
- </li>
- <li class="dropdown">
- <router-link to="/Tools" class="dropdown-toggle" data-toggle="dropdown" role="button"
- aria-haspopup="true" aria-expanded="false"><span>Tools<b class="caret"></b></span></router-link>
- <ul class="dropdown-menu">
- <li v-for="item in Tools">
- <router-link :to=item.url class="nav-link"><span>{{item.content}}</span></router-link>
- </li>
- </ul>
- </li>
- <li class="dropdown">
- <router-link to="/Community" class="dropdown-toggle" data-toggle="dropdown" role="button"
- aria-haspopup="true" aria-expanded="false"><span>Community<b class="caret"></b></span></router-link>
- <ul class="dropdown-menu">
- <li v-for="item in Community">
- <router-link :to=item.url class="nav-link"><span>{{item.content}}</span></router-link>
- </li>
- </ul>
- </li>
- <li class="dropdown">
- <router-link to="/Development" class="dropdown-toggle" data-toggle="dropdown" role="button"
- aria-haspopup="true" aria-expanded="false"><span>Development<b class="caret"></b></span></router-link>
- <ul class="dropdown-menu">
- <li v-for="item in Development">
- <router-link :to=item.url class="nav-link"><span>{{item.content}}</span></router-link>
- </li>
- </ul>
- </li>
- </ul>
- <ul class="nav navbar-nav navbar-right">
- <li class="nav-item">
- <a href="https://www.apache.org/" class="nav-link"><span style="color: orange">Apache Software Foundation</span></a>
- </li>
- </ul>
- </div><!-- /.navbar-collapse -->
- </div><!-- /.container-fluid -->
- </nav>
- </div>
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+ <ul class="nav navbar-nav">
+ <li class="nav-item" id="home-page">
+ <router-link to="/" class="nav-link"><span>Home</span></router-link>
+ </li>
+ <li class="nav-item">
+ <router-link to="/Download" class="nav-link"><span>Download</span></router-link>
+ </li>
+ <li class="dropdown">
+ <router-link to="/Documents/Quick%20Start" class="dropdown-toggle" data-toggle="dropdown" role="button"
+ aria-haspopup="true" aria-expanded="false"><span>Documents<b class="caret"></b></span>
+ </router-link>
+ <ul class="dropdown-menu">
+ <li v-for="item in Documents">
+ <router-link :to=item.url class="nav-link"><span>{{item.content}}</span></router-link>
+ </li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <router-link to="/Tools" class="dropdown-toggle" data-toggle="dropdown" role="button"
+ aria-haspopup="true" aria-expanded="false"><span>Tools<b class="caret"></b></span>
+ </router-link>
+ <ul class="dropdown-menu">
+ <li v-for="item in Tools">
+ <router-link :to=item.url class="nav-link"><span>{{item.content}}</span></router-link>
+ </li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <router-link to="/Community/Project%20Committers" class="dropdown-toggle" data-toggle="dropdown" role="button"
+ aria-haspopup="true" aria-expanded="false"><span>Community<b class="caret"></b></span>
+ </router-link>
+ <ul class="dropdown-menu">
+ <li v-for="item in Community">
+ <router-link :to=item.url class="nav-link"><span>{{item.content}}</span></router-link>
+ </li>
+ </ul>
+ </li>
+ <li class="nav-item">
+ <router-link to="/Development" class="nav-link"><span>Development</span></router-link>
+ </li>
+ <li class="nav-item">
+ <router-link to="/Example" class="nav-link"><span>Example</span></router-link>
+ </li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ <li class="nav-item">
+ <a href="https://www.apache.org/" class="nav-link"><span
+ style="color: orange">Apache Software Foundation</span></a>
+ </li>
+ </ul>
+ </div><!-- /.navbar-collapse -->
+ </div><!-- /.container-fluid -->
+ </nav>
+ </div>
</template>
<script>
+ jQuery(document).ready(function () {
+ jQuery(".nav-item").click(function () {
+ jQuery('.navbar-nav').find('li.active').removeClass('active');
+ jQuery('.dropdown').removeClass('active');
+ $(this).addClass( 'active' );
+ });
+ jQuery(".dropdown").click(function () {
+ jQuery('.navbar-nav').find('li.active').removeClass('active');
+ jQuery('.dropdown').removeClass('active');
+ $(this).addClass( 'active' );
+ });
+ jQuery(".dropdown-menu > li").click(function () {
+ jQuery('.navbar-nav').find('li.active').removeClass('active');
+ jQuery('.dropdown').removeClass( 'active' );
+ $(this).parent("ul").parent("li").addClass( 'active' );
+ });
+ jQuery(".navbar-brand").click(function () {
+ jQuery('.navbar-nav').find('li.active').removeClass('active');
+ jQuery('.dropdown').removeClass('active');
+ document.getElementById('home-page').classList.add('active');
+ });
+ });
export default {
name: "NavBar",
data() {
return {
- "Documents":[
- {"url": "/Comming", "content": "Latest Release"},
- {"url": "/Comming", "content": "Older Versions and Other resources"},
- {"url": "/Comming", "content": "Frequently Asked Questions"}
- ],
- "Tools":[
- {"url": "/Comming", "content": "Cli"},
- {"url": "/Comming", "content": "Grafana"},
- {"url": "/Comming", "content": "Hadoop"},
- {"url": "/Comming", "content": "Spark"}
+ "Documents": [
+ {"url": "/Documents/Quick Start", "content": "Quick Start"},
+ {"url": "/Documents/latest/sec1", "content": "User Guide"},
+ {"url": "/Materials", "content": "Other Materials"},
+ {"url": "/Documents/Frequently asked questions", "content": "Frequently asked questions"}
],
"Community": [
- {"url": "/Comming", "content": "Mailing Lists & Resources"},
- {"url": "/Comming", "content": "Contributing to IoTDB"},
- {"url": "/Comming", "content": "Issue Tracker"},
- {"url": "/Comming", "content": "Powered By"},
- {"url": "/Comming", "content": "Project Committers"},
- {"url": "/Comming", "content": "Project History"}
+ {"url": "/Community/Powered By", "content": "Powered By"},
+ {"url": "/Community/Project Committers", "content": "Project Committers"},
+ {"url": "/Community/History & Vision", "content": "History & Vision"}
+ ],
+ "Tools": [
+ {"url": "/Tools/Cli", "content": "IoTDB-Cli"},
+ {"url": "/Tools/Grafana", "content": "Grafana Connector"},
+ {"url": "/Tools/Hadoop", "content": "Hadoop Connector"},
+ {"url": "/Tools/Spark", "content": "Spark Connector"}
],
- "Development":[
- {"url": "/Comming", "content": "Useful Developer Tools"},
- {"url": "/Comming", "content": "Versioning Policy"}
- ]
-// "Apache" : [
-// {"url": "https://www.apache.org/", "content": "Apache Homepage"},
-// {"url": "https://www.apache.org/licenses", "content": "Licenses"},
-// {"url": "https://www.apache.org/foundation/sponsorship.html", "content": "Sponsorship"},
-// {"url": "https://www.apache.org/foundation/thanks.html", "content": "Thanks"},
-// {"url": "https://www.apache.org/security/", "content": "Security"}
-// ]
-
}
},
}
@@ -117,46 +120,42 @@
display: block;
}
- .navbar-nav>li > a > span{
+ .navbar-nav > li > a > span {
color: white;
font-size: 1.6rem;
}
- .navbar-nav>li > a > span:hover{
+
+ .navbar-nav > li > a > span:hover {
color: orange;
}
- .container-fluid{
- margin-left: 15%;
- margin-right: 10%;
- }
- @media (min-width: 0px) {
- .header{
- margin-bottom: 55px;
- }
+
+ #bs-example-navbar-collapse-1 .navbar-nav >.active>a {
+ background-color: rgb(100,100,100);
}
- @media (min-width: 750px) {
- .header{
- margin-bottom: 200px;
+ @media (min-width: 200px) {
+ .header {
+ margin-bottom: 90px;
}
}
- @media (min-width: 890px) {
- .header{
- margin-bottom: 150px;
+
+ @media (min-width: 768px) {
+ .header {
+ margin-bottom: 190px;
}
}
- @media (min-width: 1018px) {
- .header{
- margin-bottom: 100px;
+ @media (min-width: 992px) {
+ .header {
+ margin-bottom: 140px;
}
}
- @media (min-width: 1330px) {
- .header{
- margin-bottom: 55px;
+
+ @media (min-width: 1200px) {
+ .header {
+ margin-bottom: 90px;
}
}
- /*.header{*/
- /*margin-bottom: 55px;*/
- /*}*/
+
</style>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index cf01e24..8337256 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -1,71 +1,93 @@
<template>
- <div class="col-md-4 col-md-3 col-sm-6 fixed-side">
- <div class="sidebar thumbnail" style="background:#f8f8f8;padding: 10px 10px;">
- <div class="sidebar-module">
- <h4>Latest News</h4>
- <ol class="list-unstyled">
- <!--<li lang="en">-->
- <!--1. New version of Apache IoTDB (incubating) is released in June, 2018.-->
- <!--This version released 4 new features in Apache IoTDB (incubating) Engine and released-->
- <!--a Apache IoTDB (incubating)-Transfer-Tool for transfer files back from edge to data center.-->
- <!--Also, it contains 6 bug fixes, improvements and enhancements since 0.6.0.-->
- <!--</li>-->
- <li lang="en">
- 1. After the Apache version is released, users are encouraged to read the overview of major changes in <router-link to="/Documents">release notes</router-link>,
- download the version in <router-link to="/Download">download page</router-link>
- and view documents in <router-link to="/Documents">documentation page</router-link>.
- </li>
- <li lang="en">
- 2. Currently, we support an unofficial version on <a href="https://github.com/thulab/iotdb/releases">GitHub</a>.
- </li>
- </ol>
- </div>
- <div class="sidebar-module">
- <h4>Github repo</h4>
- <ol class="list-unstyled">
- <li><a href="https://github.com/thulab/iotdb">GitHub</a></li>
- </ol>
- </div>
- </div>
- <button type="button" class="btn btn-warning" style="font-size: 2rem">Download</button>
- <button type="button" class="btn btn-default" style="margin-top: 15px;border-color: #fcac45;background: white;font-size: 2rem">Quick Start</button>
+ <div class="col-sm-3 blog-sidebar">
+ <div class="sidebar-module sidebar-module-inset">
+ <h4>Latest News</h4>
+ <article lang="en">
+ <ol class="list-unstyled">
+ <li>
+ 1. After the Apache version is released, users are encouraged to read the overview of major changes in <router-link to="/Materials/Release%20Notes">release notes</router-link>,
+ download the version in <router-link to="/Download">download page</router-link>
+ and view documents in <router-link to="/Documents/Quick%20Start">documentation page</router-link>.
+ </li>
+ <li>
+ 2. Currently, we support an unofficial version on <a href="https://github.com/thulab/iotdb/releases">GitHub</a>.
+ </li>
+ </ol>
+ </article>
+
+ <h4>Github repo</h4>
+ <ol class="list-unstyled">
+ <li><a href="https://github.com/apache/incubator-iotdb">GitHub</a></li>
+ </ol>
</div>
+ <router-link to="/Download" class="nav-link btn btn-lg btn-block btn-warning button" style="color: white">
+ <span>Download</span>
+ </router-link>
+ <router-link to="/Documents/Quick%20Start" class="nav-link btn btn-white btn-lg btn-block button"><span>Quick Start</span></router-link>
+ </div><!-- /.blog-sidebar -->
</template>
<script>
export default {
- name: "SideBar",
-
+ name: "SideBar",
}
-
</script>
<style scoped>
- .fixed-side{
- position:fixed;
- top:70px;
- right: 15%;
+ /* Sidebar modules for boxing content */
+ .sidebar-module {
+ padding: 15px;
+ margin-bottom: 15px;
+ }
+ .sidebar-module-inset {
+ padding: 15px;
+ background-color: #f5f5f5;
+ border-radius: 4px;
+ }
+ .sidebar-module-inset p:last-child,
+ .sidebar-module-inset ul:last-child,
+ .sidebar-module-inset ol:last-child {
+ margin-bottom: 0;
}
- button{
+ .button {
width: 100%;
- font-size: x-large;
+ font-size: large;
font-weight: bold;
}
- @media (max-width: 990px) {
- .fixed-side{
+ .blog-sidebar{
+ top: 2px;
+ }
+
+ .btn-white {
+ color: black;
+ background-color: white;
+ border-color: orange;
+ }
+
+ .btn-white:hover {
+ background-color: rgb(238,163, 69);
+ }
+
+ .sidebar-module {
+ font-size: 16px;
+ }
+
+ @media screen and (max-width: 750px) {
+ .blog-sidebar {
display: none;
}
}
- @media ( max-width: 1600px ){
- .fixed-side{
- right: 8%;
- top: 110px;
- }
+
+ article {
+ text-align: justify;
}
- @media ( max-width: 1700px ){
- .fixed-side{
- right: 10%;
- top: 110px;
- }
+
+ article li {
+ font-size: 16px;
+ word-break: break-all;
+ /*-webkit-hyphens: auto;*/
+ /*-moz-hyphens: auto;*/
+ /*-ms-hyphens: auto;*/
+ /*hyphens: auto;*/
}
</style>
diff --git a/src/main.js b/src/main.js
index 66f38e6..22116f2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
import Vue from 'vue'
import App from './App'
import router from './router'
+import global_ from './components/Global'
import $ from 'jquery'
Vue.config.productionTip = false;
+Vue.prototype.GLOBAL = global_
/* eslint-disable no-new */
new Vue({
diff --git a/src/router/index.js b/src/router/index.js
index 8229836..5a73af9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,14 +1,17 @@
import Vue from 'vue'
import Router from 'vue-router'
-import HelloWorld from '@/views/HelloWorld'
import Home from '@/views/Home'
import Download from '@/views/Download'
import Documents from '@/views/Documents'
import Tools from '@/views/Tools'
import Community from '@/views/Community'
import Development from '@/views/Development'
-import Comming from '@/views/Comming'
-
+import Example from '@/views/Example'
+import NotFound from "../views/NotFound"
+import SingleTool from "../views/SingleTool"
+import LatestDoc from "../views/LatestDoc"
+import Materials from "../views/Materials"
+import SingleMaterials from "../views/SingleMaterial"
Vue.use(Router);
@@ -22,32 +25,74 @@ export default new Router({
{
path: '/Download',
name: 'Download',
- component: Comming
+ component: Download
+ },
+ {
+ path: '/Documents/:doc',
+ name: 'Documents',
+ component: LatestDoc
},
{
- path: '/Documents',
+ path: '/Documents/:version/:section?',
name: 'Documents',
- component: Comming
+ component: Documents
+ },
+ {
+ path: '/Materials',
+ name: 'Materials',
+ component: Materials
+ },
+ {
+ path: '/Materials/:doc',
+ name: 'Materials',
+ component: SingleMaterials
},
{
path: '/Tools',
name: 'Tools',
- component: Comming
+ component: Tools
},
{
- path: '/Community',
- name: 'Comming',
- component: Comming
+ path: '/Tools/:content',
+ name: 'SingleTool',
+ component: SingleTool
+ },
+ {
+ path: '/Community/:content',
+ name: 'Community',
+ component: Community
},
{
path: '/Development',
name: 'Development',
- component: Comming
+ component: Development
+ },
+ {
+ path: '/Example',
+ name: 'Example',
+ component: Example
},
{
- path: '/Comming',
- name: "Comming",
- component: Comming
+ path: "/404",
+ name: "NotFound",
+ component: NotFound
+ },
+ {
+ path: "*",
+ redirect: "/404"
+ }
+ ],
+ scrollBehavior: function(to, from, savedPosition) {
+ if (to.hash) {
+ // get Nav bar height
+ let yOffset = document.getElementById("bs-example-navbar-collapse-1").clientHeight;
+ console.log(yOffset);
+ return {
+ selector: to.hash,
+ offset: {x: 0, y: yOffset}
+ }
+ } else {
+ return { x: 0, y: 0 }
}
- ]
+ },
})
diff --git a/src/views/Community.vue b/src/views/Community.vue
index a53b95e..2c019b3 100644
--- a/src/views/Community.vue
+++ b/src/views/Community.vue
@@ -1,21 +1,105 @@
<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
+ <div>
+ <div class="container">
+ <div class="row markdown-body">
+ <div class="col-sm-8">
+ <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ </div>
+ <my-sidebar/>
+ </div>
+ <div class="col-sm-8" v-if="this.content()==='Project Committers'">
+ <router-link to="/Development" class="nav-link"><span style="font-size: medium">Want to join us? Learn How to Contribute </span>
+ </router-link>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
+ <footer-bar/>
</div>
</template>
<script>
- export default {
- name: "Community",
- data() {
- return {
- msg: 'Welcome to Community Page'
+ import Footer from "../components/FooterFixed"
+ import SideBar from '../components/SideBar'
+ import markdown from 'vue-markdown'
+ import axios from 'axios'
+ import Golbal from '../components/Global'
+
+ export default {
+ name: "Community",
+ components: {
+ 'footer-bar': Footer,
+ 'my-sidebar': SideBar,
+ 'vue-markdown': markdown,
+ },
+ data() {
+ return {
+ msg: 'Welcome to Community Page',
+ md: "",
+ toc: "",
+ }
+ },
+ created() {
+ this.fetchData();
+ },
+ watch: {
+ '$route': 'fetchData'
+ },
+ methods: {
+ content: function () {
+ return this.$route.params.content
+ },
+ fetchData() {
+ const dict = {
+ "Powered By": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Community-Powered%20By.md",
+ "Project Committers": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Community-Project%20Committers.md",
+ "History & Vision": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Community-History%26Vision.md",
+ };
+ const content = this.content();
+ let url = null;
+ if (content in dict) {
+ url = dict[content];
+ } else {
+ this.$router.push('/404');
}
+ const pointer = this;
+ axios.get(url)
+ .then(function (response) {
+ pointer.md = response.data;
+ })
+ },
+ parse(html){
+ return Golbal.isReadyForPrerender(html)
}
}
+ }
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
+
+ body {
+ font-family: Georgia, "Times New Roman", Times, serif;
+ color: #555;
+ }
+
+ .pager > li > a {
+ width: 140px;
+ padding: 10px 20px;
+ text-align: center;
+ border-radius: 30px;
+ }
+
+ .blog-footer p:last-child {
+ margin-bottom: 0;
+ }
+
</style>
diff --git a/src/views/Development.vue b/src/views/Development.vue
index 786ec5a..95cdd09 100644
--- a/src/views/Development.vue
+++ b/src/views/Development.vue
@@ -1,22 +1,87 @@
<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
+ <div>
+ <div class="container">
+ <div class="row markdown-body">
+ <div class="col-sm-8">
+ <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ </div>
+ <my-sidebar/>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
+ <footer-bar/>
</div>
+
</template>
<script>
- export default {
- name: "Development",
- data() {
- return {
- msg: 'Welcome to Development Page'
- }
+ import Footer from "../components/FooterFixed"
+ import SideBar from '../components/SideBar'
+ import markdown from 'vue-markdown'
+ import axios from 'axios'
+ import Golbal from '../components/Global'
+
+ export default {
+ name: "Development",
+ components: {
+ 'footer-bar': Footer,
+ 'my-sidebar': SideBar,
+ 'vue-markdown': markdown,
+ },
+ data() {
+ return {
+ msg: 'Welcome to Community Page',
+ toc: "",
+ md: "",
+ locate: ""
+ }
+ },
+ created() {
+ this.fetchData();
+ },
+ watch: {
+ '$route': 'fetchData'
+ },
+ methods: {
+ content: function () {
+ return this.$route.params.content
+ },
+ fetchData() {
+ let url = Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Development.md";
+ let pointer = this;
+ axios.get(url).then(function (response) {
+ pointer.md = response.data;
+ })
+ },
+ parse(html){
+ return Golbal.isReadyForPrerender(html)
}
}
+ }
</script>
-
<style scoped>
h1, h2 {
font-weight: normal;
}
+
+ body {
+ font-family: Georgia, "Times New Roman", Times, serif;
+ color: #555;
+ }
+
+ .pager > li > a {
+ width: 140px;
+ padding: 10px 20px;
+ text-align: center;
+ border-radius: 30px;
+ }
+
+ .blog-footer p:last-child {
+ margin-bottom: 0;
+ }
+
</style>
diff --git a/src/views/Documents.vue b/src/views/Documents.vue
index ed618fa..3c04ba6 100644
--- a/src/views/Documents.vue
+++ b/src/views/Documents.vue
@@ -1,153 +1,385 @@
<template>
<div>
- <div class="main container" style="width: 100%;height: 100%">
- <div class="row" style="margin: 0 0;">
- <div class="col-xs-2" style="height: 100%;overflow: auto;">
- <div class="version text-center">
- <div class="dropdown center-block" style="width: 80%; ">
- <button class="btn dropdown-toggle" data-toggle="dropdown" style="width: 100%">
- IoTDB v0.7
- <b class="caret right-block"></b>
- </button>
- <ul class="dropdown-menu">
- <li>
- <a id="action-1" href="#">IoTDB v0.7</a>
- </li>
- <li>
- <a href="#">IoTDB v0.7</a>
- </li>
- <li>
- <a href="#">IoTDB v0.7</a>
- </li>
- </ul>
- </div>
+ <div class="main container-fluid" >
+ <div class="row" style="margin: 0 0;height:90%">
+ <!--sidebar part-->
+ <div class="col-xs-3 sidebar">
+ <div class="version text-center">
+ <div class="dropdown center-block" style="width: 80%;">
+ <button id="version-current" class="btn dropdown-toggle" data-toggle="dropdown" style="width: 100%">
+ IoTDB v0.7
+ <b class="caret right-block"></b>
+ </button>
+ <ul class="dropdown-menu">
+ <li v-for="entry in versions">
+ <router-link :to="entry.url">{{entry.text}}</router-link>
+ </li>
+ </ul>
</div>
- <div class="content center-block" style="width: 80%;margin-bottom: 110px">
- <h4>Overview</h4>
- <ul class="list-group">
- <li class="Overview" @click="change_navi_content($event)">section1</li>
- <li class="Overview" @click="change_navi_content($event)">section2</li>
- <li class="Overview" @click="change_navi_content($event)">section3</li>
- <li class="Overview" @click="change_navi_content($event)">section4</li>
- <li class="Overview" @click="change_navi_content($event)">section5</li>
- </ul>
- <h4>Chapter2</h4>
- <ul class="list-group">
- <li class="Chapter2" @click="change_navi_content($event)">section1</li>
- <li class="Chapter2" @click="change_navi_content($event)">section2</li>
- <li class="Chapter2" @click="change_navi_content($event)">section3</li>
- <li class="Chapter2" @click="change_navi_content($event)">section4</li>
- <li class="Chapter2" @click="change_navi_content($event)">section5</li>
- </ul>
- <h4>Chapter3</h4>
- <ul class="list-group">
- <li class="Chapter3" @click="change_navi_content($event)">section1</li>
- <li class="Chapter3" @click="change_navi_content($event)">section2</li>
- <li class="Chapter3" @click="change_navi_content($event)">section3</li>
- <li class="Chapter3" @click="change_navi_content($event)">section4</li>
- <li class="Chapter3" @click="change_navi_content($event)">section5</li>
- </ul>
- <h4>Chapter4</h4>
- <ul class="list-group">
- <li class="Chapter4" @click="change_navi_content($event)">section1</li>
- <li class="Chapter4" @click="change_navi_content($event)">section2</li>
- <li class="Chapter4" @click="change_navi_content($event)">section3</li>
- <li class="Chapter4" @click="change_navi_content($event)">section4</li>
- <li class="Chapter4" @click="change_navi_content($event)">section5</li>
- </ul>
- <h4>Chapter5</h4>
- <ul class="list-group">
- <li class="Chapter5" @click="change_navi_content($event)">section1</li>
- <li class="Chapter5" @click="change_navi_content($event)">section2</li>
- <li class="Chapter5" @click="change_navi_content($event)">section3</li>
- <li class="Chapter5" @click="change_navi_content($event)">section4</li>
- <li class="Chapter5" @click="change_navi_content($event)">section5</li>
- </ul>
-
+ </div>
+ <div id="text-catalogue" class="content center-block" style="overflow: auto">
+ <div v-for="item in result">
+ <h5 style="font-size: 16px" data-toggle="collapse" v-if="typeof(item[0]) != 'undefined'" :data-target="item[0].replace(/ /g, '').replace(/:/g, '')" @click="changeChapterNavContent($event)" :class="item[0].slice(1)">
+ {{item[0]}}
+ </h5>
+ <ul class="list-group collapse in" v-if="typeof(item[0]) != 'undefined'" :id="item[0].slice(1).replace(/ /g, '').replace(/:/g, '')">
+ <li v-for="chapter in item" :class="item[0].slice(1)" v-if="chapter.startsWith('##')" @click="changeSectionNavContent($event)">
+ {{chapter.slice(2)}}
+ </li>
+ </ul>
</div>
+ </div>
</div>
-
- <div class="col-xs-10 fixed-middle">
- <ul class="breadcrumb direct" id="bread_chapter">
-
- </ul>
- <div class="text_field">
- <p id="text_content">
-
- </p>
- </div>
+ <!--content part-->
+ <div class="col-xs-9 fixed-middle">
+ <ul class="breadcrumb direct" id="bread-chapter">
+ <li><a style='color:#fcac45;'>{{version}}</a></li>
+ <li><a style='color:#fcac45;'>{{chapter}}</a></li>
+ <li><a style='color:#fcac45;'></a></li>
+ </ul>
+ <div class="text-field" id="text-content">
+ <vue-markdown class="markdown-area" :source="document" :toc="true" :toc-anchor-link="true" toc-anchor-link-symbol=""></vue-markdown>
+ <p class="find-mistake">This documentation is open source. Find mistakes? Want to contribute? Go for it.</p>
+ </div>
+ <div class="doc-footer">
+ <span>Copyright © 2018 The Apache Software Foundation. Apache and the Apache feather logo are trademarks of The Apache Software Foundation.</span>
+ </div>
</div>
+ </div>
</div>
-</div>
- <footer_bar/>
</div>
</template>
<script>
- import Footer from "../components/FooterFixed"
- export default {
- name: "Documents",
- data() {
+ import MarkDown from "vue-markdown"
+ import axios from 'axios'
+ import Golbal from '../components/Global'
+
+ export default {
+ name: "Documents",
+ data() {
+ return {
+ versions: [],
+ document: "",
+ result: [],
+ version: "",
+ chapter: ""
+ }
+ },
+ components: {
+ 'vue-markdown': MarkDown,
+ },
+ created() {
+ this.init();
+ this.generateCatalogue();
+ this.fetchData();
+ },
+ watch: {
+ '$route': 'fetchData',
+ '$route.params.version': 'getButtonVersion',
+ },
+ methods: {
+ init(){
+ for(let key in Golbal.SUPPORT_VERSION){
+ if(key != Golbal.LATEST_STR){
+ this.versions.push({
+ text: "IoTDB " + Golbal.SUPPORT_VERSION[key]['version'],
+ url: '/Documents/'+ key + '/sec1'
+ })
+ }
+ }
+ let version = this.getVersion();
+ let chapter = Number(this.getSection().substr(3)) - 1;
+ if(version in Golbal.SUPPORT_VERSION){
+ if(version === Golbal.LATEST_STR){
+ this.version = Golbal.LATEST_VERSION;
+ } else {
+ this.version = version;
+ }
+ this.chapter = Golbal.SUPPORT_VERSION[version]['chapters'][chapter].substr(0, Golbal.SUPPORT_VERSION[version]['chapters'][chapter].length - 3);
+ }
},
- components:{
- 'footer_bar':Footer
+ getButtonVersion() {
+ document.getElementById("version-current").innerHTML = this.getVersionString() + "<b class=\"caret right-block\"></b>";
+ this.generateCatalogue();
},
- methods:{
- change_navi_content:function(event) {
- var chapter=event.currentTarget.className;
- var section=event.currentTarget.innerText;
- var x=document.getElementById("bread_chapter");
- var y=document.getElementById("text_content");
- x.innerHTML="<li><a href='#'>"+chapter+"</a></li>"+"<li><a>"+section+"</a></li>";
- y.innerText=chapter+section;
+ getVersionString() {
+ let version = this.$route.params.version;
+ if (version in Golbal.SUPPORT_VERSION){
+ if (version === Golbal.LATEST_STR){
+ return "IoTDB v"+Golbal.LATEST_VERSION;
+ } else{
+ return "IoTDB v"+version;
+ }
}
+ return "";
+ },
+ changeChapterNavContent: function (event) {
+ let ver = this.getVersionString();
+ let chapter = event.currentTarget.innerText.replace(/▼/g, '');
+ var x = document.getElementById("bread-chapter");
+ x.innerHTML = "<li><a style='color:#fcac45;'>" + ver + "</a></li>" + "<li><a style='color:#fcac45;' href='#" +
+ chapter.trim().toLocaleLowerCase().replace(/ /g, '-').replace(/:/g, '') + "'>" +
+ chapter + "</a></li>";
+ let sect = event.currentTarget.className;
+ this.$route.params.section = "sec" + sect.replace(/[^0-9]/ig, "");
+ this.fetchData();
+ location.href = '#' + chapter.trim().toLocaleLowerCase().replace(/ /g, '-').replace(/:/g, '');
+ },
+ changeSectionNavContent: function (event) {
+ let version = this.getVersionString();
+ var chapter = event.currentTarget.className;
+ var section = event.currentTarget.innerText;
+ var x = document.getElementById("bread-chapter");
+ x.innerHTML = "<li><a style='color:#fcac45;'>" + version + "</a></li>" + "<li><a style='color:#fcac45;' href='#" +
+ chapter.trim().toLocaleLowerCase().replace(/ /g, '-').replace(/:/g, '') + "'>" +
+ chapter + "</a></li>" + "<li><a style='color:#fcac45;' href='#" +
+ section.toLocaleLowerCase().replace(/ /g, '-') + "'>" + section + "</a></li>";
+ this.$route.params.section = "sec" + chapter.replace(/[^0-9]/ig, "");
+ this.fetchData();
+
+ location.href = "#" + section.toLocaleLowerCase().replace(/ /g, '-');
+ },
+ // get the version
+ getVersion() {
+ return this.$route.params.version;
+ },
+ // get the section
+ getSection() {
+ return this.$route.params.section;
+ },
+ // use version and section to render markdown
+ fetchData() {
+ let version = this.getVersion();
+ let chapter = Number(this.getSection().substr(3)) - 1;
+ let url = null;
+ if (version in Golbal.SUPPORT_VERSION) {
+ url = Golbal.SUPPORT_VERSION[version]['doc-prefix'] + Golbal.SUPPORT_VERSION[version]['branch'] +
+ "/docs/Documentation/UserGuide" + Golbal.SUPPORT_VERSION[version]['version'] + "/" +
+ Golbal.SUPPORT_VERSION[version]['chapters'][chapter];
+ } else {
+ this.$router.push('/404');
+ }
+ const pointer = this;
+ axios.get(url)
+ .then(function (response) {
+ pointer.document = response.data;
+ })
+ .catch(function (error) {
+ console.log(error);
+ })
+ .then(function () {
+ });
+ },
+ //generate the sidebar information when version changes
+ generateCatalogue() {
+ this.result = [];
+ let version = this.getVersion();
+ if (version in Golbal.SUPPORT_VERSION) {
+ for(let i = 0; i < Golbal.SUPPORT_VERSION[version]['chapters'].length; i++){
+ this.result.push([]);
+ }
+ for(let i = 0; i < Golbal.SUPPORT_VERSION[version]['chapters'].length; i++){
+ let url = Golbal.SUPPORT_VERSION[version]['doc-prefix'] + Golbal.SUPPORT_VERSION[version]['branch'] +
+ "/docs/Documentation/UserGuide" + Golbal.SUPPORT_VERSION[version]['version'] + "/" +
+ Golbal.SUPPORT_VERSION[version]['chapters'][i];
+ const pointer = this;
+ axios.get(url).then(function (response) {
+ let rows = response.data.split("\n");
+ for (let item of rows) {
+ if (item.startsWith("#") && !item.startsWith("###")) {
+ pointer.result[i].push(item);
+ }
+ }
+ })
+ }
+ } else {
+ this.$router.push('/404');
+ }
}
}
+ }
+
</script>
<style scoped>
+ #bread-chapter{
+ margin-left: 2%;
+ margin-right: 17%;
+ max-width: 900px;
+ left: 25%;
+ }
+
+ .text-field {
+ position: fixed;
+ overflow-x: hidden;
+ overflow-y: auto;
+ top: 120px;
+ left: 25%;
+ bottom: 50px;
+ margin-left: 2%;
+ margin-right: 15%;
+ max-width: 1000px;
+ }
+
+ .fixed-middle {
+ position: fixed;
+ top: 70px;
+ left: 24%;
+ }
+
+ .fixed-middle > ul {
+ height: 36px;
+ }
+
+ .main {
+ padding: 0;
+ }
+
+ .direct > li > a {
+ color: #fcac45;
+ }
- .text_field{
- position:fixed;
- overflow: auto;
- height:70%;
+ .find-mistake {
+ text-align: center;
}
- .fixed-middle{
+
+ .sidebar {
position: fixed;
- top:50px;
- left: 17%;
+ top: 65px;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ display: block;
+ overflow-x: hidden;
+ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+ background: #222222;
+ padding: 0 0;
+ line-height: 8px;
+
+ }
+
+ .dropdown {
+ margin-top: 30px;
+ margin-bottom: 30px;
+ }
+ .dropdown > ul {
+ width: 100%;
}
- .col-xs-2{
- background: #222222;
- padding: 0 0;
+
+ .list-group > li {
+ cursor: pointer;
+ margin-left: 10px;
}
- .main{
- padding: 0;
+
+ h5 {
+ color: #fcac45;
}
- .dropdown{
- margin-top: 10px;
- margin-bottom: 10px;
+
+ .list-group > li {
+ list-style-type: none;
+ color: #eff0f8;
+ margin-bottom: 5px;
+ padding: 5px;
+ max-width: 80%;
+
}
- .dropdown>ul{
- width:100%;
+ .list-group > li:hover{
+ background: grey;
+ border: 5px grey;
+ border-radius: 5px;
}
- h4{
- color: #fcac45;
+
+ .direct > li > a:link {
+ color: #fcac45;
}
- .list-group>li{
- list-style-type: none;
- color: #eff0f8;
+
+ .version {
+ border-bottom: 1px solid #666666;
}
- .direct a:link{
- color: #fcac45;
+
+ button {
+ height:40px;
+ background: #fcac45;
}
- .version{
- border-bottom: 1px solid #eff0f8;
+
+ .dropdown-menu {
+ text-align: center;
}
- button{
- background:#fcac45 ;
+
+ .content.center-block {
+ margin-left: 20px;
+ top: 120px;
+ bottom: 50px;
}
+
+ .text-field > .markdown-area > p {
+ width: 50px;
+ }
+
+ div.mark-down > p > img {
+ width: 50px;
+ }
+
+ .doc-footer{
+ position: fixed;
+ width: 76%;
+ bottom: 0px;
+ right: 0px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ text-align:center;
+ color:#fff;
+ background:#222222;
+ }
+
+ @media (min-width: 768px) {
+ .fixed-middle {
+ top: 170px;
+ }
+ #text-content{
+ top: 210px;
+ }
+ .sidebar{
+ top: 150px;
+ }
+ .content.center-block{
+ top: 222px;
+ }
+ }
+
+ @media (min-width: 990px) {
+ .fixed-middle {
+ top: 120px;
+ }
+ #text-content{
+ top: 160px;
+ }
+ .sidebar{
+ top: 100px;
+ }
+ .content.center-block{
+ top: 180px;
+ }
+ }
+
+ @media (min-width: 1200px) {
+ .fixed-middle {
+ top: 70px;
+ }
+ #text-content{
+ top: 110px;
+ }
+ .sidebar{
+ top: 50px;
+ }
+ .content.center-block{
+ top: 122px;
+ }
+ }
+
+
</style>
diff --git a/src/views/Download.vue b/src/views/Download.vue
index 47e3f6f..3c89102 100644
--- a/src/views/Download.vue
+++ b/src/views/Download.vue
@@ -1,22 +1,94 @@
<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
+ <div>
+ <div class="container">
+ <div class="row">
+ <div class="col-sm-8 download-section">
+ <h2 class="download-title">Release Version</h2>
+ <p>Please choose a version:
+ <select class="download-version-select" v-model="selectVersionObj">
+ <option v-for="iotdbVersion in downloadVersionList" :value="iotdbVersion">{{iotdbVersion.text}}</option>
+ </select>
+ </p>
+ <ul>
+ <li style="margin: 5px">Download IoTDB for Linux/MacOS:<a class="link-color" :href="selectVersionObj.linuxUrl"> {{selectVersionObj.text}} Release.tar</a></li>
+ <li style="margin: 5px">Download IoTDB for Windows:<a class="link-color" :href="selectVersionObj.windowsUrl"> {{selectVersionObj.text}} Release.zip</a></li>
+ </ul>
+ <p>(Note that before v0.7.1, IoTDB had not yet become an incubator project in Apache. Above is an unofficial release
+ since our first official release is still in progress.)</p>
+ <p>Main features and change list of each version, please check <router-link to="/Materials/Release Notes">release notes</router-link></p>
+ <h2 class="download-title">Get Source Code</h2>
+ <p>Go to our <a class="link-color" :href="iotdbGithubUrl">Github</a>, have fun with IoTDB source code!</p>
+ </div>
+ <my-sidebar/>
+ </div>
+ </div>
+ <footer-bar/>
</div>
</template>
<script>
- export default {
- name: "Download",
- data() {
- return {
- msg: 'Welcome to Download Page'
- }
+ import SideBar from '../components/SideBar'
+ import Footer from '../components/FooterFixed'
+ export default {
+ name: "Download",
+ components: {
+ 'footer-bar': Footer,
+ 'my-sidebar': SideBar
+ },
+ data() {
+ return {
+ iotdbGithubUrl: 'https://github.com/apache/incubator-iotdb',
+ selectVersionObj: {},
+ downloadVersionList: [
+ {text: 'IoTDB v0.7.0', linuxUrl: 'https://github.com/thulab/iotdb/releases/tag/v0.7.0', windowsUrl: 'https://github.com/thulab/iotdb/releases/tag/v0.7.0'},
+ {text: 'IoTDB v0.7.1', linuxUrl: 'https://github.com/thulab/iotdb/releases/tag/v0.7.1', windowsUrl: 'https://github.com/thulab/iotdb/releases/tag/v0.7.1'},
+ ]
}
+ },
+ created() {
+ this.selectVersionObj = this.downloadVersionList[0];
}
+ }
</script>
<style scoped>
- h1, h2 {
- font-weight: normal;
+ .main>div {
+ margin-top: 10px;
+ }
+ .download-title {
+ margin-bottom: 15px;
+ margin-top: 15px;
+ color: #fcac45;
+ }
+ .link-color {
+ color: #fcac45;
+ }
+ .download-version-select {
+ -webkit-appearance: none; /* google */
+ -moz-appearance: none; /* firefox */
+ appearance: none; /* IE */
+ border: none;
+ outline: none;
+ border-radius: 5px;
+ width: 150px;
+ height: 30px;
+ padding-left: 15px;
+ background: #fcac45 url("../assets/img/arrow.png") no-repeat scroll right center;
+ }
+ select::-ms-expand {
+ display: none;
+ }
+
+ p, a{
+ font-size: 16px;
+ }
+ .download-section > ul {
+ padding-left: 20px;
+ font-size: 16px;
+ }
+
+ .download-section > p{
+ font-size: 16px;
}
</style>
+
diff --git a/src/views/Example.vue b/src/views/Example.vue
new file mode 100644
index 0000000..2840e4f
--- /dev/null
+++ b/src/views/Example.vue
@@ -0,0 +1,82 @@
+<template>
+ <div>
+ <div class="container">
+ <div class="row">
+ <div class="col-sm-8">
+ <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ </div>
+ <my-sidebar/>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
+ <footer-bar/>
+ </div>
+</template>
+
+<script>
+ import Footer from "../components/FooterFixed"
+ import SideBar from '../components/SideBar'
+ import markdown from 'vue-markdown'
+ import axios from 'axios'
+ import Golbal from '../components/Global'
+
+ export default {
+ name: "Example",
+ components: {
+ 'footer-bar': Footer,
+ 'my-sidebar': SideBar,
+ 'vue-markdown': markdown,
+ },
+ data() {
+ return {
+ msg: 'Welcome to Example Page',
+ md: "",
+ toc: ""
+ }
+ },
+ created() {
+ this.fetchData();
+ },
+ methods: {
+ fetchData() {
+ let url = Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Documentation/OtherMaterial-Examples.md";
+ const pointer = this;
+ axios.get(url)
+ .then(function (response) {
+ pointer.md = response.data;
+ })
+ },
+ parse(html){
+ return Golbal.isReadyForPrerender(html)
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ h1, h2 {
+ font-weight: normal;
+ }
+
+ body {
+ font-family: Georgia, "Times New Roman", Times, serif;
+ color: #555;
+ }
+
+ .pager > li > a {
+ width: 140px;
+ padding: 10px 20px;
+ text-align: center;
+ border-radius: 30px;
+ }
+
+ .blog-footer p:last-child {
+ margin-bottom: 0;
+ }
+
+</style>
+
diff --git a/src/views/Home.vue b/src/views/Home.vue
index faf6fb0..358eb81 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,94 +1,106 @@
<template>
<div>
- <div class="main container" style="max-width: 1200px; min-width: 900px">
- <div class="row">
- <div class="col-md-8 col-sm-12">
- <div>
- <p class="home-tittle">Apache IoTDB (incubating) (Database for Internet of Things)</p>
- <p>Apache IoTDB (incubating) (Database for Internet of Things) is an integrated data management engine designed for timeseries data which was initially developed by Tsinghua University. Now Apache IoTDB (incubating) is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Incubator.
- It can provide users specific services for data collection, storage and analysis. Due to its light weight structure, high performance and usable features together with its intense integration with Hadoop and Spark ecology, Apache IoTDB (incubating) can meet the requirements of massive dataset storage, high-speed data input and complex data analysis in the IoT industrial field.</p>
- </div>
- <div>
- <p class="home-tittle">Scenarios</p>
- <div id="myCarousel" class="carousel slide" data-ride="carousel">
- <ol class="carousel-indicators">
- <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
- <li data-target="#myCarousel" data-slide-to="1"></li>
- <li data-target="#myCarousel" data-slide-to="2"></li>
- </ol>
- <div class="carousel-inner">
- <div class="item active">
- <img src="../assets/img/home-Slide1.png" alt="First slide">
- <div class="Scenarios">
- <h1 style="margin-top: 0">Example</h1>
- <p>A car company installed sensors on its cars to collect monitoring information such as the driving status of the vehicle. These automotive devices have limited hardware configurations and are difficult to carry complex applications. Cars with sensors can be connected to each other or send data via narrow-band IoT(Example).</p>
- </div>
- </div>
- <div class="item">
- <img src="../assets/img/home-Slide2.png" alt="Second slide">
- <div class="Scenarios">
- <h1 style="margin-top: 0">Example</h1>
- <p>A car company installed sensors on its cars to collect monitoring information such as the driving status of the vehicle. These automotive devices have limited hardware configurations and are difficult to carry complex applications. Cars with sensors can be connected to each other or send data via narrow-band IoT(Example).</p>
- </div>
- </div>
- <div class="item">
- <img src="../assets/img/home-Slide3.png" alt="Third slide">
- <div class="Scenarios">
- <h1 style="margin-top: 0">Example</h1>
- <p>A car company installed sensors on its cars to collect monitoring information such as the driving status of the vehicle. These automotive devices have limited hardware configurations and are difficult to carry complex applications. Cars with sensors can be connected to each other or send data via narrow-band IoT(Example).</p>
- </div>
- </div>
- </div>
- <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
- <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
- <span class="sr-only">Previous</span>
- </a>
- <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
- <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
- <span class="sr-only">Next</span>
- </a>
+ <div class="main container">
+ <div class="row">
+ <div class="col-md-9 col-sm-9">
+ <div>
+ <p class="home-tittle">Apache IoTDB (incubating) (Database for Internet of Things)</p>
+ <article lang="en">
+ <p>Apache IoTDB (incubating) (Database for Internet of Things) is an integrated data management engine
+ designed for timeseries data which was initially developed by Tsinghua University. Now Apache IoTDB
+ (incubating) is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the
+ Incubator.
+ It can provide users specific services for data collection, storage and analysis. Due to its light weight
+ structure, high performance and usable features together with its intense integration with Hadoop and
+ Spark ecology, Apache IoTDB (incubating) can meet the requirements of massive dataset storage, high-speed
+ data input and complex data analysis in the IoT industrial field.</p>
+ </article>
+ </div>
+ <div>
+ <p class="home-tittle">Scenarios</p>
+ <div id="myCarousel" class="carousel slide" data-ride="carousel" style="background: rgb(31,31,31)">
+ <ol class="carousel-indicators">
+ <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+ <li data-target="#myCarousel" data-slide-to="1"></li>
+ <li data-target="#myCarousel" data-slide-to="2"></li>
+ </ol>
+ <div class="carousel-inner">
+ <div class="item active">
+ <img src="https://user-images.githubusercontent.com/1021782/50463652-f67c6480-09c7-11e9-8f65-c8adaff09043.png" alt="First slide">
+ <br/>
+ <div class="Scenarios">
+ <h1>High-end equipment</h1>
+ <article lang="en">
+ <p> In high-end manufacturing, there are many devices equipped with sensors collecting working status data.
+ Meteorological stations, wind turbines are common high-end devices.
+ These devices, if supports Java or Go (in developing), can run TsFile to store data locally.
+ In this way, TsFile can provide the ability to save data with high throughput, high compression ratio, and millisecond query.
+ Together with TsFile-Sync tool, TsFiles can be transmitted to the data center.
+ </p>
+ </article>
+ </div>
</div>
- </div>
- <div>
- <p class="home-tittle" style="padding-top: 15px">Main Features</p>
- <div class="row feature">
- <div class="col-xs-4" v-for="item in featureBlock1" @mouseover="hover($event)" @mouseleave="unhover($event)">
- <div class="row feature-title-row">
- <div class="col-xs-3">
- <img :src=item.featureSrc style="vertical-align:middle">
- </div>
- <div class="col-xs-9 feature-title"><p>{{item.featureTitle}}</p></div>
- </div>
- <p class="feature-content">{{item.featureContent}}</p>
- <hr/>
- </div>
+ <div class="item">
+ <img src="https://user-images.githubusercontent.com/1021782/50463651-f67c6480-09c7-11e9-9374-3e6c6c540d7b.png" alt="Second slide">
+ <br/>
+ <div class="Scenarios">
+ <h1>Local Controller</h1>
+ <article lang="en">
+ <p>
+ In the scene of factories, there are tens of devices under LAN network.
+ IoTDB can be installed on a local controller server in the factory to receive data from those devices.
+ The local controller server (normal PC or workstation) with IoTDB can provide the ability to persist data and query data with SQL-like interface.
+ In addition, with TsFile-Sync tool, TsFiles on the local controller can be transmitted to the data center equipped with IoTDB instance in the cloud.
+ </p>
+ </article>
+ </div>
+ </div>
+ <div class="item">
+ <img src="https://user-images.githubusercontent.com/1021782/50463650-f67c6480-09c7-11e9-9b80-bc66aa5dc0ab.png" alt="Third slide">
+ <br/>
+ <div class="Scenarios">
+ <h1>Cloud Data Management</h1>
+ <article lang="en">
+ <p>
+ In the scene of high-speed network (Internet of Vehicles, etc.), a car installed sensors on it can collect monitoring information(driving status, etc.) of itself at a certain frequency.
+ Usually, these automotive devices have limited hardware configurations and are difficult to carry complex applications.
+ Lightweight IoTDB(IoTDB Client) came into being.
+ With JDBC API, it can make data sent by narrow-band IoT or 4G possible. In this way, devices and cloud are connected together.
+ </p>
+ </article>
+ </div>
</div>
- <div class="row feature">
- <div class="col-xs-4" v-for="item in featureBlock2" @mouseover="hover($event)" @mouseleave="unhover($event)">
- <div class="row feature-title-row">
- <div class="col-xs-3 ">
- <img :src=item.featureSrc style="vertical-align:middle">
- </div>
- <div class="col-xs-9 feature-title"><p>{{item.featureTitle}}</p></div>
- </div>
- <p class="feature-content">{{item.featureContent}}</p>
- <hr/>
- </div>
+ </div>
+ </div>
+ </div>
+ <div>
+ <p class="home-tittle" style="padding-top: 15px">Main Features</p>
+ <div class="row feature">
+ <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 feature-item" v-for="item in featureBlock1" @mouseover="hover($event)"
+ @mouseleave="unhover($event)">
+ <div class="row feature-title-row">
+ <div class="col-xs-2 col-sm-2">
+ <img :src=item.featureSrc style="vertical-align:middle">
+ </div>
+ <div class="col-xs-10 col-sm-10 feature-title"><p>{{item.featureTitle}}</p></div>
</div>
+ <p class="feature-content" style="word-break: break-all">{{item.featureContent}}</p>
+ <hr/>
+ </div>
</div>
+ </div>
</div>
<side-bar/>
- </div>
+ </div>
-</div>
+ </div>
<footer-bar/>
</div>
</template>
<script>
import SideBar from "../components/SideBar";
- import Footer from "../components/Footer"
- //import "../assets/js/index"
+ import Footer from "../components/FooterFixed"
export default {
name: "Home",
components: {
@@ -98,22 +110,33 @@
data() {
return {
msg: 'Welcome to Home Page',
- featureBlock1:[
- {featureSrc:require("../assets/img/home-icon1.png"),featureTitle:"High-throughput read and write",
- featureContent:"Apache IoTDB (incubating) supports millions of low-power devices' strong connection data access, high-speed data read and write for intelligent networking devices and mixed devices mentioned above."},
- {featureSrc:require("../assets/img/home-icon2.png"),featureTitle:"Efficient directory structure",
- featureContent:"Apache IoTDB (incubating) supports efficient oganization for complex timeseries data structure from intelligent networking devices, oganization for timeseries data from devices of the same type, fuzzy searching strategy for massive and complex directory of timeseries data."},
- {featureSrc:require("../assets/img/home-icon3.png"),featureTitle:"Rich query semantics",
- featureContent:"Apache IoTDB (incubating) supports time alignment for timeseries data accross devices and sensors, computation in timeseries field (frequency domain transformation) and rich aggregation function support in time dimension."},
+ featureBlock1: [
+ {
+ featureSrc: require("../assets/img/home-icon1.png"), featureTitle: "High-throughput read and write",
+ featureContent: "Apache IoTDB (incubating) supports millions of low-power devices' strong connection data access, high-speed data read and write for intelligent networking devices and mixed devices mentioned above."
+ },
+ {
+ featureSrc: require("../assets/img/home-icon2.png"), featureTitle: "Efficient directory structure",
+ featureContent: "Apache IoTDB (incubating) supports efficient oganization for complex data structure from IoT devices, oganization for large size of timeseries data, fuzzy searching strategy for complex directory of timeseries data."
+ },
+ {
+ featureSrc: require("../assets/img/home-icon3.png"), featureTitle: "Rich query semantics",
+ featureContent: "Apache IoTDB (incubating) supports time alignment for timeseries data accross devices and sensors, computation in timeseries field (frequency domain) and rich aggregation function support in time dimension."
+ },
+ {
+ featureSrc: require("../assets/img/home-icon4.png"), featureTitle: "Low cost on hardware",
+ featureContent: "Apache IoTDB (incubating) can reach a high compression ratio of disk storage (For one billion data storage, hard drive cost less than $0.23)"
+ },
+ {
+ featureSrc: require("../assets/img/home-icon5.png"), featureTitle: "Flexible deployment",
+ featureContent: "Apache IoTDB (incubating) provides users one-click installation tool on the cloud, once-decompressed-used terminal tool and the bridge tool between cloud platform and terminal tool (Data Synchronization Tool)."
+ },
+ {
+ featureSrc: require("../assets/img/home-icon6.png"),
+ featureTitle: "Intense integration with Open Source Ecosystem",
+ featureContent: "Apache IoTDB (incubating) supports Hadoop, Spark, etc. analysis ecosystems and Grafana visualization tool."
+ },
],
- featureBlock2:[
- {featureSrc:require("../assets/img/home-icon4.png"),featureTitle:"Low cost on hardware",
- featureContent:"Apache IoTDB (incubating) can reach a high compression ratio of disk storage (For one billion data storage, hard drive cost less than $0.23)"},
- {featureSrc:require("../assets/img/home-icon5.png"),featureTitle:"Flexible deployment",
- featureContent:"Apache IoTDB (incubating) provides users one-click installation tool on the cloud, once-decompressed-used terminal tool and the bridge tool between cloud platform and terminal tool (Data Synchronization Tool)."},
- {featureSrc:require("../assets/img/home-icon6.png"),featureTitle:"Intense integration with Open Source Ecosystem",
- featureContent:"Apache IoTDB (incubating) supports Hadoop, Spark, etc. analysis ecosystems and Grafana visualization tool."},
- ]
}
},
methods: {
@@ -130,120 +153,149 @@
<style scoped>
- .feature>.col-xs-4>span{
- margin-left:10px;
+ .item{
+ margin-bottom: 10px;
}
- .main>div{
- margin-top: 10px;
+
+ .item > img {
+ margin-left: auto;
+ margin-top: 5px;
+ margin-right: auto;
+ width: 95%;
+ }
+ .carousel-indicators{
+ bottom: 0px;
}
- .home-tittle{
- color: #fcac45;
- font-size:x-large;
- font-weight: 600;
- }
- .feature{
- display: table;
- }
- .feature>.col-xs-4{
- padding-top: 20px;
- padding-right: 20px;
- padding-left: 20px;
- float: none;
- display: table-cell;
- vertical-align: top;
- }
- @media (min-width: 1px) {
- .feature>.col-xs-4 {
- height: 250px;
+
+ @media (min-width: 200px) {
+ .carousel-inner{
+ min-height: 500px;
}
- .feature-title-row{
- height: 60px;
+
+ }
+
+ @media (min-width: 768px) {
+ .feature-item{
+ min-height: 200px;
+ }
+ .carousel-inner{
+ min-height: 520px;
}
}
- @media (min-width: 975px) {
- .feature>.col-xs-4 {
- height: 388px;
+ @media (min-width: 992px) {
+ .feature-item{
+ min-height: 220px;
}
- .feature-title-row{
- height: 98px;
+ .carousel-inner{
+ min-height: 580px;
}
}
- @media (min-width: 1200px) {
- .feature>.col-xs-4 {
- height: 307px;
+
+ @media (min-width: 1200px){
+ .feature-item{
+ min-height: 180px;
}
- .feature-title-row{
- height: 77px;
+ .carousel-inner{
+ min-height: 650px;
}
}
- .Scenarios{
- padding: 5px 10px;
- background: black;
- color: white;
+ .feature-item{
+ padding-top: 15px;
+ margin-bottom: 10px;
}
- .carousel-control.left {
- background-image:none;
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
+ .main > div {
+ margin-top: 10px;
}
- .carousel-control.right {
- left: auto;
- right: 0;
- background-image:none;
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
+
+ .home-tittle {
+ color: #fcac45;
+ font-size: x-large;
+ font-weight: 600;
}
- .carousel-indicators > li, .carousel-indicators > .active{
+ .feature {
+ display: table;
+ }
+
+ .Scenarios {
+ padding: 5px 10px;
+ color: white;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .carousel-indicators > li, .carousel-indicators > .active {
height: 3px;
width: 30px;
border-radius: 0px;
margin: 0px;
border: none;
}
- .carousel-indicators > li{
- background-color: rgba(255,255,255,.5);
+
+ .carousel-indicators > li {
+ background-color: rgba(255, 255, 255, .5);
}
- .carousel-indicators > .active{
+
+ .carousel-indicators > .active {
background-color: white;
}
- @media (min-width: 1px) {
- .carousel-indicators {
- bottom: 90px;
- }
- }
- @media (min-width: 1000px) {
- .carousel-indicators {
- bottom: 110px;
- }
- }
- @media (min-width: 1640px) {
- .carousel-indicators {
- bottom: 105px;
- }
- }
- .feature>.col-xs-4>img{
- width:50px;
+ .feature > .col-xs-4 > img {
+ width: 50px;
height: 50px;
- margin:0 8px 8px 0;
+ margin: 0 8px 8px 0;
}
- hr{
- position:absolute;
- bottom:0;
+
+ hr {
+ position: absolute;
+ bottom: 0;
left: 10px;
right: 10px;
- margin:0;
+ margin: 0;
}
- .row>div>img{
- width: 50px;
- height: 50px;
+
+ .row > div > img {
+ width: 40px;
+ height: 40px;
+ margin-left: 3px;
}
- .feature-title>p{
+ .feature-title > p {
font-size: medium;
+ margin-left: 5px;
+ margin-bottom: 0;
+ }
+
+ .feature-content {
+ margin-top: 5px;
+ }
+
+ article {
+ text-align: justify;
+ }
+
+ article p {
+ font-size: 16px;
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+ }
+
+ .feature-item p {
+ font-size: 14px;
+ }
+
+ .Scenarios > article > p {
+ font-size: 14px;
+ }
+
+ .Scenarios > h1 {
+ margin-top: 0;
+ font-size: 30px;
+ color: #fcac45;
}
</style>
diff --git a/src/views/LatestDoc.vue b/src/views/LatestDoc.vue
new file mode 100644
index 0000000..d923997
--- /dev/null
+++ b/src/views/LatestDoc.vue
@@ -0,0 +1,98 @@
+<template>
+ <div>
+ <div class="container">
+ <div class="row markdown-body">
+ <div class="col-sm-8">
+ <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ </div>
+ <my-sidebar/>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
+ <footer-bar/>
+ </div>
+</template>
+
+<script>
+ import Footer from "../components/FooterFixed"
+ import SideBar from '../components/SideBar'
+ import markdown from 'vue-markdown'
+ import axios from 'axios'
+ import Golbal from '../components/Global'
+
+ export default {
+ name: "Community",
+ components: {
+ 'footer-bar': Footer,
+ 'my-sidebar': SideBar,
+ 'vue-markdown': markdown,
+ },
+ data() {
+ return {
+ msg: 'Welcome to Community Page',
+ md: "",
+ toc: "",
+ }
+ },
+ created() {
+ this.fetchData();
+ },
+ watch: {
+ '$route': 'fetchData'
+ },
+ methods: {
+ content: function () {
+ return this.$route.params.doc
+ },
+ fetchData() {
+ const dict = {
+ "Quick Start": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Documentation/QuickStart.md",
+ "Frequently asked questions": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ '/docs/Documentation/Frequently%20asked%20questions.md',
+ };
+ const content = this.content();
+ let url = null;
+ if (content in dict) {
+ url = dict[content];
+ } else {
+ this.$router.push('/404');
+ }
+ const pointer = this;
+ axios.get(url)
+ .then(function (response) {
+ pointer.md = response.data;
+ })
+ },
+ parse(html){
+ return Golbal.isReadyForPrerender(html)
+ }
+ }
+ }
+</script>
+<style scoped>
+ h1, h2 {
+ font-weight: normal;
+ }
+
+ body {
+ font-family: Georgia, "Times New Roman", Times, serif;
+ color: #555;
+ }
+
+ .pager > li > a {
+ width: 140px;
+ padding: 10px 20px;
+ text-align: center;
+ border-radius: 30px;
+ }
+
+ .blog-footer p:last-child {
+ margin-bottom: 0;
+ }
+
+</style>
diff --git a/src/views/Materials.vue b/src/views/Materials.vue
new file mode 100644
index 0000000..6627cc6
--- /dev/null
+++ b/src/views/Materials.vue
@@ -0,0 +1,58 @@
+<template>
+ <div>
+ <div class="container">
+ <div class="row markdown-body">
+ <div class="col-sm-8">
+
+ <h2>Other Materials</h2>
+ <ul>
+ <li v-for="item in items" style="margin: 5px">
+ <a :href="item.url" v-if="item.isDownloadable">{{item.content}}</a>
+ <router-link :to="item.url" v-else style="font-size: 16px">{{item.content}}</router-link>
+ </li>
+ </ul>
+ </div>
+ <my-sidebar/>
+ </div>
+ </div>
+
+ <footer-bar/>
+ </div>
+</template>
+
+<script>
+ import Footer from "../components/FooterFixed"
+ import SideBar from '../components/SideBar'
+ import Golbal from '../components/Global'
+
+ export default {
+ name: "Materials",
+ components: {
+ 'footer-bar': Footer,
+ 'my-sidebar': SideBar
+ },
+ data() {
+ return {
+ items: [
+ {'content': "Sample Data", 'url': Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Documentation/OtherMaterial-Sample%20Data.txt",
+ "isDownable" : true},
+ {'content': "Release Notes", 'url': "/Materials/Release Notes", "isDownloadable" : false},
+ {'content': "Examples", 'url': "/Example", "isDownloadable" : false},
+ {'content': "References", 'url': "/Materials/References","isDownloadable" : false},
+ ]
+ }
+ },
+ }
+</script>
+
+<style scoped>
+ .main>div {
+ margin-top: 10px;
+ }
+
+ li {
+ font-size: 16px;
+ }
+</style>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000..51313ef
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,31 @@
+<template>
+ <div>
+ <div class="container">
+ <div class="row text-center info">
+ <h1 style="font-size: 120px; padding-top: 100px">4 0 4</h1>
+ <h1 style="font-weight: bolder">PAGE NOT FOUND</h1>
+ <p>The page you are looking for was moved, removed,<br />
+ renamed or might never existed.</p>
+ <a href="#/" class="link-color btn">Go Home</a>
+ </div>
+ </div>
+ <footer-bar/>
+ </div>
+</template>
+
+<script>
+ import 'highlight.js/styles/github.css'
+ import Footer from "../components/FooterFixed"
+ export default {
+ name: "NotFound",
+ components: {
+ 'footer-bar': Footer
+ }
+ }
+</script>
+
+<style scoped>
+ .link-color {
+ color: #fcac45;
+ }
+</style>
diff --git a/src/views/SingleMaterial.vue b/src/views/SingleMaterial.vue
new file mode 100644
index 0000000..fb8d4cf
--- /dev/null
+++ b/src/views/SingleMaterial.vue
@@ -0,0 +1,97 @@
+<template>
+ <div>
+ <div class="container">
+ <div class="row markdown-body">
+ <div class="col-sm-8">
+ <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ </div>
+ <my-sidebar/>
+ </div>
+ </div>
+ <footer-bar/>
+ </div>
+</template>
+
+<script>
+ import Footer from "../components/FooterFixed"
+ import SideBar from '../components/SideBar'
+ import markdown from 'vue-markdown'
+ import axios from 'axios'
+ import Golbal from '../components/Global'
+
+ export default {
+ name: "SingleMaterial",
+ components: {
+ 'footer-bar': Footer,
+ 'my-sidebar': SideBar,
+ 'vue-markdown': markdown,
+ },
+ data() {
+ return {
+ msg: 'Welcome to Community Page',
+ md: "",
+ toc: "",
+ }
+ },
+ created() {
+ this.fetchData();
+ },
+ watch: {
+ '$route': 'fetchData'
+ },
+ methods: {
+ content: function () {
+ return this.$route.params.doc
+ },
+ fetchData() {
+ const dict = {
+ "Release Notes": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Documentation/OtherMaterial-ReleaseNotes"+
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['version']+
+ ".md",
+ "References": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Documentation/OtherMaterial-Reference.md",
+ };
+ const content = this.content();
+ let url = null;
+ if (content in dict) {
+ url = dict[content];
+ } else {
+ this.$router.push('/404');
+ }
+ const pointer = this;
+ axios.get(url)
+ .then(function (response) {
+ pointer.md = response.data;
+ })
+ },
+ parse(html){
+ return Golbal.isReadyForPrerender(html)
+ }
+ }
+ }
+</script>
+<style scoped>
+ h1, h2 {
+ font-weight: normal;
+ }
+
+ body {
+ font-family: Georgia, "Times New Roman", Times, serif;
+ color: #555;
+ }
+
+ .pager > li > a {
+ width: 140px;
+ padding: 10px 20px;
+ text-align: center;
+ border-radius: 30px;
+ }
+
+ .blog-footer p:last-child {
+ margin-bottom: 0;
+ }
+
+</style>
diff --git a/src/views/SingleTool.vue b/src/views/SingleTool.vue
new file mode 100644
index 0000000..073f87b
--- /dev/null
+++ b/src/views/SingleTool.vue
@@ -0,0 +1,109 @@
+<template>
+ <div>
+ <div class="container">
+ <div class="row markdown-body">
+ <div class="col-sm-8">
+ <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ </div>
+ <my-sidebar/>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
+ <footer-bar/>
+ </div>
+</template>
+
+<script>
+ import Footer from "../components/FooterFixed"
+ import SideBar from '../components/SideBar'
+ import markdown from 'vue-markdown'
+ import axios from 'axios'
+ import Golbal from '../components/Global'
+
+ export default {
+ name: "SingleTool",
+ components: {
+ 'footer-bar': Footer,
+ 'my-sidebar': SideBar,
+ 'vue-markdown': markdown,
+ },
+ data() {
+ return {
+ msg: 'Welcome to Tool Page',
+ md: "",
+ toc: "",
+ }
+ },
+ created() {
+ this.fetchData();
+ },
+ watch: {
+ '$route': 'fetchData'
+ },
+ methods: {
+ content: function () {
+ return this.$route.params.content
+ },
+ fetchData() {
+ const dict = {
+ "Cli": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Documentation/UserGuide" +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['version'] + "/7-Tools-Cli.md",
+ "Grafana": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Documentation/UserGuide" +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['version'] + "/7-Tools-Grafana.md",
+ "Hadoop": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Documentation/UserGuide" +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['version'] + "/7-Tools-Hadoop.md",
+ "Spark": Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['doc-prefix'] +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['branch'] +
+ "/docs/Documentation/UserGuide" +
+ Golbal.SUPPORT_VERSION[Golbal.LATEST_VERSION]['version'] + "/7-Tools-spark.md",
+ };
+ const content = this.content();
+ console.log(content);
+ let url = null;
+ if (content in dict) {
+ url = dict[content];
+ } else {
+ this.$router.push('/404');
+ }
+ const pointer = this;
+ axios.get(url)
+ .then(function (response) {
+ pointer.md = response.data;
+ })
+ },
+ parse(html){
+ return Golbal.isReadyForPrerender(html)
+ }
+ }
+ }
+</script>
+<style scoped>
+ h1, h2 {
+ font-weight: normal;
+ }
+
+ body {
+ font-family: Georgia, "Times New Roman", Times, serif;
+ color: #555;
+ }
+
+ .pager > li > a {
+ width: 140px;
+ padding: 10px 20px;
+ text-align: center;
+ border-radius: 30px;
+ }
+
+ .blog-footer p:last-child {
+ margin-bottom: 0;
+ }
+
+</style>
diff --git a/src/views/Tools.vue b/src/views/Tools.vue
index c5a5201..f4726e2 100644
--- a/src/views/Tools.vue
+++ b/src/views/Tools.vue
@@ -1,343 +1,253 @@
<template>
- <div class="backgroundImage">
- <div class="main container" style="width:95%">
+ <div>
+ <div class="container">
<br>
<div class="row">
- <!--<div class="row" style="height:0px;padding-bottom:25%;">-->
- <div class="col-xs-6">
- <div class="backgroundDiv">
+ <div class="col-lg-8">
+ <div class="scene">
<img src="../assets/img/tools.jpg">
</div>
</div>
- <div class="col-xs-6">
- <div class="introductionDiv">
- <p style="color:white">Introduction of copywriting(coming soon...)</p>
+ <div class="col-lg-4">
+ <div class="introduction">
+ <p><b>IoTDB</b> is an open-source time series database developed by THULab(link) which is written in JAVA.
+ In order
+ to enable IoTDB to more fully support the application of time series data, we have developed a few tools
+ for IoTDB expansion.
+ </p>
+ <ul>
+ <li><b>SQL-Like Client(Cli).</b> The Client is developed for users to interact with IoTDB engine in command line.</li>
+ <li><b>Spark & Hadoop Connector.</b> IoTDB can be also efficiently integrated with other computing frameworks in big data ecosystems (Hadoop and Spark) for advanced data analytics.
+ </li>
+ <li><b>Grafana.</b> Grafana is developed for users to visualize time series data in IoTDB using Grafana.</li>
+ </ul>
</div>
</div>
</div>
- <br>
- <hr/>
- <br>
- <div class="row">
- <div class="col-xs-3">
- <div class="toolDiv sidebar thumbnail">
- <div class="sidebar-module sidebar-module-inset">
- <h1 style="color: white;text-align:center">IoTDB-Cli</h1>
- <p style="color: white;text-align:center;font-size: large">Client tool used to read and <br>write data
- from IoTDB</p>
- <br>
- <hr/>
- <!-- 标准的按钮 -->
- <div style="text-align:center; margin-top:30px;">
- <button data-toggle="modal" data-target="#myModal" type="button"
- class="toolDownloadButton btn btn-default">
- Download
- </button>
- <!-- 模态框（Modal） -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
- aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
- aria-hidden="true">×</span></button>
- <h2 class="modal-title">Coming soon...</h2>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal -->
- </div>
- <br>
- <br>
- </div>
- <div style="text-align:center;margin-top:10px;">
- <button data-toggle="modal" data-target="#myModal" type="button"
- class="toolDocumentationButton btn btn-default">
- <font color="white">Documentation</font>
- </button>
- <!-- 模态框（Modal） -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
- aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
- aria-hidden="true">×</span></button>
- <h2 class="modal-title">Coming soon...</h2>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal -->
- </div>
- <br>
- <br>
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-3">
- <div class="toolDiv sidebar thumbnail">
- <div class="sidebar-module sidebar-module-inset">
- <h1 style="color: white;text-align:center">Grafana Connector</h1>
- <p style="color: white;text-align:center;font-size: large"">Time Series Data<br>Visualization</p>
- <br>
- <hr/>
- <!-- 标准的按钮 -->
- <div style="text-align:center;margin-top:30px;">
- <button data-toggle="modal" data-target="#myModal" type="button"
- class="toolDownloadButton btn btn-default">
- Download
- </button>
- <!-- 模态框（Modal） -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
- aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
- aria-hidden="true">×</span></button>
- <h2 class="modal-title">Coming soon...</h2>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal -->
- </div>
- <br>
- <br>
- </div>
- <div style="text-align:center;margin-top:10px;">
- <button data-toggle="modal" data-target="#myModal" type="button"
- class="toolDocumentationButton btn btn-default">
- <font color="white">Documentation</font>
- </button>
- <!-- 模态框（Modal） -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
- aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
- aria-hidden="true">×</span></button>
- <h2 class="modal-title">Coming soon...</h2>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal -->
- </div>
- <br>
- <br>
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-3">
- <div class="toolDiv sidebar thumbnail">
- <div class="sidebar-module sidebar-module-inset">
- <h1 style="color: white;text-align:center">Hadoop Connector</h1>
- <p style="color: white;text-align:center;font-size: large">Connector tool to use Hadoop<br>to process data
- from IoTDB </p>
- <br>
- <hr/>
- <!-- 标准的按钮 -->
- <div style="text-align:center;margin-top:30px;">
- <button data-toggle="modal" data-target="#myModal" type="button"
- class="toolDownloadButton btn btn-default">
- Download
- </button>
- <!-- 模态框（Modal） -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
- aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
- aria-hidden="true">×</span></button>
- <h2 class="modal-title">Coming soon...</h2>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal -->
+ <div class="blank-row"></div>
+ <div class="tools">
+ <div class="row">
+ <div v-for="tool in Tools">
+ <div class="col-md-6 col-lg-3">
+ <div class="tool thumbnail">
+ <h3>{{tool.header}}</h3>
+ <div class="content">
+ <p v-html="tool.content"></p>
</div>
- <br>
- <br>
- </div>
- <div style="text-align:center;margin-top:10px;">
- <button data-toggle="modal" data-target="#myModal" type="button"
- class="toolDocumentationButton btn btn-default">
- <font color="white">Documentation</font>
- </button>
- <!-- 模态框（Modal） -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
- aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
- aria-hidden="true">×</span></button>
- <h2 class="modal-title">Coming soon...</h2>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal -->
+ <hr style="border-top: 1px solid rgb(100,100,100)"/>
+ <div class="tool-download">
+ <button type="button"
+ class="tool-download-button btn btn-default">
+ <a v-bind:href="tool.download">
+ <p style="font-size: medium;margin:0px 5px 0px 5px">Download</p>
+ </a>
+ </button>
</div>
- <br>
- <br>
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-3">
- <div class="toolDiv sidebar thumbnail">
- <div class="sidebar-module sidebar-module-inset">
- <h1 style="color: white;text-align:center">Spark Connector</h1>
- <p style="color: white;text-align:center;font-size: large">Connector tool to use spark<br>to process data
- from IoTDB </p>
- <br>
- <hr/>
- <!-- 标准的按钮 -->
- <div style="text-align:center;margin-top:30px;">
- <!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"-->
- <!--style="border-radius: 20px;width: 80%;background: #fcac45;font-size: medium;font-weight: bold;border: 2px solid #fcac45;">-->
- <button data-toggle="modal" data-target="#myModal" type="button"
- class="toolDownloadButton btn btn-default">
- Download
- </button>
- <!-- 模态框（Modal） -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
- aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
- aria-hidden="true">×</span></button>
- <h2 class="modal-title">Coming soon...</h2>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal -->
+ <div class="brank-row"></div>
+ <div class="tool-documentation">
+ <button type="button" class="tool-documentation-button btn btn-default">
+ <router-link :to=tool.documentation>
+ <p style="color: white; font-size: medium;margin:0px 5px 0px 5px">Documentation</p>
+ </router-link>
+ </button>
+ <br>
</div>
- <br>
- <br>
- </div>
- <div style="text-align:center;margin-top:10px;">
- <button data-toggle="modal" data-target="#myModal" type="button"
- class="toolDocumentationButton btn btn-default">
- <font color="white">Documentation</font>
- </button>
- <!-- 模态框（Modal） -->
- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
- aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
- aria-hidden="true">×</span></button>
- <h2 class="modal-title">Coming soon...</h2>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal -->
- </div>
- <br>
- <br>
</div>
</div>
</div>
</div>
</div>
</div>
+ <footer-bar/>
</div>
</template>
<script>
-
- export default {
- name: "Tools",
- data() {
- return {
- msg: 'Welcome to Tools Page'
- }
+ import Footer from "../components/FooterFixed"
+
+ export default {
+ name: "Tools",
+ components: {
+ 'footer-bar': Footer
+ },
+ data() {
+ return {
+ "Tools": [
+ {
+ "header": "IoTDB-Cli",
+ "content": "Client tool used to read and <br/>write data",
+ "download": this.GLOBAL.downloadIotdbCli,
+ "documentation": "/Tools/Cli"
+ },
+ {
+ "header": "Grafana Connector",
+ "content": "Time Series Data<br/>Visualization",
+ "download": this.GLOBAL.downloadGrafanaConnector,
+ "documentation": "/Tools/Grafana"
+ },
+ {
+ "header": "Hadoop Connector",
+ "content": "Connector tool to use Hadoop to process data from IoTDB",
+ "download": this.GLOBAL.downloadHadoopConnector,
+ "documentation": "/Tools/Hadoop"
+ },
+ {
+ "header": "Spark Connector",
+ "content": "Connector tool to use spark<br/>to process data",
+ "download": this.GLOBAL.downloadSparkConnector,
+ "documentation": "/Tools/Spark"
+ }
+ ]
}
- }
-
+ },
+ methods: {}
+ }
</script>
<style scoped>
- h1, h2 {
- font-weight: normal;
+
+ .scene {
+ /*border: 1px solid;*/
+ /*border-radius: 1px;*/
+ /*padding: 10px;*/
+ background: white;
+ float: left;
}
- div > p {
- margin-top: 10px;
+ .scene > img {
+ width: 100%;
+ height: auto;
+ display: block;
}
- .feature > div {
+ .introduction {
+ border: 1px solid;
+ border-radius: 2px;
+ border-color: rgb(89，93，105);
+ border-style: dashed;
+ /*background-color: rgb(56,56,68);*/
+ /*margin: 2px 2px 2px 2px;*/
+ float: right;
+ height: 100%;
+ overflow: auto;
+ padding: 15px 15px 25px 15px;
+ }
+
+ .introduction > p {
+ /*color: white;*/
+ color: black;
+ font-size: medium;
+ word-break: break-all;
+ font-size: 14px;
+ line-height: 1.6;
}
- p > img {
- width: 50px;
- height: 50px;
+ .introduction > ul {
+ /*color: white;*/
+ color: black;
+ word-break: break-all;
+ font-size: 14px;
+ padding-left: 20px;
+ /*letter-spacing:0.5px;*/
+ line-height: 1.6;
}
- .col-xs-4 > p {
- font-size: smaller;
+ .introduction > p > b {
+ color: #fcac45;
+ font-size: 20px;
}
- .feature > .col-xs-4 {
- border-bottom: 2px solid #eff0f8;
- padding: 10px;
- float: none;
- display: table-cell;
- vertical-align: top;
+ .introduction > ul > li > b {
+ color: #fcac45;
+ }
+ .tool {
+ text-align: center;
+ border: 2px solid;
+ background: rgb(49,49,60);
+ padding: 20px 20px;
+ width: 98%;
}
- .backgroundImage {
-/* background: url('../assets/img/background.jpg') no-repeat;*/
- /*background-size: 100px auto;*/
+ .content {
+ height: 80px;
}
- .backgroundDiv {
- border: 2px solid;
- border-radius: 20px;
- -moz-border-radius: 20px; /* Old Firefox */
- margin: 10px 10px 10px 10px;
- padding: 10px;
- background: white;
+ .content > p {
+ color: white;
+ text-align: center;
+ font-size: small;
+ margin-bottom: 0;
}
- .backgroundDiv > img {
- width: 100%;
- height: auto;
- display: block;
+ .tool > h3 {
+ color: white;
+ text-align: center;
+ height: 40px;
}
- .introductionDiv {
- border: 2px solid;
- border-radius: 20px;
- -moz-border-radius: 20px; /* Old Firefox */
- margin: 10px 10px 10px 10px;
- padding: 10px;
- background: black;
+ .tool > p {
+ color: white;
+ text-align: center;
+ font-size: small;
}
- .toolDiv {
- border: 6px solid;
- border-radius: 20px;
- -moz-border-radius: 20px; /* Old Firefox */
- background: black;
- padding: 20px 20px;
- width: 100%;
+ .tool-download {
+ text-align: center;
+ margin-top: 30px;
}
- .toolDownloadButton {
- border-radius: 20px;
- width: 80%;
+ .tool-documentation {
+ text-align: center;
+ margin-top: 10px;
+ }
+
+ .tool-download-button {
+ border-radius: 6px;
+ width: 90%;
background: #fcac45;
font-size: x-large;
- font-weight: bold;
- border: 2px solid #fcac45;
+ border: 1px solid #fcac45;
+ }
+
+ .tool-download-button > a:hover, a:visited, a:link, a:active {
+ color: white;
}
- .toolDocumentationButton {
- border-radius: 20px;
- width: 80%;
- background: black;
+ .tool-documentation-button {
+ border-radius: 6px;
+ width: 90%;
+ background: rgb(56,56,68);
font-size: x-large;
- font-weight: bold;
- border: 2px solid #fcac45;
+ border: 1px solid #fcac45;
+ }
+
+ .tools .col-lg-3 {
+ margin-bottom: 20px;
+ text-align: center;
+ }
+
+ .tools .col-lg-3 p {
+ margin-right: 10px;
+ margin-left: 10px;
}
+
+ .tools h2 {
+ font-weight: normal;
+ }
+
+ .tools h1 {
+ font-weight: normal;
+ }
+
+ .blank-row {
+ height: 25px;
+ }
+
+ .content > p {
+ font-size: 16px;
+ }
+
+
</style>