From c1c0602d583436b700a004d8c135cb9e2050d8fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20=27Necoro=27=20Neumann?= Date: Sat, 11 Jan 2020 22:50:38 +0100 Subject: Revert back to JS from LS (whose development stopped) --- static/js/kosten.js | 520 ++++++++++++++++++++++++++-------------------------- static/js/kosten.ls | 224 ---------------------- 2 files changed, 263 insertions(+), 481 deletions(-) delete mode 100644 static/js/kosten.ls 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 + ": " + this.y.toFixed(2) + " € / " + 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}: ${this.y.toFixed(2)}€ / ${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 = `${df('%B %Y', this.x)}
`; + const body = this.points.map(p => `${p.series.name}: ${p.point.y} €
`).join(''); + const footer = `Summe: ${this.points[0].total}`; + 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 = "" + df('%B %Y', this.x) + "
"; - 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 + ": " + p.point.y + " €
"); - } - return results$; - }.call(this)).join(''); - footer = "Summe: " + this.points[0].total + ""; - 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("
  • ").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("
  • ") + .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}: #{@y.toFixed 2} € / #{@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 = "#{df '%B %Y' @x}
    " - body = ["#{p.series.name}: #{p.point.y} €
    " for p in @points] .join '' - footer = "Summe: #{@points.0.total}" - 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 "
  • " - .parent! # wrap does not return the li - .append img - .hide! - .insert-before add-img.parent! - .fade-in \slow !-> input.focus! - - counter++ -- cgit v1.2.3