From 56ffde84026a012c0d0c857accce234651d12edf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= Date: Mon, 20 Feb 2023 18:21:48 +0100 Subject: [PATCH] Sync game name and edition name fields for QOL --- games/static/js/qol.js | 29 +++++++++++++++++++++++++++++ games/templates/add_edition.html | 21 +++++++++++++++++++++ games/templates/base.html | 3 ++- games/views.py | 2 +- 4 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 games/static/js/qol.js create mode 100644 games/templates/add_edition.html diff --git a/games/static/js/qol.js b/games/static/js/qol.js new file mode 100644 index 0000000..cda1368 --- /dev/null +++ b/games/static/js/qol.js @@ -0,0 +1,29 @@ +/** + * @description Sync select field with input field until user focuses it. + * @param {HTMLSelectElement} sourceElementSelector + * @param {HTMLInputElement} targetElementSelector + */ +function syncSelectInputUntilChanged( + sourceElementSelector, + targetElementSelector +) { + const sourceElement = document.querySelector(sourceElementSelector); + const targetElement = document.querySelector(targetElementSelector); + function sourceElementHandler(event) { + let selected = event.target.value; + let selectedValue = document.querySelector( + `#id_game option[value='${selected}']` + ).textContent; + targetElement.value = selectedValue; + } + function targetElementHandler(event) { + sourceElement.removeEventListener("change", sourceElementHandler); + } + + sourceElement.addEventListener("change", sourceElementHandler); + targetElement.addEventListener("focus", targetElementHandler); +} + +window.addEventListener("load", () => { + syncSelectInputUntilChanged("#id_game", "#id_name"); +}); diff --git a/games/templates/add_edition.html b/games/templates/add_edition.html new file mode 100644 index 0000000..73784a4 --- /dev/null +++ b/games/templates/add_edition.html @@ -0,0 +1,21 @@ +{% extends "base.html" %} + +{% block title %}{{ title }}{% endblock title %} + +{% block content %} +
+ + {% csrf_token %} + + {{ form.as_table }} + + + +
+
+{% endblock content %} + +{% block scripts %} +{% load static %} + +{% endblock scripts %} \ No newline at end of file diff --git a/games/templates/base.html b/games/templates/base.html index 1161774..46d3787 100644 --- a/games/templates/base.html +++ b/games/templates/base.html @@ -12,7 +12,7 @@ - +
{% load version %} {% version %} ({% version_date %}) + {% block scripts %}{% endblock scripts %} \ No newline at end of file diff --git a/games/views.py b/games/views.py index c09d42f..3dfcc60 100644 --- a/games/views.py +++ b/games/views.py @@ -221,7 +221,7 @@ def add_edition(request): context["form"] = form context["title"] = "Add New Edition" - return render(request, "add.html", context) + return render(request, "add_edition.html", context) def add_platform(request):