From ad0e7a7eaf8f970172f1271c3223449c6783e7ae Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sat, 27 Jul 2019 17:08:57 +0200
Subject: [PATCH] Fixed #464 - charts: javascript editor
---
pom.xml | 6 ++++++
src/main/resources/languages/_de.properties | 2 +-
src/main/resources/languages/_en.properties | 2 +-
src/main/resources/static/css/charts.css | 10 ++++++++++
src/main/resources/static/css/dark/charts.css | 10 ++++++++++
src/main/resources/static/js/charts.js | 10 ++++++++++
src/main/resources/templates/charts/newChart.ftl | 8 ++++++--
7 files changed, 44 insertions(+), 4 deletions(-)
diff --git a/pom.xml b/pom.xml
index 0ac1a9a54..e10f5f5e5 100644
--- a/pom.xml
+++ b/pom.xml
@@ -64,6 +64,7 @@
<fontawesome.version>5.0.10</fontawesome.version>
<sortablejs.version>1.8.1</sortablejs.version>
<mousetrap.version>1.6.1</mousetrap.version>
+ <codemirror.version>5.45.0</codemirror.version>
<webdrivermanager.version>2.2.1</webdrivermanager.version>
<selenium.version>3.141.59</selenium.version>
@@ -189,6 +190,11 @@
<artifactId>mousetrap</artifactId>
<version>${mousetrap.version}</version>
</dependency>
+ <dependency>
+ <groupId>org.webjars</groupId>
+ <artifactId>codemirror</artifactId>
+ <version>${codemirror.version}</version>
+ </dependency>
<!-- selenium -->
<dependency>
diff --git a/src/main/resources/languages/_de.properties b/src/main/resources/languages/_de.properties
index c0cfad504..5acea3b11 100644
--- a/src/main/resources/languages/_de.properties
+++ b/src/main/resources/languages/_de.properties
@@ -344,7 +344,7 @@ charts.default.categoryBudget=Verbrauch nach Kategorien
chart.new.label.name=Name
chart.new.label.script=Script
chart.new.info.default=Diese mitgelieferte Diagrammvorlage kann nicht �berschrieben werden, aber du kannst dir den Code ansehen.
-chart.new.info.wiki=Tutorial: <a href="https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts">https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts</a
+chart.new.info.wiki=Tutorial: <a href="https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts">https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts</a>
chart.type=Typ
chart.actions=Aktionen
diff --git a/src/main/resources/languages/_en.properties b/src/main/resources/languages/_en.properties
index 9eb4f0c8e..9ae4d8da9 100644
--- a/src/main/resources/languages/_en.properties
+++ b/src/main/resources/languages/_en.properties
@@ -344,7 +344,7 @@ charts.default.categoryBudget=Consumption by categories
chart.new.label.name=Name
chart.new.label.script=Script
chart.new.info.default=This default chart can''t be overwritten but you can have a look on how it''s implemented.
-chart.new.info.wiki=Tutorial: <a href="https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts">https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts</a
+chart.new.info.wiki=Tutorial: <a href="https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts">https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts</a>
chart.type=Type
chart.actions=Actions
chart.show=Show chart
diff --git a/src/main/resources/static/css/charts.css b/src/main/resources/static/css/charts.css
index 5b4e6aea7..4ff972dcb 100644
--- a/src/main/resources/static/css/charts.css
+++ b/src/main/resources/static/css/charts.css
@@ -20,4 +20,14 @@
#chart-canvas {
height: 40em;
+}
+
+.CodeMirror {
+ width: 100%;
+ height: auto;
+ resize: vertical;
+}
+
+.CodeMirror-scroll {
+ height: auto;
}
\ No newline at end of file
diff --git a/src/main/resources/static/css/dark/charts.css b/src/main/resources/static/css/dark/charts.css
index 5b4e6aea7..4ff972dcb 100644
--- a/src/main/resources/static/css/dark/charts.css
+++ b/src/main/resources/static/css/dark/charts.css
@@ -20,4 +20,14 @@
#chart-canvas {
height: 40em;
+}
+
+.CodeMirror {
+ width: 100%;
+ height: auto;
+ resize: vertical;
+}
+
+.CodeMirror-scroll {
+ height: auto;
}
\ No newline at end of file
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index 3700b412f..1b6d7154a 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -1,5 +1,15 @@
$(document).ready(function()
{
+ if($("#chart-script").length)
+ {
+ var editor = CodeMirror.fromTextArea(document.getElementById('chart-script'), {
+ mode: "javascript",
+ lineNumbers: 50,
+ viewportMargin: Infinity
+ });
+ editor.save();
+ }
+
if($("#modalConfirmDelete").length)
{
$('#modalConfirmDelete').modal('open');
diff --git a/src/main/resources/templates/charts/newChart.ftl b/src/main/resources/templates/charts/newChart.ftl
index 4d3ad1fdb..29c0b3d7b 100644
--- a/src/main/resources/templates/charts/newChart.ftl
+++ b/src/main/resources/templates/charts/newChart.ftl
@@ -3,6 +3,8 @@
<#import "../helpers/header.ftl" as header>
<@header.header "BudgetMaster"/>
<#import "/spring.ftl" as s>
+ <link rel="stylesheet" href="<@s.url "/webjars/codemirror/5.45.0/lib/codemirror.css"/>">
+ <@header.style "charts"/>
</head>
<body class="budgetmaster-blue-light">
<#import "../helpers/navbar.ftl" as navbar>
@@ -38,9 +40,8 @@
<#-- script -->
<div class="row">
- <div class="input-field col s12 m12 l8 offset-l2">
+ <div class="input-field col sl2" style="width: 100%">
<textarea id="chart-script" name="script" <@validation.validation "script" "materialize-textarea"/>><#if chart.getScript()??>${chart.getScript()}<#else>${locale.getString("chart.script.default")}</#if></textarea>
- <label for="chart-script">${locale.getString("chart.new.label.script")}</label>
</div>
</div>
@@ -85,5 +86,8 @@
<!-- Scripts-->
<#import "../helpers/scripts.ftl" as scripts>
<@scripts.scripts/>
+ <script src="<@s.url '/webjars/codemirror/5.45.0/lib/codemirror.js'/>"></script>
+ <script src="<@s.url '/webjars/codemirror/5.45.0/mode/javascript/javascript.js'/>"></script>
+ <script src="<@s.url '/js/charts.js'/>"></script>
</body>
</html>
\ No newline at end of file
--
GitLab