diff --git a/pom.xml b/pom.xml index 0ac1a9a540ed37ee4ddcd97fd68523c487adb6a9..e10f5f5e59091269b136cdc8c5db7cecfc4d82f8 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 c0cfad504a94ad05ee77a9197c190bc823de12a0..5acea3b1153b4005de2c0d96a8143e1193969dcf 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 9eb4f0c8e478949007f3ff6a35a9f2b64bd90f84..9ae4d8da99d0401efb6c3e607c49b95a2724bd51 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 5b4e6aea7b60ab4acdee31cb46054bd344ae24ac..4ff972dcbf7ae1e2f0f802752e0eab40093fba07 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 5b4e6aea7b60ab4acdee31cb46054bd344ae24ac..4ff972dcbf7ae1e2f0f802752e0eab40093fba07 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 3700b412f0cba0565e5ed1ef03fb3e9718c19f56..1b6d7154aabe9c432304d2bca99e992085e19518 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 4d3ad1fdb1edeb4dd7e12f8d8e48611c66338db1..29c0b3d7bc4560412716f84c6b6246fc14e66ec7 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