frontend stuff with babel and webpack

.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [["env", {
+      "targets": {
+        "chrome": 45,
+        "firefox": 42,
+        "safari": 9,
+        "opera": 32,
+        "edge": 12,
+        "iOS": 9
+      },
+      "loose": true,
+      "useBuiltIns": true
+      }]
+    ],
+  "plugins": [
+  ]
+}

.gitignore

@@ -26,3 +26,6 @@ _vimrc_local.vim
 # Composer files
 /vendor/
 /composer.lock
+
+node_modules
+public/assets

composer.json

@@ -19,8 +19,7 @@
         "illuminate/container": "5.5.*",
         "psr/container": "^1.0",
         "psr/log": "^1.0",
-        "symfony/http-foundation": "^3.3",
+        "symfony/http-foundation": "^3.3"
-        "twbs/bootstrap": "^3.3"
     },
     "require-dev": {
         "filp/whoops": "^2.1",

js/vendor.js

@@ -0,0 +1,31 @@
+import 'imports-loader?module=>false!jquery';
+import 'imports-loader?define=>false!jquery-ui';
+import 'bootstrap';
+import 'imports-loader?define=>false&exports=>false!bootstrap-datepicker';
+import 'bootstrap-datepicker/js/locales/bootstrap-datepicker.de';
+import 'bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css';
+import 'imports-loader?this=>window!chart.js';
+import 'imports-loader?this=>window&define=>false&exports=>false!moment';
+import 'imports-loader?this=>window&define=>false&exports=>false!moment/locale/de';
+import './forms';
+import './sticky-headers';
+import 'icomoon/style.css';
+
+$(function () {
+    moment.locale("%locale%");
+});
+
+$(document).ready(function () {
+    if (typeof moment !== "undefined") {
+        $.each($(".moment-countdown"), function (i, e) {
+            var span = $(e);
+            var text = span.html();
+            /* global moment */
+            var timestamp = moment(parseInt(span.attr("data-timestamp") * 1000));
+            span.html(text.replace("%c", timestamp.fromNow()));
+            setInterval(function () {
+                span.html(text.replace("%c", timestamp.fromNow()));
+            }, 1000);
+        });
+    }
+});

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "engelsystem",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/engelsystem/engelsystem.git",
+  "author": "marudor <marudor@marudor.de>",
+  "license": "MIT",
+  "scripts": {
+    "build": "NODE_ENV=production webpack",
+    "build:watch": "webpack --watch"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "bootstrap-datepicker": "^1.7.1",
+    "chart.js": "^1.0.2",
+    "icomoon": "^1.0.0",
+    "jquery": "^2.1.1",
+    "jquery-ui": "^1.11.2",
+    "moment": "^2.8.2",
+    "select2": "^4.0.6-rc.1",
+    "select2-bootstrap-theme": "0.1.0-beta.10"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
+    "css-loader": "^0.28.7",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.6",
+    "imports-loader": "^0.7.1",
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
+    "style-loader": "^0.19.1",
+    "webpack": "^3.10.0"
+  }
+}

public/js/moment-countdown.js

@@ -1,19 +0,0 @@
-/**
- * Initialize all moment countdowns on the page. A moment countdown has the
- * class "moment-countdown" and the attribute "data-timestamp" which defines the
- * countdown's time goal.
- */
-$(document).ready(function () {
-    if (typeof moment !== "undefined") {
-        $.each($(".moment-countdown"), function (i, e) {
-            var span = $(e);
-            var text = span.html();
-            /* global moment */
-            var timestamp = moment(parseInt(span.attr("data-timestamp") * 1000));
-            span.html(text.replace("%c", timestamp.fromNow()));
-            setInterval(function () {
-                span.html(text.replace("%c", timestamp.fromNow()));
-            }, 1000);
-        });
-    }
-});

public/vendor/bootstrap

@@ -1 +0,0 @@
-../../vendor/twbs/bootstrap/dist

public/vendor/bootstrap-datepicker-1.7.1/locales/bootstrap-datepicker.de.min.js

@@ -1 +0,0 @@
-!function(a){a.fn.datepicker.dates.de={days:["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],daysShort:["Son","Mon","Die","Mit","Don","Fre","Sam"],daysMin:["So","Mo","Di","Mi","Do","Fr","Sa"],months:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],monthsShort:["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"],today:"Heute",monthsTitle:"Monate",clear:"Löschen",weekStart:1,format:"dd.mm.yyyy"}}(jQuery);

public/vendor/icomoon/fonts/icomoon.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="512">
-<font-face units-per-em="512" ascent="480" descent="-32" />
-<missing-glyph horiz-adv-x="512" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
-<glyph unicode="&#xe600;" d="M262.158 408.627c-70.507 0-127.664-66.46-127.664-148.443 0-45.996 17.956-87.059 46.202-114.287v-34.156l-179.946-52.779v-94.564l510.657-4.399v94.563l-165.356 59.377h-2.432v31.957c28.247 27.228 46.202 68.291 46.202 114.287 0 81.983-57.157 148.443-127.664 148.443zM262.158 479c-124.226 0-224.932-40.861-224.932-91.265s100.706-91.265 224.932-91.265c124.226 0 224.932 40.861 224.932 91.265s-100.706 91.265-224.932 91.265zM262.158 432.818c102.738 0 186.025-28.553 186.025-63.775s-83.286-63.776-186.025-63.776c-102.738 0-186.025 28.553-186.025 63.776s83.286 63.775 186.025 63.775z" />
-</font></defs></svg>

public/vendor/icomoon/selection.json

@@ -1,74 +0,0 @@
-{
-	"IcoMoonType": "selection",
-	"icons": [
-		{
-			"icon": {
-				"paths": [
-					"M524.315 142.746c-141.014 0-255.328 132.92-255.328 296.886 0 91.993 35.911 174.118 92.405 228.574v68.311l-359.891 105.559v189.127l1021.314 8.797v-189.127l-330.711-118.754h-4.863v-63.913c56.494-54.456 92.405-136.581 92.405-228.574 0-163.965-114.314-296.886-255.328-296.886z",
-					"M524.315 2c-248.453 0-449.864 81.721-449.864 182.53s201.411 182.53 449.864 182.53c248.453 0 449.864-81.721 449.864-182.53s-201.411-182.53-449.864-182.53zM524.315 94.364c205.477 0 372.050 57.106 372.050 127.551s-166.572 127.551-372.050 127.551c-205.477 0-372.050-57.106-372.050-127.551s166.572-127.551 372.050-127.551z"
-				],
-				"attrs": [
-					{},
-					{}
-				],
-				"grid": 0,
-				"tags": [
-					"icon_angel"
-				]
-			},
-			"attrs": [
-				{},
-				{}
-			],
-			"properties": {
-				"order": 4,
-				"id": 0,
-				"prevSize": 32,
-				"code": 58880,
-				"name": "icon_angel",
-				"ligatures": ""
-			},
-			"setIdx": 0,
-			"iconIdx": 0
-		}
-	],
-	"height": 1024,
-	"metadata": {
-		"name": "icomoon"
-	},
-	"preferences": {
-		"fontPref": {
-			"prefix": "icon-",
-			"metadata": {
-				"fontFamily": "icomoon"
-			},
-			"showGlyphs": true,
-			"metrics": {
-				"emSize": 512,
-				"baseline": 6.25,
-				"whitespace": 50
-			},
-			"resetPoint": 58880,
-			"showQuickUse": true,
-			"quickUsageToken": false,
-			"showMetrics": true,
-			"showMetadata": false
-		},
-		"imagePref": {
-			"color": 0,
-			"height": 32,
-			"columns": 16,
-			"margin": 16,
-			"png": false,
-			"sprites": true
-		},
-		"historySize": 100,
-		"showCodes": true,
-		"gridSize": 16,
-		"showLiga": false,
-		"showGrid": true,
-		"showGlyphs": true,
-		"showQuickUse": true,
-		"search": ""
-	}
-}

public/vendor/icomoon/style.css

@@ -1,28 +0,0 @@
-@font-face {
-	font-family: 'icomoon';
-	src:url('fonts/icomoon.eot?-kja6ux');
-	src:url('fonts/icomoon.eot?#iefix-kja6ux') format('embedded-opentype'),
-		url('fonts/icomoon.woff?-kja6ux') format('woff'),
-		url('fonts/icomoon.ttf?-kja6ux') format('truetype'),
-		url('fonts/icomoon.svg?-kja6ux#icomoon') format('svg');
-	font-weight: normal;
-	font-style: normal;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-	font-family: 'icomoon';
-	speak: none;
-	font-style: normal;
-	font-weight: normal;
-	font-variant: normal;
-	text-transform: none;
-	line-height: 1;
-
-	/* Better Font Rendering =========== */
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-.icon-icon_angel:before {
-	content: "\e600";
-}

src/Database/Db.php

@@ -31,6 +31,7 @@ class Db
         try {
             self::$db = new PDO($dsn, $username, $password, $options);
         } catch (PDOException $e) {
+            var_dump($e);
             return false;
         }
 

templates/layout.html

@@ -4,11 +4,8 @@
     <title>%title% - Engelsystem</title>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="css/theme%theme%.css"/>
+    <link rel="stylesheet" type="text/css" href="assets/theme%theme%.css"/>
-    <link rel="stylesheet" type="text/css" href="vendor/icomoon/style.css"/>
+    <script type="text/javascript" src="assets/vendor.js"></script>
-    <link rel="stylesheet" type="text/css" href="vendor/bootstrap-datepicker-1.7.1/css/bootstrap-datepicker3.min.css"/>
-    <script type="text/javascript" src="vendor/jquery-2.1.1.min.js"></script>
-    <script type="text/javascript" src="vendor/jquery-ui.min.js"></script>
     %atom_link%
 </head>
 <body>
@@ -41,22 +38,9 @@
                 · <a href="https://github.com/engelsystem/engelsystem/issues">Bugs / Features</a>
                 · <a href="https://github.com/engelsystem/engelsystem/">Development Platform</a>
                 · <a href="%credits_url%">Credits</a>
+            </div>;
         </div>
     </div>
 </div>
-</div>
-<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
-<script type="text/javascript" src="vendor/bootstrap-datepicker-1.7.1/js/bootstrap-datepicker.min.js"></script>
-<script type="text/javascript" src="vendor/bootstrap-datepicker-1.7.1/locales/bootstrap-datepicker.de.min.js"></script>
-<script type="text/javascript" src="vendor/Chart.min.js"></script>
-<script type="text/javascript" src="js/forms.js"></script>
-<script type="text/javascript" src="vendor/moment-with-locales.min.js"></script>
-<script type="text/javascript">
-    $(function () {
-        moment.locale("%locale%");
-    });
-</script>
-<script type="text/javascript" src="js/moment-countdown.js"></script>
-<script type="text/javascript" src="js/sticky-headers.js"></script>
 </body>
 </html>

templates/maintenance.html

@@ -4,11 +4,8 @@
     <title>Maintenance - Engelsystem</title>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="css/theme0.css"/>
+    <link rel="stylesheet" type="text/css" href="assets/theme0.css"/>
-    <link rel="stylesheet" type="text/css" href="vendor/icomoon/style.css"/>
+    <script type="text/javascript" src="assets/vendor.js"></script>
-    <link rel="stylesheet" type="text/css" href="vendor/bootstrap-datepicker-1.4.0/css/bootstrap-datepicker3.min.css"/>
-    <script type="text/javascript" src="vendor/jquery-2.1.1.min.js"></script>
-    <script type="text/javascript" src="vendor/jquery-ui.min.js"></script>
 </head>
 <body>
 <div class="navbar navbar-default navbar-fixed-top">
@@ -70,17 +67,5 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
-<script type="text/javascript" src="vendor/bootstrap-datepicker-1.4.0/js/bootstrap-datepicker.min.js"></script>
-<script type="text/javascript" src="vendor/bootstrap-datepicker-1.4.0/locales/bootstrap-datepicker.de.min.js"></script>
-<script type="text/javascript" src="vendor/Chart.min.js"></script>
-<script type="text/javascript" src="js/forms.js"></script>
-<script type="text/javascript" src="vendor/moment-with-locales.min.js"></script>
-<script type="text/javascript">
-    $(function () {
-        moment.locale("en_US.UTF-8");
-    });
-</script>
-<script type="text/javascript" src="js/moment-countdown.js"></script>
 </body>
 </html>

themes/base.less

@@ -1,6 +1,6 @@
-@import "../vendor/twbs/bootstrap/less/bootstrap";
+@import "../node_modules/bootstrap/less/bootstrap";
 
-@icon-font-path: "../../../../vendor/bootstrap/fonts/";
+@icon-font-path: "../fonts/";
 
 body {
   padding-top: 50px;

themes/build-themes.sh

@@ -1,15 +0,0 @@
-#!/bin/bash
-
-FILE_PATH="$(dirname "$0")"
-
-for file in $(ls "${FILE_PATH}/"*.less); do
-    filename="${file##*/}"
-    themeName="${filename%.less}"
-
-    if [[ "$filename" == "base.less" ]]; then
-        continue;
-    fi
-
-    echo "Building ${themeName}"
-    lessc "${file}" > "${FILE_PATH}/../public/css/${themeName}.css"
-done

themes/theme1.less

@@ -1,4 +1,4 @@
-@import "../vendor/twbs/bootstrap/less/variables";
+@import "../node_modules/bootstrap/less/variables";
 
 /*
 The MIT License (MIT)

themes/theme2.less

@@ -1,4 +1,4 @@
-@import "../vendor/twbs/bootstrap/less/variables";
+@import "../node_modules/bootstrap/less/variables";
 
 @brand-primary:         #758499;
 @brand-success:         #7b9c41;

themes/theme3.less

@@ -1,4 +1,4 @@
-@import "../vendor/twbs/bootstrap/less/variables";
+@import "../node_modules/bootstrap/less/variables";
 
 @brand-primary:         #f19224;
 @brand-success:         #39AB50;

themes/theme4.less

@@ -1,4 +1,4 @@
-@import "../vendor/twbs/bootstrap/less/variables";
+@import "../node_modules/bootstrap/less/variables";
 
 /*
 The MIT License (MIT)

themes/theme5.less

@@ -1,4 +1,4 @@
-@import "../vendor/twbs/bootstrap/less/variables";
+@import "../node_modules/bootstrap/less/variables";
 
 @brand-primary:         rgb(164, 28, 49);
 @brand-success:         rgb(153, 204, 0);

themes/theme6.less

@@ -1,4 +1,4 @@
-@import "../vendor/twbs/bootstrap/less/variables";
+@import "../node_modules/bootstrap/less/variables";
 
 /*
 The MIT License (MIT)

webpack.config.js

@@ -0,0 +1,73 @@
+const path = require('path');
+const webpack = require('webpack');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const nodeEnv = (process.env.NODE_ENV || 'development').trim();
+
+// eslint-disable-next-line
+const __DEV__ = nodeEnv !== 'production';
+
+const devtool = __DEV__ ? '#source-map' : '';
+
+const plugins = [
+  new webpack.DefinePlugin({
+    'process.env': {
+      NODE_ENV: JSON.stringify(nodeEnv),
+    },
+  }),
+  new ExtractTextPlugin('[name].css'),
+];
+
+// if (!__DEV__) {
+//   plugins.push(
+//     new webpack.optimize.UglifyJsPlugin({
+//       compress: {
+//         warnings: false,
+//       },
+//       output: {
+//         comments: false,
+//       },
+//       screwIe8: true,
+//       sourceMap: false,
+//     })
+//   );
+// }
+
+const themeEntries = {};
+for (let i = 0; i < 7; i++) {
+  themeEntries[`theme${i}`] = `./themes/theme${i}.less`;
+}
+
+module.exports = {
+  context: __dirname,
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  entry: {
+    ...themeEntries,
+      vendor: './js/vendor.js',
+  },
+  output: {
+    path: path.resolve('public/assets'),
+    filename: '[name].js',
+    publicPath: '/assets/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /(node_modules)/,
+        loader: 'babel-loader',
+        query: { cacheDirectory: true },
+      },
+      { test: /\.(eot|ttf|otf|svg|woff2?)(\?.*)?$/, loader: 'file-loader' },
+      { test: /\.json$/, loader: 'json-loader' },
+      { test: /\.css$/, loader: 'style-loader!css-loader' },
+      { test: /\.less$/, use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader!less-loader'
+        })}
+    ],
+  },
+  plugins,
+  devtool,
+};