commit 240316835dda4f5a336407a11a9851dbf179ee97
parent 3b189eb1f16c1e8588597d2aab06b03ed8c55fbe
Author: MTRNord <mtrnord1@gmail.com>
Date: Mon, 19 Jun 2017 06:07:40 +0200
Initial Webpack
Signed-off-by: MTRNord <mtrnord1@gmail.com>
Diffstat:
16 files changed, 386 insertions(+), 0 deletions(-)
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["react", "es2015", "es2016", "es2017"],
+ "plugins": ["transform-class-properties", "transform-object-rest-spread", "transform-async-to-generator", "transform-runtime", "add-module-exports"]
+}
+\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,35 @@
+module.exports = {
+ "env": {
+ "es6": true,
+ "browser": true
+ },
+ "parserOptions": {
+ "ecmaFeatures": {
+ "experimentalObjectRestSpread": true,
+ "jsx": true
+ },
+ "sourceType": "module"
+ },
+ "parser": "babel-eslint",
+ "plugins": [
+ "react"
+ ],
+ "rules": {
+ "indent": [
+ "error",
+ 4
+ ],
+ "linebreak-style": [
+ "error",
+ "unix"
+ ],
+ "quotes": [
+ "error",
+ "single"
+ ],
+ "semi": [
+ "error",
+ "always"
+ ]
+ }
+};
+\ No newline at end of file
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="ProjectTasksOptions" suppressed-tasks="Less;SCSS" />
+</project>
+\ No newline at end of file
diff --git a/package.json b/package.json
@@ -0,0 +1,66 @@
+{
+ "name": "iot-webpage",
+ "version": "0.0.1",
+ "description": "A webpage made for managing Iot Sensors",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "build": "cross-env NODE_ENV=production webpack -p --progress",
+ "start": "cross-env NODE_ENV=production webpack-dev-server --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/Nordgedanken/Iot-Webpage.git"
+ },
+ "author": "MTRNord <mtrnord1@gmail.com>",
+ "license": "GPL-3.0",
+ "bugs": {
+ "url": "https://github.com/Nordgedanken/Iot-Webpage/issues"
+ },
+ "homepage": "https://github.com/Nordgedanken/Iot-Webpage#readme",
+ "dependencies": {
+ "babel-polyfill": "^6.23.0",
+ "babel-runtime": "^6.23.0",
+ "classnames": "^2.2.5",
+ "postcss-cssnext": "^2.11.0",
+ "react": "^15.6.1",
+ "react-dom": "^15.6.1",
+ "react-toolbox": "^2.0.0-beta.12",
+ "react-web-notification": "^0.2.4"
+ },
+ "devDependencies": {
+ "babel-core": "^6.25.0",
+ "babel-loader": "^7.0.0",
+ "babel-plugin-add-module-exports": "^0.2.1",
+ "babel-plugin-transform-async-to-generator": "^6.24.1",
+ "babel-plugin-transform-class-properties": "^6.24.1",
+ "babel-plugin-transform-object-rest-spread": "^6.23.0",
+ "babel-plugin-transform-runtime": "^6.23.0",
+ "babel-preset-es2015": "^6.24.1",
+ "babel-preset-es2016": "^6.24.1",
+ "babel-preset-es2017": "^6.24.1",
+ "babel-preset-react": "^6.24.1",
+ "copy-webpack-plugin": "^4.0.1",
+ "cross-env": "^5.0.1",
+ "css-loader": "^0.28.4",
+ "eslint": "^4.0.0",
+ "eslint-plugin-react": "^7.1.0",
+ "extract-text-webpack-plugin": "^2.1.2",
+ "html-webpack-plugin": "^2.28.0",
+ "node-sass": "^4.5.3",
+ "postcss-extend": "^1.0.5",
+ "postcss-import": "^10.0.0",
+ "postcss-loader": "^2.0.6",
+ "postcss-mixins": "^6.0.0",
+ "postcss-nested": "^2.0.2",
+ "postcss-scss": "^1.0.1",
+ "postcss-simple-vars": "^4.0.0",
+ "postcss-strip-inline-comments": "^0.1.5",
+ "react-toolbox-themr": "^1.0.2",
+ "sass-loader": "^6.0.6",
+ "source-map-loader": "^0.2.1",
+ "style-loader": "^0.18.2",
+ "webpack": "^2.6.1",
+ "webpack-dev-server": "^2.4.5"
+ }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+ plugins: [
+ require('postcss-import')(),
+ require('autoprefixer')(),
+ require('postcss-simple-vars')(),
+ require('postcss-extend')(),
+ require('postcss-nested')(),
+ require('postcss-mixins')(),
+ require('postcss-strip-inline-comments')(),
+ ],
+ 'parser': 'postcss-scss',
+ 'local-plugins': true,
+};
+\ No newline at end of file
diff --git a/postcss.css.config.js b/postcss.css.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: [
+ require('postcss-cssnext')(),
+ ],
+ 'local-plugins': true,
+};
+\ No newline at end of file
diff --git a/res/manifest.json b/res/manifest.json
@@ -0,0 +1,6 @@
+{
+ "short_name": "Iot Panel",
+ "name": "Iot Control Panel for multiple Sensors",
+ "start_url": "index.html",
+ "display": "standalone"
+}
+\ No newline at end of file
diff --git a/src/css/button.scss b/src/css/button.scss
@@ -0,0 +1,14 @@
+@value buttonPrimaryColor, buttonPrimaryBackgroundColor, buttonPrimaryDisabledBackgroundColor from "./variables.scss";
+
+@value button-border-radius: 4px;
+@value button-squared-min-width: 12em;
+
+.primary {
+ float: right;
+ color: buttonPrimaryColor !important;
+ background-color: buttonPrimaryBackgroundColor !important;
+
+ &.flat {
+ background-color: buttonPrimaryDisabledBackgroundColor !important;
+ }
+}
+\ No newline at end of file
diff --git a/src/css/datepicker.scss b/src/css/datepicker.scss
@@ -0,0 +1,9 @@
+.title {
+ /* Work around for misalignment in React-Toolbox - the left/right buttons are 3.6rem and title is 3.0rem by default */
+ line-height: 3.6rem!important;
+}
+
+/* Work around for bug in React-Toolbox 2.0 */
+.next > span, .prev > span {
+ vertical-align: top!important;
+}
+\ No newline at end of file
diff --git a/src/css/variables.scss b/src/css/variables.scss
@@ -0,0 +1,8 @@
+@value buttonPrimaryColor: #ffffff;
+@value buttonPrimaryBackgroundColor: #9c3990;
+@value buttonPrimaryDisabledBackgroundColor: #cccccc;
+
+/* global React-Toolbox overrides - THESE MUST BE NAMED EXACTLY LIKE THIS */
+@value color-primary: var(--palette-deep-purple-500);
+@value color-primary-dark: var(--palette-deep-purple-700);
+@value color-text: #444548;
+\ No newline at end of file
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+ <link rel="manifest" href="/manifest.json">
+ <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+ rel="stylesheet">
+ <style type="text/css">
+ html,body { height: 100%; margin: 0px; padding: 0px; font-family: 'Roboto', sans-serif; }
+ #content { height: 100%; }
+ </style>
+</head>
+<body>
+ <div id="content"></div>
+ <noscript>Sorry, Riot requires JavaScript to be enabled.</noscript>
+</body>
+</html>
+\ No newline at end of file
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppBar, Checkbox, IconButton } from 'react-toolbox';
+import { Layout, NavDrawer, Panel, Sidebar } from 'react-toolbox';
+import { ThemeProvider } from 'react-css-themr';
+import theme from './theme';
+import Home from './pages/Home';
+import Notification from 'react-web-notification';
+
+//allow react dev tools work
+window.React = React;
+
+class Index extends React.Component {
+ constructor() {
+ super();
+ this.state = {
+ drawerActive: false
+ };
+ }
+
+ toggleDrawerActive = () => {
+ this.setState({ drawerActive: !this.state.drawerActive });
+ };
+
+ render() {
+ return (
+ <div>
+ <ThemeProvider theme={theme}>
+ <Layout className="main_content">
+ <NavDrawer active={this.state.drawerActive}
+ onOverlayClick={ this.toggleDrawerActive }>
+ <p>
+ Navigation, account switcher, etc. go here.
+ </p>
+ </NavDrawer>
+ <Panel>
+ <AppBar leftIcon='menu' onLeftIconClick={ this.toggleDrawerActive } />
+ <div>
+ <h1>Main Content</h1>
+ <Home/>
+ </div>
+ </Panel>
+ </Layout>
+ </ThemeProvider>
+ <Notification title="test" />
+ </div>
+ );
+ }
+}
+
+ReactDOM.render(<Index/>, document.getElementById('content'));
+\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
@@ -0,0 +1,6 @@
+.main_content {
+ display: inline-block !important;
+ flex: 1;
+ padding: 1.8rem;
+ text-align: center;
+}
+\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Card, CardMedia, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
+import {Button} from 'react-toolbox/lib/button';
+
+class Home extends React.Component {
+ render() {
+ return (
+ <Card style={{width: '350px'}}>
+ <CardTitle
+ avatar="https://placeimg.com/80/80/animals"
+ title="Avatar style title"
+ subtitle="Subtitle here"
+ />
+ <CardMedia
+ aspectRatio="wide"
+ image="https://placeimg.com/800/450/nature"
+ />
+ <CardTitle
+ title="Title goes here"
+ subtitle="Subtitle here"
+ />
+ <CardText>test</CardText>
+ <CardActions>
+ <Button label="Action 1" />
+ <Button label="Action 2" />
+ </CardActions>
+ </Card>
+ );
+ }
+}
+export default Home;
+\ No newline at end of file
diff --git a/src/theme.js b/src/theme.js
@@ -0,0 +1,6 @@
+import RTButton from './css/button.scss';
+import RTDatePicker from './css/datepicker.scss';
+
+export default {
+ RTButton, RTDatePicker,
+};
+\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,93 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+ entry: {
+ 'bundle': './src/index.js',
+ 'theme': './src/index.scss'
+ },
+ module: {
+ rules: [
+ { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre', exclude: /node_modules/, },
+ { test: /\.js$/, loader: 'babel-loader', include: path.resolve('./src'), options: {sourceMap: true}, exclude: /node_modules/, },
+ {
+ test: /\.s?css$/,
+ use: ExtractTextPlugin.extract({
+ use: [
+ {loader: 'css-loader', options: {modules: true, minimize: true, importLoaders: 1, sourceMap: true}},
+ {loader: 'postcss-loader', options: {path: './postcss.config.js', sourceMap: true}}
+ ]
+ })
+ },
+ ]
+ },
+ output: {
+ path: path.join(__dirname, 'webapp'),
+
+ // the generated js (and CSS, from the ExtractTextPlugin) are put in a
+ // unique subdirectory for the build. There will only be one such
+ // 'bundle' directory in the generated tarball; however, hosting
+ // servers can collect 'bundles' from multiple versions into one
+ // directory and symlink it into place - this allows users who loaded
+ // an older version of the application to continue to access webpack
+ // chunks even after the app is redeployed.
+ //
+ filename: 'bundles/[hash]/[name].js',
+ chunkFilename: 'bundles/[hash]/[name].js',
+ devtoolModuleFilenameTemplate: function(info) {
+ // Reading input source maps gives only relative paths here for
+ // everything. Until I figure out how to fix this, this is a
+ // workaround.
+ // We use the relative resource path with any '../'s on the front
+ // removed which gives a tree with matrix-react-sdk and vector
+ // trees smashed together, but this fixes everything being under
+ // various levels of '.' and '..'
+ // Also, sometimes the resource path is absolute.
+ return path.relative(process.cwd(), info.resourcePath).replace(/^[\/\.]*/, '');
+ },
+ },
+ plugins: [
+ new CopyWebpackPlugin([{ from: './res', to: './' }]),
+ new webpack.DefinePlugin({
+ 'process.env': {
+ NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+ },
+ }),
+
+ new HtmlWebpackPlugin({
+ template: './src/index.html',
+
+ // we inject the links ourselves via the template, because
+ // HtmlWebpackPlugin wants to put the script tags either at the
+ // bottom of <head> or the bottom of <body>, and I'm a bit scared
+ // about moving them.
+ inject: true,
+ }),
+ new ExtractTextPlugin({
+ filename: 'bundles/[hash]/[name].css',
+ allChunks: true,
+ }),
+ ],
+ resolve: {
+ extensions: ['.css', '.scss', '.js', '.json'],
+ alias: {
+ // alias any requires to the react module to the one in our path, otherwise
+ // we tend to get the react source included twice when using npm link.
+ 'react': path.resolve('./node_modules/react'),
+ 'react-dom': path.resolve('./node_modules/react-dom'),
+ },
+ },
+ devServer: {
+ // serve unwebpacked assets from webapp.
+ contentBase: './webapp',
+
+ stats: {
+ // don't fill the console up with a mahoosive list of modules
+ chunks: false,
+ },
+ },
+ devtool: 'source-map',
+};
+\ No newline at end of file
