Revert back to JS from LS (whose development stopped)

2 files changed, 263 insertions, 481 deletions

diff --git a/static/js/kosten.js b/static/js/kosten.js
index 7d6582c..a3bb3b6 100644
--- a/static/js/kosten.js
+++ b/static/js/kosten.js
@@ -1,284 +1,290 @@
-// Generated by LiveScript 1.4.0
-(function(){
-  var jq, setLang, extendDate, addJS, showJS, statJS, catsJS, out$ = typeof exports != 'undefined' && exports || this;
-  jQuery.fn.extend({
+"use strict";
+
+{
+
+jQuery.fn.extend({
     copy: function(){
       return this.clone().removeAttr('id class');
     }
   });
-  String.prototype.splitAt = function(pos){
+
+String.prototype.splitAt = function(pos){
     return [this.slice(0, pos), this.slice(pos)];
-  };
-  Date.prototype.format = function(){
+};
+  
+Date.prototype.format = function(){
     return $.datepicker.formatDate('dd.mm.yy', this);
-  };
-  jq = function(f){
-    return function(){
-      $(f);
-    };
-  };
-  setLang = function(){
+};
+
+let jq = (f) => () => $(f);
+
+// Call this to localize HighCharts
+let setLang = function(){
     Highcharts.setOptions({
-      colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
-      lang: {
-        months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-        shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
-        weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
-        rangeSelectorFrom: 'von',
-        rangeSelectorTo: 'bis',
-        rangeSelectorZoom: null,
-        numericSymbols: null
-      }
+        colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
+        lang: {
+            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
+            shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+            weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+            rangeSelectorFrom: 'von',
+            rangeSelectorTo: 'bis',
+            rangeSelectorZoom: null,
+            numericSymbols: null
+        }
     });
-  };
-  extendDate = function(input){
-    var that, now, _, day, month, year;
-    if (that = /^([12][0-9]|3[01]|0?[1-9])(?:(0?[1-9]|1[0-2])((?:20)?[0-9][0-9])?)?$/.exec(input.val())) {
-      now = new Date();
-      _ = that[0], day = that[1], month = that[2], year = that[3];
-      year == null && (year = now.getFullYear());
-      month == null && (month = now.getMonth() + 1);
-      if (!(year > 99)) {
-        year = "20" + year;
-      }
-      input.val(
-      new Date(year, month - 1, day).format());
+};
+
+let extendDate = function(input) {
+    const re =  /^([12][0-9]|3[01]|0?[1-9])(?:(0?[1-9]|1[0-2])((?:20)?[0-9][0-9])?)?$/;
+    let match, day, month, year;
+
+    if (match = re.exec(input.val())) {
+        const now = new Date();
+        [ , day, month, year] = match;
+
+        if (year == null) year = now.getFullYear();
+        if (month == null) month = now.getMonth() + 1;
+
+        if (year <= 99) year = "20" + year;
+
+        const date = new Date(year, month - 1, day).format();
+
+        input.val(date);
     }
-  };
-  $(function(){
+};
+
+let searchController = function() {
     $('form.search').hide();
-    $('li.search').click(function(){
-      var x$;
-      x$ = $('form.search');
-      x$.toggle();
-      if (x$.is(':visible')) {
-        $('input.search').focus();
-      }
+    $('li.search').click(() => {
+      const search = $('form.search');
+      search.toggle();
+      if (search.is(':visible')) $('input.search').focus();
     });
-    $('input.search').focusout(function(){
-      $('form.search').hide();
-    });
-  });
-  out$.addJS = addJS = jq(function(){
-    var x$;
-    x$ = $('input[name=date]');
-    x$.datepicker({
-      dateFormat: 'dd.mm.yy',
-      firstDay: 1
+
+    $('input.search').focusout(() => $('form.search').hide());
+};
+
+$(searchController);
+
+var addJS = jq(() => {
+    const datepicker = $('input[name=date]');
+    datepicker.datepicker({
+        dateFormat: 'dd.mm.yy',
+        firstDay: 1
     });
-    x$.blur(function(){
-      extendDate(x$);
-    });
-  });
-  out$.showJS = showJS = jq(function(){
+
+    datepicker.blur(() => extendDate(datepicker));
+});
+
+var showJS = jq(() => {
     setLang();
-    $(".detail .heading").click(function(){
-      $(this).closest('.detail').children('.mark:first').click();
+
+    $(".detail .heading").click(function() {
+        $(this).closest('.detail').children('.mark:first').click();
     });
-    $(".detail > .mark").click(function(){
-      if (this.src.indexOf('closed') !== -1) {
-        this.src = this.src.replace('closed', 'open');
-      } else {
-        this.src = this.src.replace('open', 'closed');
-      }
-      $(this).nextAll('.details:first').toggle();
+
+    $(".detail > .mark").click(function() {
+        if (this.src.indexOf('closed') !== -1) {
+            this.src = this.src.replace('closed', 'open');
+        } else {
+            this.src = this.src.replace('open', 'closed');
+        }
+        $(this).nextAll('.details:first').toggle();
     });
+
     $('.details').hide();
-    $('.pie').each(function(){
-      var x$, k, v;
-      x$ = $(this);
-      x$.highcharts({
-        title: {
-          text: null
-        },
-        tooltip: {
-          hideDelay: 200,
-          formatter: function(){
-            return this.key + ": <b>" + this.y.toFixed(2) + " €</b> / " + this.percentage.toFixed(2) + "%";
-          }
-        },
-        chart: {
-          backgroundColor: null,
-          plotBorderWidth: null,
-          plotShadow: false,
-          spacingTop: 0
-        },
-        credits: {
-          enabled: false
-        },
-        series: [{
-          type: 'pie',
-          size: '70%',
-          states: {
-            hover: {
-              halo: null
-            }
-          },
-          allowPointSelect: true,
-          dataLabels: {
-            color: x$.css('color'),
-            distance: 20
-          },
-          data: (function(){
-            var ref$, results$ = [];
-            for (k in ref$ = x$.data('pie')) {
-              v = ref$[k];
-              results$.push({
-                name: v > 0 ? k : '',
-                y: v,
-                visible: v > 0
-              });
-            }
-            return results$;
-          }())
-        }]
-      });
+
+    // draw the pies
+    $('.pie').each(function() {
+        const pie = $(this);
+        const piedata = Object.entries(pie.data('pie')).map(([key, value]) => (
+            {
+                name: value > 0 ? key : '',
+                y: value,
+                visible: value > 0
+            }));
+
+        pie.highcharts({
+            title: {
+                text: null
+            },
+            tooltip: {
+                hideDelay: 200,
+                formatter: function() {
+                    return `${this.key}: <b>${this.y.toFixed(2)}€</b> / ${this.percentage.toFixed(2)}%`;
+                }
+            },
+            chart: {
+                backgroundColor: null,
+                plotBorderWidth: null,
+                plotShadow: false,
+                spacingTop: 0
+            },
+            credits: {
+                enabled: false
+            },
+            series: [{
+                type: 'pie',
+                size: '70%',
+                states: {
+                    hover: {
+                        halo: null
+                    }
+                },
+                allowPointSelect: true,
+                dataLabels: {
+                    color: pie.css('color'),
+                    distance: 20
+                },
+                data: piedata
+            }]
+        });
     });
-  });
-  out$.statJS = statJS = jq(function(){
-    var df, month, constDialog;
+});
+
+var statJS = jq(() => {
     setLang();
-    df = Highcharts.dateFormat;
-    month = 30 * 24 * 60 * 60 * 1000;
-    constDialog = function(){
-      var time;
-      time = this.x;
-      $.get(df('/stats/_const/%Y/%m', time), function(data){
-        $(data).dialog({
-          title: df('%B %Y', time)
-        });
-      });
+
+    const df = Highcharts.dateFormat;
+    const month = 30 * 24 * 60 * 60 * 1000;
+
+    const constDialog = function() {
+        const time = this.x;
+        
+        $.get(df('/stats/_const/%Y/%m', time), 
+              data => $(data).dialog({ title: df('%B %Y', time) })
+        );
     };
-    $('.stats').each(function(){
-      var x$;
-      x$ = $(this);
-      x$.highcharts('StockChart', {
-        credits: {
-          enabled: false
-        },
-        rangeSelector: {
-          buttons: [],
-          inputDateFormat: "%b %Y",
-          inputEditDateFormat: "%m.%Y",
-          inputDateParser: function(value){
-            value = value.split(/\./);
-            return Date.UTC(value[1], value[0] - 1, 1, 0, 0, 0, 0);
-          }
-        },
-        plotOptions: {
-          series: {
-            stacking: 'normal',
-            marker: {
-              enabled: false,
-              radius: 2
-            }
-          }
-        },
-        chart: {
-          events: {
-            click: function(){
-              var i$, ref$, len$, p;
-              for (i$ = 0, len$ = (ref$ = this.series[0].data).length; i$ < len$; ++i$) {
-                p = ref$[i$];
-                if (p.state) {
-                  constDialog.apply(p);
-                  break;
+
+    $('.stats').each(function (){
+        const stats = $(this);
+        stats.highcharts('StockChart', {
+            credits: {
+                enabled: false
+            },
+            rangeSelector: {
+                buttons: [],
+                inputDateFormat: "%b %Y",
+                inputEditDateFormat: "%m.%Y",
+                inputDateParser: value => {
+                    value = value.split(/\./);
+                    return Date.UTC(
+                        value[1], // year
+                        value[0] - 1, // month ... 0-based -.-
+                        1, // day
+                        0, 0, 0, 0 // time
+                    );
+                }
+            },
+            plotOptions: {
+                series: {
+                    stacking: 'normal',
+                    marker: {
+                        enabled: false,
+                        radius: 2
+                    }
+                }
+            },
+            chart: {
+                events: {
+                    click: function() {
+                        for (let point of this.series[0].data) {
+                            if (point.state) {
+                                // constDialog is used as a normal callback later on, so has to use 'this'
+                                constDialog.apply(point);
+                                break;
+                            }
+                        }
+                    }
+                }
+            },
+            xAxis: {
+                minTickInterval: month,
+                minRange: month
+            },
+            yAxis: {
+                reversedStacks: false,
+                labels: {
+                    x: 5,
+                    align: 'left'
+                }
+            },
+            series: [
+                {
+                    data: stats.data('consts'),
+                    step: 'left',
+                    name: 'Konstant',
+                    point: {
+                        events: {
+                            click: constDialog
+                        }
+                    }
+                }, {
+                    data: stats.data('expenses'),
+                    name: 'Variabel',
+                    step: 'left'
+                }
+            ],
+            tooltip: {
+                formatter: function(){
+                    const header = `<span style="font-size: 10px">${df('%B %Y', this.x)}</span><br/>`;
+                    const body = this.points.map(p => `${p.series.name}: <b>${p.point.y} €</b><br/>`).join('');
+                    const footer = `<strong>Summe: ${this.points[0].total}</strong>`;
+                    return header + body + footer;
                 }
-              }
-            }
-          }
-        },
-        xAxis: {
-          minTickInterval: month,
-          minRange: month
-        },
-        yAxis: {
-          reversedStacks: false,
-          labels: {
-            x: 5,
-            align: 'left'
-          }
-        },
-        series: [
-          {
-            data: x$.data('consts'),
-            step: 'left',
-            name: 'Konstant',
-            point: {
-              events: {
-                click: constDialog
-              }
             }
-          }, {
-            data: x$.data('expenses'),
-            name: 'Variabel',
-            step: 'left'
-          }
-        ],
-        tooltip: {
-          formatter: function(){
-            var header, body, p, footer;
-            header = "<span style=\"font-size: 10px\">" + df('%B %Y', this.x) + "</span><br/>";
-            body = (function(){
-              var i$, ref$, len$, results$ = [];
-              for (i$ = 0, len$ = (ref$ = this.points).length; i$ < len$; ++i$) {
-                p = ref$[i$];
-                results$.push(p.series.name + ": <b>" + p.point.y + " €</b><br/>");
-              }
-              return results$;
-            }.call(this)).join('');
-            footer = "<strong>Summe: " + this.points[0].total + "</strong>";
-            return header + body + footer;
-          }
-        }
-      });
+        });
     });
-  });
-  out$.catsJS = catsJS = jq(function(){
-    var counter, addImg, newInput, newImage;
-    counter = 0;
-    addImg = $('img#add');
-    newInput = $('input#new');
-    newImage = function(newName){
-      var x$;
-      x$ = addImg.copy();
-      x$.attr('src', function(){
-        return this.src.replace('add', newName);
-      });
-      return x$;
+});
+
+var catsJS = jq(() => {
+    let counter = 0;
+    const addImg = $('img#add');
+    const newInput = $('input#new');
+    const newImage = newName => {
+        const copy = addImg.copy();
+        copy.attr('src', function() {
+            return this.src.replace('add', newName);
+        });
+        return copy;
     };
-    $("li > span").click(function(){
-      var span, input, x$, img;
-      span = $(this);
-      input = span.next();
-      x$ = img = newImage('undo');
-      x$.click(function(){
-        $(this).remove();
-        input.val(span.text());
-        input.fadeOut('slow', function(){
-          span.toggle();
+
+    $("li > span").click(function() {
+        const span = $(this);
+        const input = span.next();
+        const img = newImage('undo');
+        
+        img.click(function() {
+            $(this).remove();
+            input.val(span.text());
+            input.fadeOut('slow', () => span.toggle() );
         });
-      });
-      span.toggle();
-      input.fadeIn('slow', function(){
-        img.insertAfter(input);
-      });
+
+        span.toggle();
+        input.fadeIn('slow', () => img.insertAfter(input));
     });
-    addImg.click(function(){
-      var input, x$, img;
-      input = newInput.copy();
-      x$ = img = newImage('minus');
-      x$.click(function(){
-        $(this).parent().fadeOut('slow', function(){
-          $(this).remove();
+
+    addImg.click(() => {
+        const img = newImage('minus');
+        img.click(function() {
+            $(this).parent().fadeOut('slow', function() {
+                $(this).remove();
+            });
         });
-      });
-      input.attr('name', function(){
-        return this.name + counter;
-      }).removeAttr('style').wrap("<li />").parent().append(img).hide().insertBefore(addImg.parent()).fadeIn('slow', function(){
-        input.focus();
-      });
-      counter++;
+        
+        const input = newInput.copy();
+        console.log(input.focus);
+        input
+            .attr('name', function(){ return this.name + counter; })
+            .removeAttr('style')
+            .wrap("<li />")
+            .parent()
+            .append(img)
+            .hide()
+            .insertBefore(addImg.parent())
+            .fadeIn('slow', () => input.focus() );
+        
+        counter++;
     });
-  });
-}).call(this);
+});
+}
diff --git a/static/js/kosten.ls b/static/js/kosten.ls
deleted file mode 100644
index ea433a4..0000000
--- a/static/js/kosten.ls
+++ /dev/null
@@ -1,224 +0,0 @@
-jQuery.fn.extend do
-    copy : -> @clone!remove-attr 'id class'
-
-String::splitAt = (pos) -> return
-    @slice 0 pos
-    @slice pos
-
-Date::format = -> $.datepicker.formatDate \dd.mm.yy @
-
-jq = (f) -> !-> $ f
-
-# Call this to localize Highcharts
-set-lang = !->
-    Highcharts .set-options do
-        # old colors
-        colors: [\#2f7ed8 \#0d233a \#8bbc21 \#910000 \#1aadce \#492970
-                 \#f28f43 \#77a1e5 \#c42525 \#a6c96a]
-        lang:
-            months: [\Januar \Februar \März \April \Mai \Juni \Juli
-                     \August \September \Oktober \November \Dezember]
-            short-months: [\Jan \Feb \Mär \Apr \Mai \Jun \Jul
-                           \Aug \Sep \Okt \Nov \Dez]
-            weekdays: [\Sonntag \Montag \Dienstag \Mittwoch \Donnerstag
-                       \Freitag \Samstag]
-            range-selector-from: \von
-            range-selector-to: \bis
-            range-selector-zoom: null
-            numeric-symbols: null
-
-extend-date = (input) !->
-    if input.val! is //^
-        ([12][0-9]|3[01]|0?[1-9]) # day
-        (?:
-            (0?[1-9]|1[0-2]) # month
-            ((?:20)?[0-9][0-9])? # year
-        )?
-        $//
-    then
-       now = new Date!
-       [_, day, month, year] = that
-       year ?= now.get-full-year!
-       month ?= now.get-month! + 1
-
-       year = "20" + year unless year > 99
-
-       new Date year, month - 1, day .format! |> input.val
-
-
-# The Search Stuff
-$ !->
-    $ \form.search .hide!
-
-    $ \li.search .click !->
-        $ \form.search
-            ..toggle!
-            $ \input.search .focus! if .. .is \:visible
-
-    $ \input.search .focusout !->
-        $ \form.search .hide!
-
-# Add
-export addJS = jq !->
-    $ 'input[name=date]'
-        .. .datepicker do
-            date-format: \dd.mm.yy
-            first-day: 1
-        .. .blur !-> extend-date ..
-
-# Show
-export showJS = jq !->
-    set-lang!
-
-    $ ".detail .heading" .click !->
-        $ @ .closest \.detail .children \.mark:first .click!
-
-    $ ".detail > .mark" .click !->
-        if (@src.index-of \closed) isnt -1
-            @src .= replace \closed \open
-        else
-            @src .= replace \open \closed
-
-        $ @ .next-all \.details:first .toggle!
-
-    $ \.details .hide!
-
-    # draw the pies
-    <-! $ \.pie .each
-    $ @
-        ..highcharts do
-            title: text: null
-            tooltip:
-                hide-delay: 200ms
-                formatter: ->
-                    "#{@key}: <b>#{@y.toFixed 2} €</b> / #{@percentage.to-fixed 2}%"
-            chart:
-                background-color: null
-                plot-border-width: null
-                plot-shadow: off
-                spacing-top: 0
-            credits: enabled: false
-            series: [
-                type: \pie
-                size: \70%
-                states: hover: halo: null
-                allow-point-select: true
-                data-labels:
-                    color: ..css \color
-                    distance: 20px
-                data: [ {name: if v>0 then k else '' , y: v, visible: v > 0} \
-                        for k,v of ..data \pie ]
-            ]
-
-# Statistics
-export statJS = jq !->
-    set-lang!
-
-    df = Highcharts.date-format
-    month = 30d * 24h * 60min * 60s * 1000ms
-
-    const-dialog = !->
-        time = @x
-
-        data <-! $.get df '/stats/_const/%Y/%m' time
-        $ data .dialog do
-            title: df '%B %Y' time
-
-    <-! $ \.stats .each
-    $ @
-        ..highcharts \StockChart do
-            credits: enabled: false
-            range-selector:
-                buttons: []
-                input-date-format: "%b %Y"
-                input-edit-date-format: "%m.%Y"
-                input-date-parser: (value) ->
-                    value .= split /\./
-                    Date.UTC value[1], # year
-                             value[0] - 1, # month ... 0-based -.-
-                             1, #day
-                             0,0,0,0 # time
-            plot-options:
-                series:
-                    stacking: \normal
-                    marker:
-                        enabled: false
-                        radius: 2
-            chart:
-                events:
-                    click: !->
-                        for p in @series.0.data
-                            if p.state
-                                const-dialog.apply p
-                                break
-            x-axis:
-                min-tick-interval: month
-                min-range: month
-            y-axis:
-                reversed-stacks: false
-                labels:
-                    x: 5
-                    align: \left
-            series: [
-                # const
-              * data: ..data \consts
-                step: \left
-                name: \Konstant
-                point: events: click: const-dialog
-                # normal exps
-              * data: ..data \expenses
-                name: \Variabel
-                step: \left
-            ]
-            tooltip:
-                formatter: ->
-                    header = "<span style=\"font-size: 10px\">#{df '%B %Y' @x}</span><br/>"
-                    body = ["#{p.series.name}: <b>#{p.point.y} €</b><br/>" for p in @points] .join ''
-                    footer = "<strong>Summe: #{@points.0.total}</strong>"
-                    header + body + footer
-
-# Categories
-export catsJS = jq !->
-    counter = 0
-    add-img = $ \img#add
-    new-input = $ \input#new
-
-    new-image = (new-name) ->
-        # we need to copy the image to get the correct URL
-        add-img.copy!
-            ..attr \src -> @src.replace \add new-name
-
-    $ "li > span" .click !->
-        span = $ @
-        input = span.next!
-        img = new-image \undo
-            ..click !->
-                  $ @ .remove!
-
-                  # reset text
-                  input.val span.text!
-
-                  <-! input.fade-out \slow
-                  span.toggle!
-
-        span.toggle!
-        <-! input.fade-in \slow
-        img.insert-after input
-
-    add-img.click !->
-        input = new-input.copy!
-        img = new-image \minus
-            ..click !->
-                  <-! $ @ .parent!fade-out \slow
-                  $ @ .remove!
-
-        input.attr \name -> @name + counter
-            .remove-attr \style
-            .wrap "<li />"
-            .parent! # wrap does not return the li
-            .append img
-            .hide!
-            .insert-before add-img.parent!
-            .fade-in \slow !-> input.focus!
-
-        counter++