merge pr #427: Use npm to handle frontend dependencies

.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

@@ -27,3 +27,8 @@ _vimrc_local.vim
 # Composer files
 /vendor/
 /composer.lock
+
+# Frontend files
+/node_modules
+/public/assets
+/package-lock.json

.gitlab-ci.yml

@@ -2,7 +2,7 @@ image: php
 
 cache:
   paths:
-  - .composer
+    - .composer
 
 services:
   - mariadb:10.2
@@ -37,12 +37,21 @@ before_script:
   # Install Composer
   - &before_install_composer |-
     curl -sS https://getcomposer.org/installer | php -- --no-ansi --install-dir /usr/local/bin/ --filename composer
-    /usr/local/bin/composer --no-ansi install
+    composer --no-ansi install
+  # Install Node.js and Yarn
+  - &before_install_yarn |-
+    apt -yqq install gnupg2 apt-transport-https
+    curl -sL https://deb.nodesource.com/setup_8.x | bash -
+    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
+    echo "deb https://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list
+    apt -yqq update && apt -yqq install nodejs yarn
+    yarn install
+    yarn build
 
 .test_template: &test_definition
   stage: test
   artifacts:
-    name: "${CI_JOB_NAME}_${CI_PROJECT_ID}"
+    name: "${CI_JOB_NAME}_${CI_JOB_ID}"
     expire_in: 1 week
     paths:
       - ./coverage/
@@ -61,11 +70,12 @@ test:7.1:
   services: []
   stage: deploy
   only:
-  - master
+    - master
   before_script:
     - *before_fix_permissions
     - *before_install_packages
     - *before_install_composer
+    - *before_install_yarn
 
 .deploy_template_script:
   # Configure SSH
@@ -78,8 +88,19 @@ test:7.1:
   - &deployment_dependencies |-
     chmod +x ./deploy.sh
     apt update && apt install -yqq rsync openssh-client
-    /usr/local/bin/composer --no-ansi install --no-dev
+    composer --no-ansi install --no-dev
-    /usr/local/bin/composer --no-ansi dump-autoload --optimize
+    composer --no-ansi dump-autoload --optimize
+
+build_release_file:
+  <<: *deploy_definition
+  artifacts:
+    name: "release_${CI_COMMIT_REF_SLUG}_${CI_JOB_ID}_${CI_COMMIT_SHA}"
+    expire_in: 1 week
+    paths:
+      - ./release/
+  script:
+    - *deployment_dependencies
+    - rsync -vAax --exclude '.git*' --exclude .composer/ --exclude coverage/ --exclude node_modules/ --exclude release/ ./ release/
 
 deploy_staging:
   <<: *deploy_definition

README.md

@@ -13,13 +13,16 @@ To report bugs use [engelsystem/issues](https://github.com/engelsystem/engelsyst
  * PHP >= 7.0
  * MySQL-Server >= 5.5 or MariaDB-Server >= 5.5 
  * Webserver, i.e. lighttpd, nginx, or Apache
+ * Node >= 8 (Development/Building only)
+ * Yarn (Development/Building only)
 
 ### Directions:
  * Clone the master branch: `git clone https://github.com/engelsystem/engelsystem.git`
- * Install [Composer](https://getcomposer.org/download/)
+ * Install [Composer](https://getcomposer.org/download/) and [Yarn](https://yarnpkg.com/en/docs/install) (which requires [Node.js](https://nodejs.org/en/download/package-manager/))
  * Install project dependencies:
      ```bash
      composer install
+     yarn
      ```
     On production systems it is recommended to use
     ```bash
@@ -27,6 +30,11 @@ To report bugs use [engelsystem/issues](https://github.com/engelsystem/engelsyst
     composer dump-autoload --optimize
     ```
     to install the engelsystem
+ * Build the frontend assets
+    ```bash
+    yarn build
+    ```
+
  * The webserver must have write access to the ```import``` directory and read access for all other directories
  * The webserver must point to the ```public``` directory.
  * The webserver must read the ```.htaccess``` file and ```mod_rewrite``` must be enabled
@@ -69,7 +77,7 @@ To use the deployment features the following secret variables need to be defined
 ```bash
 SSH_PRIVATE_KEY         # The ssh private key
 STAGING_REMOTE          # The staging server, e.g. user@remote.host
-STAGING_REMOTE_PATH     # The psth on the remote server, e.g. /var/www/engelsystem
+STAGING_REMOTE_PATH     # The path on the remote server, e.g. /var/www/engelsystem
 PRODUCTION_REMOTE       # Same as STAGING_REMOTE but for the production environment
 PRODUCTION_REMOTE_PATH  # Same as STAGING_REMOTE_PATH but for the production environment
 ```

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",

deploy.sh

@@ -50,7 +50,7 @@ fi
 
 echo "syncing ${PWD}/ to ${remote_host}:${remote_path}/${deploy_id}/"
 
-rsync -vAax --exclude '.git*' --exclude .composer/ \
+rsync -vAax --exclude '.git*' --exclude .composer/ --exclude coverage/ --exclude node_modules/ \
     -e "ssh -q -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no" \
     ./ "${remote_host}:${remote_path}/${deploy_id}/"
 
@@ -63,7 +63,8 @@ ssh -q -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no "${remote_hos
     fi
 
     echo \"Changing symlink\"
-    unlink \"${remote_path}/current\" && ln -s \"${remote_path}/${deploy_id}\" \"${remote_path}/current\"
+    unlink_cmd=\$(command -v unlink || command -v rm)
+    \$unlink_cmd \"${remote_path}/current\" && ln -s \"${remote_path}/${deploy_id}\" \"${remote_path}/current\"
 
     if [[ -f \"${deploy_id}-config.php\" ]]; then
         echo \"Restoring config\"

frontend/angelFont/angelFont.css

@@ -1,16 +1,16 @@
 @font-face {
-	font-family: 'icomoon';
+	font-family: 'angelFont';
-	src:url('fonts/icomoon.eot?-kja6ux');
+	src:url('./angelFont.eot?-kja6ux');
-	src:url('fonts/icomoon.eot?#iefix-kja6ux') format('embedded-opentype'),
+	src:url('./angelFont.eot?#iefix-kja6ux') format('embedded-opentype'),
-		url('fonts/icomoon.woff?-kja6ux') format('woff'),
+		url('./angelFont.woff?-kja6ux') format('woff'),
-		url('fonts/icomoon.ttf?-kja6ux') format('truetype'),
+		url('./angelFont.ttf?-kja6ux') format('truetype'),
-		url('fonts/icomoon.svg?-kja6ux#icomoon') format('svg');
+		url('./angelFont.svg?-kja6ux#icomoon') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
 
 [class^="icon-"], [class*=" icon-"] {
-	font-family: 'icomoon';
+	font-family: 'angelFont';
 	speak: none;
 	font-style: normal;
 	font-weight: normal;

frontend/js/forms.js

@@ -2,10 +2,10 @@
  * Sets all checkboxes to the wanted state
  *
  * @param {string} id Id of the element containing all the checkboxes
- * @param {bool} checked True if the checkboxes should be checked
+ * @param {boolean} checked True if the checkboxes should be checked
  */
-function checkAll(id, checked) {
+global.checkAll = (id, checked) => {
-    $("#" + id + " input[type='checkbox']").each(function () {
+    $('#' + id + ' input[type="checkbox"]').each(function () {
         this.checked = checked;
     });
 }
@@ -16,8 +16,8 @@ function checkAll(id, checked) {
  * @param {string} id The elements ID
  * @param {list} shifts_list A list of numbers
  */
-function checkOwnTypes(id, shiftsList) {
+global.checkOwnTypes = (id, shiftsList) => {
-    $("#" + id + " input[type='checkbox']").each(function () {
+    $('#' + id + ' input[type="checkbox"]').each(function () {
         this.checked = $.inArray(parseInt(this.value), shiftsList) != -1;
     });
 }
@@ -25,23 +25,23 @@ function checkOwnTypes(id, shiftsList) {
 /**
  * @param {moment} date
  */
-function formatDay(date) {
+global.formatDay = (date) => {
-    return date.format("YYYY-MM-DD");
+    return date.format('YYYY-MM-DD');
 }
 
 /**
  * @param {moment} date
  */
-function formatTime(date) {
+global.formatTime = (date) => {
-    return date.format("HH:mm");
+    return date.format('HH:mm');
 }
 
 /**
  * @param {moment} from
  * @param {moment} to
  */
-function setInput(from, to) {
+global.setInput = (from, to) => {
-    var fromDay = $("#start_day"), fromTime = $("#start_time"), toDay = $("#end_day"), toTime = $("#end_time");
+    var fromDay = $('#start_day'), fromTime = $('#start_time'), toDay = $('#end_day'), toTime = $('#end_time');
 
     fromDay.val(formatDay(from));
     fromTime.val(formatTime(from));
@@ -50,13 +50,13 @@ function setInput(from, to) {
     toTime.val(formatTime(to));
 }
 
-function setDay(days) {
+global.setDay = (days) => {
     days = days || 0;
 
     var from = moment();
     from.hours(0).minutes(0).seconds(0);
 
-    from.add(days, "d");
+    from.add(days, 'd');
 
     var to = from.clone();
     to.hours(23).minutes(59);
@@ -64,13 +64,13 @@ function setDay(days) {
     setInput(from, to);
 }
 
-function setHours(hours) {
+global.setHours = (hours) => {
     hours = hours || 1;
 
     var from = moment();
     var to = from.clone();
 
-    to.add(hours, "h");
+    to.add(hours, 'h');
     if (to < from) {
         setInput(to, from);
         return;
@@ -83,12 +83,12 @@ $(function () {
     /**
      * Disable every submit button after clicking (to prevent double-clicking)
      */
-    $("form").submit(function (ev) {
+    $('form').submit(function (ev) {
-        $("input[type='submit']").prop("readonly", true).addClass("disabled");
+        $('input[type="submit"]').prop('readonly', true).addClass('disabled');
         return true;
     });
 
-    $(".dropdown-menu").css("max-height", function () {
+    $('.dropdown-menu').css('max-height', function () {
-        return ($(window).height() - 50) + "px";
+        return ($(window).height() - 50) + 'px';
-    }).css("overflow-y", "scroll");
+    }).css('overflow-y', 'scroll');
 });

frontend/js/moment-countdown.js

@@ -0,0 +1,19 @@
+/*
+ * 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);
+        });
+    }
+});

frontend/js/sticky-headers.js

@@ -2,29 +2,29 @@
  * Enables the fixed headers and time lane for the shift-calendar and datatables
  */
 $(document).ready(function () {
-    if ($(".shift-calendar").length) {
+    if ($('.shift-calendar').length) {
-        var timeLanes = $(".shift-calendar .time");
+        var timeLanes = $('.shift-calendar .time');
-        var headers = $(".shift-calendar .header");
+        var headers = $('.shift-calendar .header');
-        var topReference = $(".container-fluid .row");
+        var topReference = $('.container-fluid .row');
         timeLanes.css({
-            "position": "relative",
+            'position': 'relative',
-            "z-index": 999
+            'z-index': 999
         });
         headers.css({
-            "position": "relative",
+            'position': 'relative',
-            "z-index": 900
+            'z-index': 900
         });
         $(window).scroll(
             function () {
                 var top = headers.parent().offset().top;
                 var left = 15;
                 timeLanes.css({
-                    "left": Math.max(0, $(window).scrollLeft() - left) + "px"
+                    'left': Math.max(0, $(window).scrollLeft() - left) + 'px'
                 });
                 headers.css({
-                    "top": Math.max(0, $(window).scrollTop() - top
+                    'top': Math.max(0, $(window).scrollTop() - top
                         + topReference.offset().top)
-                    + "px"
+                        + 'px'
                 });
             });
     }

frontend/js/vendor.js

@@ -0,0 +1,16 @@
+window.$ = window.jQuery = require('jquery');
+require('imports-loader?define=>false!jquery-ui');
+require('bootstrap');
+require('imports-loader?define=>false&exports=>false!bootstrap-datepicker');
+require('bootstrap-datepicker/js/locales/bootstrap-datepicker.de');
+require('bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css');
+require('imports-loader?this=>window!chart.js');
+require('imports-loader?this=>window&define=>false&exports=>false!moment');
+require('imports-loader?this=>window&define=>false&exports=>false!moment/locale/de');
+require('./forms');
+require('./sticky-headers');
+require('./moment-countdown');
+
+$(function () {
+    moment.locale($('html').attr('lang'));
+});

frontend/themes/base.less

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

frontend/themes/theme1.less

@@ -1,4 +1,4 @@
-@import "../vendor/twbs/bootstrap/less/variables";
+@import "../../node_modules/bootstrap/less/variables";
 
 /*
 The MIT License (MIT)
@@ -96,8 +96,6 @@ THE SOFTWARE.
 //
 //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
 
-//** Load fonts from this directory.
-@icon-font-path:          "../fonts/";
 //** File name for all font files.
 @icon-font-name:          "glyphicons-halflings-regular";
 //** Element ID within SVG icon file.

frontend/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;

frontend/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;

frontend/themes/theme4.less

@@ -1,4 +1,4 @@
-@import "../vendor/twbs/bootstrap/less/variables";
+@import "../../node_modules/bootstrap/less/variables";
 
 /*
 The MIT License (MIT)
@@ -96,8 +96,6 @@ THE SOFTWARE.
 //
 //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
 
-//** Load fonts from this directory.
-@icon-font-path:          "../fonts/";
 //** File name for all font files.
 @icon-font-name:          "glyphicons-halflings-regular";
 //** Element ID within SVG icon file.

frontend/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);

frontend/themes/theme6.less

@@ -1,4 +1,4 @@
-@import "../vendor/twbs/bootstrap/less/variables";
+@import "../../node_modules/bootstrap/less/variables";
 
 /*
 The MIT License (MIT)
@@ -99,8 +99,6 @@ THE SOFTWARE.
 //
 //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
 
-//** Load fonts from this directory.
-@icon-font-path:          "../fonts/";
 //** File name for all font files.
 @icon-font-name:          "glyphicons-halflings-regular";
 //** Element ID within SVG icon file.

includes/helper/graph_helper.php

@@ -33,7 +33,7 @@ function bargraph($dom_id, $key, $row_names, $colors, $data)
     return '<canvas id="' . $dom_id . '" style="width: 100%; height: 300px;"></canvas>
       <script type="text/javascript">
       $(function(){
-        var ctx = $("#' . $dom_id . '").get(0).getContext("2d");
+        var ctx = $(\'#' . $dom_id . '\').get(0).getContext(\'2d\');
         var chart = new Chart(ctx).Bar(' . json_encode([
             'labels'   => $labels,
             'datasets' => $datasets

includes/sys_form.php

@@ -38,12 +38,12 @@ function form_spinner($name, $label, $value)
         </div>
       </div>
       <script type="text/javascript">
-        $("#spinner-' . $name . '-down").click(function() {
+        $(\'#spinner-' . $name . '-down\').click(function() {
-          var spinner = $("#spinner-' . $name . '");
+          var spinner = $(\'#spinner-' . $name . '\');
           spinner.val(parseInt(spinner.val()) - 1);
         });
-        $("#spinner-' . $name . '-up").click(function() {
+        $(\'#spinner-' . $name . '-up\').click(function() {
-          var spinner = $("#spinner-' . $name . '");
+          var spinner = $(\'#spinner-' . $name . '\');
           spinner.val(parseInt(spinner.val()) + 1);
         });
       </script>
@@ -73,13 +73,13 @@ function form_date($name, $label, $value, $start_date = '', $end_date = '')
     </div>
     <script type="text/javascript">
 			$(function(){
-        $("#' . $dom_id . '").datepicker({
+        $(\'#' . $dom_id . '\').datepicker({
-				  language: "' . locale_short() . '",
+				  language: \'' . locale_short() . '\',
-          todayBtn: "linked",
+          todayBtn: \'linked\',
-          format: "yyyy-mm-dd",
+          format: \'yyyy-mm-dd\',
-          startDate: "' . $start_date . '",
+          startDate: \'' . $start_date . '\',
-          endDate: "' . $end_date . '",
+          endDate: \'' . $end_date . '\',
-          orientation: "bottom"
+          orientation: \'bottom\'
 			  });
       });
     </script>

includes/sys_template.php

@@ -231,12 +231,12 @@ function toolbar_popover($glyphicon, $label, $content, $class = '')
         . ' <span class="caret"></span></a>
           <script type="text/javascript">
           $(function(){
-              $("#' . $dom_id . '").popover({
+              $(\'#' . $dom_id . '\').popover({
-                  trigger: "focus",
+                  trigger: \'focus\',
                   html: true,
-                  content: "' . addslashes(join('', $content)) . '",
+                  content: \'' . addslashes(join('', $content)) . '\',
-                  placement: "bottom",
+                  placement: \'bottom\',
-                  container: "#navbar-collapse-1"
+                  container: \'#navbar-collapse-1\'
               })
           });
           </script></li>';

includes/view/UserDriverLicenses_view.php

@@ -53,18 +53,18 @@ function UserDriverLicense_edit_view($user_source, $wants_to_drive, $user_driver
         ]),
         '<script type="text/javascript">
         $(function() {
-          var checkbox = $("#wants_to_drive");
+          var checkbox = $(\'#wants_to_drive\');
-          if(checkbox.is(":checked"))
+          if(checkbox.is(\':checked\'))
-            $("#driving_license").show();
+            $(\'#driving_license\').show();
           else
-            $("#driving_license").hide();
+            $(\'#driving_license\').hide();
 
           checkbox.click(
             function() {
-              if($("#wants_to_drive").is(":checked"))
+              if($(\'#wants_to_drive\').is(\':checked\'))
-                $("#driving_license").show();
+                $(\'#driving_license\').show();
               else
-                $("#driving_license").hide();
+                $(\'#driving_license\').hide();
             }
           );
         });

package.json

@@ -0,0 +1,35 @@
+{
+  "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",
+    "jquery": "^3.3.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.8.0",
+    "less": "^3.0.2",
+    "less-loader": "^4.0.5",
+    "style-loader": "^0.21.0",
+    "webpack": "^3"
+  }
+}

public/index.php

@@ -242,6 +242,6 @@ echo view(__DIR__ . '/../templates/layout.html', [
     'header_toolbar' => header_toolbar(),
     'faq_url'        => config('faq_url'),
     'contact_email'  => config('contact_email'),
-    'locale'         => locale(),
+    'locale'         => locale_short(),
     'event_info'     => EventConfig_info($event_config) . ' <br />'
 ]);

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/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": ""
-	}
-}

templates/layout.html

@@ -1,14 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="%locale%">
 <head>
     <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>
@@ -45,18 +42,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.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/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

webpack.config.js

@@ -0,0 +1,59 @@
+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'),
+];
+
+
+const themeEntries = {};
+for (let i = 0; i < 7; i++) {
+  themeEntries[`theme${i}`] = `./frontend/themes/theme${i}.less`;
+}
+
+module.exports = {
+  context: __dirname,
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  entry: {
+    ...themeEntries,
+      vendor: './frontend/js/vendor.js',
+  },
+  output: {
+    path: path.resolve('public/assets'),
+    filename: '[name].js',
+    publicPath: '',
+  },
+  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,
+};