aboutsummaryrefslogtreecommitdiff
path: root/gn2/wqflask/templates
diff options
context:
space:
mode:
Diffstat (limited to 'gn2/wqflask/templates')
-rw-r--r--gn2/wqflask/templates/gn_editor.html118
-rw-r--r--gn2/wqflask/templates/gn_editor_commit.html31
-rw-r--r--gn2/wqflask/templates/gn_editor_results_page.html29
3 files changed, 98 insertions, 80 deletions
diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html
index d55662c3..4116c398 100644
--- a/gn2/wqflask/templates/gn_editor.html
+++ b/gn2/wqflask/templates/gn_editor.html
@@ -2,8 +2,10 @@
{% block title %}Genenetwork Files Editor {% endblock %}
{% block css %}
-<style>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
+<style>
+
</style>
{% endblock %}
{% block search %}{% endblock %}
@@ -17,18 +19,16 @@
</div>
<div >
<ul class="nav navbar-nav navbar-right">
- <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML" >Commit </a></li>
+ <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML" >Commit </a></li>
<li><a href="#" hx-get="/editor/settings" hx-target="#output" hx-trigger="click" hx-swap="innerHTML" >Settings </a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</nav>
-
</header>
-
<div>
- <div class="row">
+ <div class="row" id="gn-editor">
<section class="col-sm-6" id="editor" style="height:100vh">
</section>
<section class="col-sm-6">
@@ -47,14 +47,18 @@
{% block js %}
<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>
+<!-- Javascripts -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
+
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='htmx.min.js') }}"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/diff@5.1.0/dist/diff.min.js"></script>
<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
@@ -93,12 +97,12 @@
scrollPastEnd: 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance
fixedWidthGutter: false, // boolean: true if the gutter should be fixed width
theme: "ace/theme/dracula", // theme string from ace/theme or custom?
- scrollSpeed: 2, // number: the scroll speed index
- dragDelay: 0,
+ scrollSpeed: 2, // number: the scroll speed index
+ dragDelay: 0,
dragEnabled: true, // boolean: enable dragging
focusTimout: 0, // number: the focus delay before focus starts.
tooltipFollowsMouse: true, // boolean: true if the gutter tooltip should follow mouse
- // session options
+ // session options
firstLineNumber: 1, // number: the line number in first line
overwrite: false, // boolean
newLineMode: 'auto', // "auto" | "unix" | "windows"
@@ -106,60 +110,66 @@
useSoftTabs: true, // boolean: true if we want to use spaces than tabs
tabSize: 4, // number
wrap: true, // boolean | string | number: true/'free' means wrap instead of horizontal scroll, false/'off' means horizontal scroll instead of wrap, and number means number of column before wrap. -1 means wrap at print margin
-
+
indentedSoftWrap: true, // boolean
foldStyle: 'markbegin', // enum: 'manual'/'markbegin'/'markbeginend'.
mode: 'ace/mode/markdown'
- }
- let hash = {{ hash|tojson }}
- let filePath = {{ file_path|tojson }}
- localStorage.setItem("gn_editor_sha" ,hash)
- document.querySelector("#output").addEventListener("commitEvent", function(event){
- htmx.ajax("POST", "/editor/commit", {target: "#output", swap:"innerHTML",values: {'msg':event.detail.payload, 'content': editor.getValue(), "hash": localStorage.getItem("gn_editor_sha"), "file_path": filePath}})
- })
-
- document.querySelector("#output").addEventListener("updateEditor", function(event){
- editor.setOptions({
- ...editor_configurations,
- ...event.detail.payload
- })
- editor.renderer.updateFull();
+ }
+ let hash = {{ hash|tojson }}
+ let filePath = {{ file_path|tojson }}
+ localStorage.setItem("gn_editor_sha" ,hash)
+ document.querySelector("#output").addEventListener("commitEvent", function(event){
+ htmx.ajax("POST", "/editor/commit", {target: "#output", swap:"innerHTML",values: {'msg':event.detail.payload, 'content': editor.getValue(), "hash": localStorage.getItem("gn_editor_sha"), "file_path": filePath}})
+ })
+
+ htmx.on("#output", "diffEvent", function(event){
+ var fileName = "{{ file_path }}"
+ var diffContent = Diff.createTwoFilesPatch(fileName,fileName, data, editor.getValue())
+ var diffHtml = Diff2Html.html(diffContent, {
+ drawFileList: true,
+ matching: 'lines',
+ outputFormat: 'line-by-line',
+ });
+ htmx.find("#output").innerHTML = diffHtml
+ })
+
+
+ document.querySelector("#output").addEventListener("updateEditor", function(event){
+ editor.setOptions({
+ ...editor_configurations,
+ ...event.detail.payload
})
-
- var editor = ace.edit("editor");
- editor.setOptions(editor_configurations);
- editor.container.style.resize = "horizontal";
- function updatePreview(){
- const {markedHighlight} = globalThis.markedHighlight;
- let new_marked = new marked.Marked(
- markedHighlight({
- langPrefix: 'hljs language-',
- highlight(code, lang) {
- const language = hljs.getLanguage(lang) ? lang : 'plaintext';
- return hljs.highlight(code, { language }).value;
- }}));
- new_marked.use({
- pedantic: false,
- gfm: true,
- });
-
- previewContent = document.querySelector("#output");
- var markdownContent = editor.getValue();
- var htmlContent = new_marked.parse(markdownContent)
- console.log(htmlContent)
- previewContent.innerHTML = htmlContent;
- }
-
+ editor.renderer.updateFull();
+ })
+ var editor = ace.edit("editor");
+ editor.setOptions(editor_configurations);
+ editor.container.style.resize = "horizontal";
+ function updatePreview(){
+ const {markedHighlight} = globalThis.markedHighlight;
+ let new_marked = new marked.Marked(
+ markedHighlight({
+ langPrefix: 'hljs language-',
+ highlight(code, lang) {
+ const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+ return hljs.highlight(code, { language }).value;
+ }}));
+ new_marked.use({
+ pedantic: false,
+ gfm: true,
+ });
+ previewContent = document.querySelector("#output");
+ var markdownContent = editor.getValue();
+ var htmlContent = new_marked.parse(markdownContent) //work on error handling for invalid markdown
+ previewContent.innerHTML = htmlContent;
+ }
editor.getSession().on("change", function(e){
- updatePreview()
- })
- //do the fetch here
+ updatePreview()
+ })
var data = {{ content|tojson }}
editor.setValue(data, -1);
-
- });
+ });
</script>
diff --git a/gn2/wqflask/templates/gn_editor_commit.html b/gn2/wqflask/templates/gn_editor_commit.html
index 0ea20adb..8fd1547b 100644
--- a/gn2/wqflask/templates/gn_editor_commit.html
+++ b/gn2/wqflask/templates/gn_editor_commit.html
@@ -9,41 +9,50 @@
<div>
<div class="row">
<label class="col-sm-4" for="message"> <i>*Commit Message*</i></label>
-
</div>
<br>
<div class="row">
<textarea rows="12" class="col-sm-12" name="message" required id="commit-message">
</textarea>
-
</div>
</div>
<br>
<br>
<div class="row">
<button id="btn-commit"
- class="btn btn-primary col-sm-2 col-sm-offset-1">
+ class="btn btn-primary col-sm-2 col-sm-offset-1">
Commit
</button>
+ <button id="btn-diff"
+ class="btn col-sm-2 col-sm-offset-1">
+ Show Diff
+ </button>
</div>
<br>
-
+ <div id="diff_page">
+ </div>
</div>
</section>
{% block js %}
-
- <script>
+<script>
htmx.on("#btn-commit", "click", function(event){
let msg = htmx.find("#commit-message").value.trim()
if (msg != ""){
- //fire custom event here re
- htmx.find("#output").dispatchEvent(
- new CustomEvent("commitEvent", {
+ htmx.find("#output").dispatchEvent(
+ new CustomEvent("commitEvent", {
+ bubbles: true,
+ detail: {action: 'didInitialize', payload: msg},
+ }),
+ );
+ }
+ })
+ htmx.on("#btn-diff", "click", function(event){
+ htmx.find("#output").dispatchEvent(
+ new CustomEvent("diffEvent", {
bubbles: true,
- detail: {action: 'didInitialize', payload: msg},
+ detail: {},
}),
);
- }
})
</script>
{% endblock %}
diff --git a/gn2/wqflask/templates/gn_editor_results_page.html b/gn2/wqflask/templates/gn_editor_results_page.html
index 8cfa35dc..d502e882 100644
--- a/gn2/wqflask/templates/gn_editor_results_page.html
+++ b/gn2/wqflask/templates/gn_editor_results_page.html
@@ -11,30 +11,29 @@
<h3>Error-message:
<mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{msg}}</i></b></mark></h3>
{% else %}
- <div>
- <h3>New Commit Sha: <span class="lead">
- <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{commit_sha}}</i></b></mark>
- </span></h3>
- <br/>
- <div class="lead"> <h3>Commit Message:
- <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{message}}</i></b></mark>
- </h3>
-
- </div>
+ <div>
+ <h3>New Commit Sha: <span class="lead">
+ <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{commit_sha}}</i></b></mark>
+ </span></h3>
+ <br/>
+ <div class="lead"> <h3>Commit Message:
+ <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{message}}</i></b></mark>
+ </h3>
+
+ </div>
</div>
{% endif %}
- <br>
+ <br>
</div>
</section>
-
-{% block js %}
+{% block js %}
<script>
var commitSha = "{{ commit_sha }}";
if (commitSha !="" && commitSha!= undefined){
- localStorage.setItem("gn_editor_sha", commitSha)
+ localStorage.setItem("gn_editor_sha", commitSha)
}
-
+
</script>
{% endblock %}
generated by cgit v1.2.3 (git 2.44.0) at 2024-11-23 21:07:03 +0000