From 83e3157ad14f322ddd798f5df7ae8f0df73d14c9 Mon Sep 17 00:00:00 2001
From: krateng <git.noreply@krateng.ch>
Date: Sun, 17 Apr 2022 15:15:29 +0200
Subject: [PATCH] Can now cancel editing

---
 maloja/web/jinja/artist.jinja     |  2 ++
 maloja/web/jinja/icons/edit.jinja |  1 -
 maloja/web/jinja/track.jinja      |  2 ++
 maloja/web/static/js/edit.js      | 56 +++++++++++++++++++------------
 4 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/maloja/web/jinja/artist.jinja b/maloja/web/jinja/artist.jinja
index 07bd7ef..f896ea8 100644
--- a/maloja/web/jinja/artist.jinja
+++ b/maloja/web/jinja/artist.jinja
@@ -6,6 +6,7 @@
 
 {% block scripts %}
 	<script src="/rangeselect.js"></script>
+	<script src="/edit.js"></script>
 {% endblock %}
 
 {% set artist = filterkeys.artist %}
@@ -32,6 +33,7 @@
 <script>
 	const entity_id = {{ info.id }};
 	const entity_type = 'artist';
+	const entity_name = {{ artist | tojson }};
 </script>
 
 
diff --git a/maloja/web/jinja/icons/edit.jinja b/maloja/web/jinja/icons/edit.jinja
index 8d3ee34..4ffb9f0 100644
--- a/maloja/web/jinja/icons/edit.jinja
+++ b/maloja/web/jinja/icons/edit.jinja
@@ -1,4 +1,3 @@
-<script src="/edit.js"></script>
 <div title="Edit" id="editicon" class="clickable_icon" onclick="editEntity()">
 	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
 		 viewBox="0 0 59.985 59.985" style="enable-background:new 0 0 59.985 59.985;" xml:space="preserve">
diff --git a/maloja/web/jinja/track.jinja b/maloja/web/jinja/track.jinja
index 49ef8b8..17d79e9 100644
--- a/maloja/web/jinja/track.jinja
+++ b/maloja/web/jinja/track.jinja
@@ -5,6 +5,7 @@
 
 {% block scripts %}
 	<script src="/rangeselect.js"></script>
+	<script src="/edit.js"></script>
 	<script>
 		function scrobble(encodedtrack) {
 			neo.xhttprequest('/apis/mlj_1/newscrobble?nofix&' + encodedtrack,data={},method="POST").then(response=>{window.location.reload()});
@@ -26,6 +27,7 @@
 <script>
 	const entity_id = {{ info.id }};
 	const entity_type = 'track';
+	const entity_name = {{ track.title | tojson }};
 </script>
 
 
diff --git a/maloja/web/static/js/edit.js b/maloja/web/static/js/edit.js
index a86c9ee..8c53ea1 100644
--- a/maloja/web/static/js/edit.js
+++ b/maloja/web/static/js/edit.js
@@ -1,5 +1,7 @@
 // JS for all web interface editing / deletion of scrobble data
 
+
+
 function toggleDeleteConfirm(element) {
 	element.parentElement.parentElement.classList.toggle('active');
 }
@@ -22,15 +24,22 @@ function selectAll(e) {
 }
 
 function editEntity() {
+
 	var namefield = document.getElementById('main_entity_name');
 	namefield.contentEditable = "plaintext-only";
 
-	// dont allow new lines, done on enter
-	namefield.addEventListener('keypress',function(e){
-		if (e.which === 13) {
+	namefield.addEventListener('keydown',function(e){
+		// dont allow new lines, done on enter
+		if (e.key === "Enter") {
 			e.preventDefault();
 			namefield.blur(); // this leads to below
 		}
+		// cancel on esc
+		else if (e.key === "Escape" || e.key === "Esc") {
+			e.preventDefault();
+			namefield.innerHTML = entity_name;
+			namefield.blur();
+		}
 
 	})
 	// emergency, not pretty because it will move cursor
@@ -54,25 +63,30 @@ function editEntity() {
 function doneEditing() {
 	var namefield = document.getElementById('main_entity_name');
 	namefield.contentEditable = "false";
-	newname = document.getElementById('main_entity_name').innerHTML;
-	var searchParams = new URLSearchParams(window.location.search);
+	newname = namefield.innerHTML;
 
-	if (entity_type == 'artist') {
-		var endpoint = "/apis/mlj_1/edit_artist";
-	    searchParams.set("artist", newname);
-		var payload = {'id':entity_id,'name':newname};
-	}
-	else if (entity_type == 'track') {
-		var endpoint = "/apis/mlj_1/edit_track";
-	    searchParams.set("title", newname);
-		var payload = {'id':entity_id,'title':newname}
+	if (newname != entity_name) {
+		var searchParams = new URLSearchParams(window.location.search);
+
+		if (entity_type == 'artist') {
+			var endpoint = "/apis/mlj_1/edit_artist";
+		    searchParams.set("artist", newname);
+			var payload = {'id':entity_id,'name':newname};
+		}
+		else if (entity_type == 'track') {
+			var endpoint = "/apis/mlj_1/edit_track";
+		    searchParams.set("title", newname);
+			var payload = {'id':entity_id,'title':newname}
+		}
+
+		neo.xhttpreq(
+			endpoint,
+			data=payload,
+			method="POST",
+			callback=(()=>window.location = "?" + searchParams.toString()),
+			json=true
+		);
 	}
 
-	neo.xhttpreq(
-		endpoint,
-		data=payload,
-		method="POST",
-		callback=(()=>window.location = "?" + searchParams.toString()),
-		json=true
-	);
+
 }