@@ -152,7 +152,7 @@
{% include "instruments/includes/stdView.html" %}
-
+
{% include "instruments/includes/paginationOptions.html" %}
diff --git a/web-app/django/VIM/templates/main/index.html b/web-app/django/VIM/templates/main/index.html
index eba27298..b274fbac 100644
--- a/web-app/django/VIM/templates/main/index.html
+++ b/web-app/django/VIM/templates/main/index.html
@@ -59,7 +59,7 @@
diff --git a/web-app/django/VIM/urls.py b/web-app/django/VIM/urls.py
index e2255268..d1e0a072 100644
--- a/web-app/django/VIM/urls.py
+++ b/web-app/django/VIM/urls.py
@@ -20,6 +20,7 @@
from django.conf import settings
from VIM.apps.instruments.views.instrument_list import InstrumentList
from VIM.apps.instruments.views.instrument_detail import InstrumentDetail
+from VIM.apps.instruments.views.update_umil_db import update_umil_db
from django.conf.urls.i18n import i18n_patterns
urlpatterns = i18n_patterns(
@@ -27,6 +28,7 @@
path("", include("VIM.apps.main.urls", namespace="main")),
path("instruments/", InstrumentList.as_view(), name="instrument-list"),
path("instrument//", InstrumentDetail.as_view(), name="instrument-detail"),
+ path("instrument//names/", update_umil_db, name="update-umil-db"),
prefix_default_language=False,
)
diff --git a/web-app/frontend/assets/scss/_bootstrap-overrides.scss b/web-app/frontend/assets/scss/_bootstrap-overrides.scss
index cbea240c..179e7091 100644
--- a/web-app/frontend/assets/scss/_bootstrap-overrides.scss
+++ b/web-app/frontend/assets/scss/_bootstrap-overrides.scss
@@ -33,6 +33,20 @@ $pagination-hover-color: $umil-green-primary;
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
+$theme-colors: map-merge(
+ $theme-colors,
+ (
+ "gray": $gray-600,
+ )
+);
+
+$theme-colors-rgb: map-merge(
+ $theme-colors-rgb,
+ (
+ "gray": to-rgb($gray-600),
+ )
+);
+
$position-values: map-merge(
$position-values,
(
@@ -68,8 +82,8 @@ $utilities: map-merge(
class: w,
values: (
20: 20%,
- 30: 30%,
25: 25%,
+ 30: 30%,
50: 50%,
75: 75%,
100: 100%,
diff --git a/web-app/frontend/assets/scss/instruments/index.scss b/web-app/frontend/assets/scss/instruments/index.scss
index 7c314728..3ec17bb3 100644
--- a/web-app/frontend/assets/scss/instruments/index.scss
+++ b/web-app/frontend/assets/scss/instruments/index.scss
@@ -92,7 +92,7 @@ h4 {
left: 0;
width: 100%;
height: 100%;
- object-fit: cover;
+ object-fit: contain;
}
/* jump to top */
diff --git a/web-app/frontend/src/instruments/AddName.ts b/web-app/frontend/src/instruments/AddName.ts
new file mode 100644
index 00000000..28a971f6
--- /dev/null
+++ b/web-app/frontend/src/instruments/AddName.ts
@@ -0,0 +1,141 @@
+import { Modal } from 'bootstrap';
+import { WikidataLanguage, NameEntry } from './Types';
+import { NameValidator } from './helpers/NameValidator';
+import { AddNameManager } from './helpers/AddNameManager';
+
+declare const languages: WikidataLanguage[];
+
+let nameValidator: NameValidator;
+let addNameManager: AddNameManager;
+
+// Handle modal show event - populate instrument data
+const addNameModal = document.getElementById('addNameModal');
+addNameModal.addEventListener('show.bs.modal', function (event) {
+ const triggerButton = (event as any).relatedTarget;
+ if (triggerButton) {
+ const instrumentName = triggerButton.getAttribute('data-instrument-name');
+ const instrumentWikidataId = triggerButton.getAttribute(
+ 'data-instrument-wikidata-id',
+ );
+ const instrumentPk = triggerButton.getAttribute('data-instrument-pk');
+
+ addNameModal.querySelector('#instrumentNameInModal').textContent =
+ instrumentName;
+ addNameModal.querySelector('#instrumentWikidataIdInModal').textContent =
+ instrumentWikidataId;
+ (
+ addNameModal.querySelector('#instrumentPkInModal') as HTMLInputElement
+ ).value = instrumentPk;
+ }
+});
+
+// Reset modal on close
+document
+ .getElementById('addNameModal')
+ .addEventListener('hide.bs.modal', function () {
+ localStorage.removeItem('addNameFormData');
+ });
+
+// Initialize application when DOM is loaded
+document.addEventListener('DOMContentLoaded', function () {
+ // Initialize services
+ nameValidator = new NameValidator(languages);
+ addNameManager = new AddNameManager(languages, nameValidator);
+
+ // Setup form event listeners
+ addNameManager.setupAddRowButton();
+ addNameManager.setupFormSubmission();
+
+ // Handle stored form data
+ const storedFormData = localStorage.getItem('addNameFormData');
+ if (storedFormData) {
+ const addNameModalInstance = new Modal(
+ document.getElementById('addNameModal'),
+ );
+ addNameModalInstance.show();
+ addNameManager.restoreFormData(storedFormData);
+ } else {
+ addNameManager.resetModal();
+ }
+});
+
+// Reset the modal when hidden
+document
+ .getElementById('addNameModal')
+ .addEventListener('hide.bs.modal', () => addNameManager.resetModal());
+
+// Publishing functionality
+// Handle confirm publish action
+document
+ .getElementById('confirmPublishBtn')
+ .addEventListener('click', function () {
+ const wikidataId = document
+ .getElementById('instrumentWikidataIdInModal')
+ .textContent.trim();
+
+ const instrumentPk = (
+ document.getElementById('instrumentPkInModal') as HTMLInputElement
+ ).value;
+
+ const entries: NameEntry[] = [];
+
+ // Collect form data from all rows
+ const nameRows = document.querySelectorAll('.name-row');
+ nameRows.forEach((currentRow) => {
+ const languageInput = currentRow.querySelector(
+ 'input[list]',
+ ) as HTMLInputElement;
+ const nameInput = currentRow.querySelector(
+ '.name-input input[type="text"]',
+ ) as HTMLInputElement;
+ const sourceInput = currentRow.querySelector(
+ '.source-input input[type="text"]',
+ ) as HTMLInputElement;
+
+ entries.push({
+ language: languageInput.value,
+ name: nameInput.value,
+ source: sourceInput.value,
+ });
+ });
+
+ // Get CSRF token and publish to backend
+ const csrfToken = (
+ document.querySelector('[name=csrfmiddlewaretoken]') as HTMLInputElement
+ ).value;
+
+ fetch(`/instrument/${instrumentPk}/names/`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRFToken': csrfToken,
+ },
+ body: JSON.stringify({
+ wikidata_id: wikidataId,
+ entries: entries,
+ }),
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ if (data.status === 'success') {
+ // Close modals
+ const addNameModal = Modal.getInstance(
+ document.getElementById('addNameModal'),
+ );
+ const confirmationModal = Modal.getInstance(
+ document.getElementById('confirmationModal'),
+ );
+
+ addNameModal?.hide();
+ confirmationModal?.hide();
+
+ // Reload to reflect changes
+ window.location.reload();
+ } else {
+ alert('Error: ' + data.message);
+ }
+ })
+ .catch((error) => {
+ alert('An error occurred while publishing: ' + error.message);
+ });
+ });
diff --git a/web-app/frontend/src/instruments/DeleteName.ts b/web-app/frontend/src/instruments/DeleteName.ts
new file mode 100644
index 00000000..fd8bd992
--- /dev/null
+++ b/web-app/frontend/src/instruments/DeleteName.ts
@@ -0,0 +1,21 @@
+import { NameValidator } from './helpers/NameValidator';
+import { DeleteNameManager } from './helpers/DeleteNameManager';
+
+let nameValidator: NameValidator;
+let deleteNameManager: DeleteNameManager;
+
+// Initialize application when DOM is loaded
+document.addEventListener('DOMContentLoaded', function () {
+ // Initialize services
+ nameValidator = new NameValidator();
+ deleteNameManager = new DeleteNameManager(nameValidator);
+
+ // Setup event listeners
+ deleteNameManager.setupModalEvents();
+ deleteNameManager.setupDeleteConfirmation();
+});
+
+// Reset the modal when hidden
+document
+ .getElementById('deleteNameModal')
+ ?.addEventListener('hide.bs.modal', () => deleteNameManager?.resetModal());
diff --git a/web-app/frontend/src/instruments/InstrumentDetail.ts b/web-app/frontend/src/instruments/InstrumentDetail.ts
deleted file mode 100644
index 42a9e9a6..00000000
--- a/web-app/frontend/src/instruments/InstrumentDetail.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
- const editButtons = document.querySelectorAll('.btn-edit');
- const cancelButtons = document.querySelectorAll('.btn-cancel');
- const publishButtons = document.querySelectorAll('.btn-publish');
-
- editButtons.forEach((button) => {
- button.addEventListener('click', function (this: HTMLElement) {
- // Find the edit container using our custom class
- const editContainer = this.closest('.edit-container') as HTMLElement;
-
- const viewField = editContainer.querySelector(
- '.view-field',
- ) as HTMLElement;
- const editField = editContainer.querySelector(
- '.edit-field',
- ) as HTMLElement;
- const cancelBtn = editContainer.querySelector(
- '.btn-cancel',
- ) as HTMLElement;
- const publishBtn = editContainer.querySelector(
- '.btn-publish',
- ) as HTMLElement;
-
- viewField.classList.add('d-none');
- editField.classList.remove('d-none');
- cancelBtn.classList.remove('d-none');
- publishBtn.classList.remove('d-none');
- this.style.display = 'none';
- });
- });
-
- cancelButtons.forEach((button) => {
- button.addEventListener('click', function (this: HTMLElement) {
- // Find the edit container using our custom class
- const editContainer = this.closest('.edit-container') as HTMLElement;
-
- const viewField = editContainer.querySelector(
- '.view-field',
- ) as HTMLElement;
- const editField = editContainer.querySelector(
- '.edit-field',
- ) as HTMLElement;
- const editBtn = editContainer.querySelector('.btn-edit') as HTMLElement;
- const publishBtn = editContainer.querySelector(
- '.btn-publish',
- ) as HTMLElement;
-
- viewField.classList.remove('d-none');
- editField.classList.add('d-none');
- editBtn.style.display = 'inline-block';
- publishBtn.classList.add('d-none');
- this.classList.add('d-none');
- });
- });
-
- publishButtons.forEach((button) => {
- button.addEventListener('click', function (this: HTMLElement) {
- // Find the edit container using our custom class
- const editContainer = this.closest('.edit-container') as HTMLElement;
-
- const viewField = editContainer.querySelector(
- '.view-field',
- ) as HTMLElement;
- const editField = editContainer.querySelector(
- '.edit-field',
- ) as HTMLInputElement;
- const editBtn = editContainer.querySelector('.btn-edit') as HTMLElement;
- const cancelBtn = editContainer.querySelector(
- '.btn-cancel',
- ) as HTMLElement;
-
- const newValue = editField.value;
- // TODO: request to update the value on the server
- viewField.textContent = newValue;
- viewField.classList.remove('d-none');
- editField.classList.add('d-none');
- editBtn.style.display = 'inline-block';
- this.classList.add('d-none');
- cancelBtn.classList.add('d-none');
- });
- });
-});
diff --git a/web-app/frontend/src/instruments/Types.ts b/web-app/frontend/src/instruments/Types.ts
index 3aa60329..a49d1334 100644
--- a/web-app/frontend/src/instruments/Types.ts
+++ b/web-app/frontend/src/instruments/Types.ts
@@ -1,3 +1,49 @@
export type DisplayMode = 'masonry' | 'standard';
export type PaginateBy = 20 | 50 | 100;
+
+/**
+ * Instrument Name Entry
+ */
+export type NameEntry = {
+ language: string;
+ name: string;
+ source: string;
+ alias?: string; // Optional - used during publishing
+};
+
+export type AddNameForm = {
+ display_name: string;
+ wikidata_id: string;
+ names: NameEntry[];
+};
+
+export type WikidataQueryResult = {
+ exists: boolean;
+ name?: string;
+};
+
+export type NameBinding = {
+ nameLabel: {
+ type: string;
+ value: string;
+ 'xml:lang'?: string;
+ };
+};
+
+export type NameQueryResult = {
+ head: { vars: string[] };
+ results: { bindings: NameBinding[] };
+};
+
+export type WikidataLanguage = {
+ wikidata_code: string;
+ autonym: string;
+ en_label: string;
+};
+
+export type ValidationResult = {
+ isValid: boolean;
+ message: string;
+ type: 'success' | 'error' | 'warning';
+};
diff --git a/web-app/frontend/src/instruments/helpers/AddNameManager.ts b/web-app/frontend/src/instruments/helpers/AddNameManager.ts
new file mode 100644
index 00000000..6d153f6f
--- /dev/null
+++ b/web-app/frontend/src/instruments/helpers/AddNameManager.ts
@@ -0,0 +1,296 @@
+import { WikidataLanguage, AddNameForm, NameEntry } from '../Types';
+import { NameValidator } from './NameValidator';
+import { Modal } from 'bootstrap';
+
+export class AddNameManager {
+ private rowIndex: number = 1;
+ private languages: WikidataLanguage[];
+ private nameValidator: NameValidator;
+
+ constructor(languages: WikidataLanguage[], nameValidator: NameValidator) {
+ this.languages = languages;
+ this.nameValidator = nameValidator;
+ }
+
+ /**
+ * Creates a new name row with language, name, and source inputs
+ */
+ createNameRow(index: number): HTMLDivElement {
+ const row: HTMLDivElement = document.createElement('div');
+ row.classList.add('row', 'mb-1', 'name-row');
+
+ // Create datalist options dynamically using the languages
+ let datalistOptions: string = this.languages
+ .map(
+ (language: WikidataLanguage) => `
+
+ `,
+ )
+ .join('');
+
+ row.innerHTML = `
+
+
+
+
+
+
+
+ `;
+
+ // Add event listener for remove button
+ const removeButton = row.querySelector(
+ '.remove-row-btn',
+ ) as HTMLButtonElement;
+ removeButton.addEventListener('click', () => {
+ row.remove();
+ this.updateRemoveButtons(); // Ensure correct behavior when rows are removed
+ });
+
+ return row;
+ }
+
+ /**
+ * Updates remove button visibility based on the number of rows
+ */
+ updateRemoveButtons(): void {
+ const rows = document.querySelectorAll('.name-row');
+ rows.forEach((currentRow, rowIndex) => {
+ const removeButton = currentRow.querySelector('.remove-row-btn');
+ // Show the remove button only if there are more than one row
+ if (rows.length > 1) {
+ (removeButton as HTMLElement).style.display = 'inline-block';
+ } else {
+ (removeButton as HTMLElement).style.display = 'none'; // Hide the button if only one row remains
+ }
+ });
+ }
+
+ /**
+ * Resets the modal and ensures only one row is present
+ */
+ resetModal(): void {
+ const nameRows = document.getElementById('nameRows');
+ nameRows.innerHTML = ''; // Clear all rows
+ nameRows.appendChild(this.createNameRow(1)); // Add initial row
+ this.updateRemoveButtons(); // Ensure remove buttons are updated on reset
+ this.rowIndex = 1; // Reset row index
+ }
+
+ /**
+ * Adds a new name row to the form
+ */
+ addNameRow(): void {
+ this.rowIndex++;
+ const nameRows = document.getElementById('nameRows');
+ nameRows.appendChild(this.createNameRow(this.rowIndex));
+ this.updateRemoveButtons(); // Update remove buttons after adding a new row
+ }
+
+ /**
+ * Gets the current row index
+ */
+ getCurrentRowIndex(): number {
+ return this.rowIndex;
+ }
+
+ /**
+ * Sets up event listeners for the add row button
+ */
+ setupAddRowButton(): void {
+ document.getElementById('addRowBtn').addEventListener('click', () => {
+ this.addNameRow();
+ });
+ }
+
+ /**
+ * Validates all form rows and shows confirmation modal if valid
+ */
+ async validateAndSubmitForm(event: Event): Promise {
+ event.preventDefault(); // Prevent form submission
+
+ const nameRows = document.querySelectorAll('.name-row');
+ let allValid = true;
+ let publishResults = ''; // Collect the results for confirmation
+
+ // Validate each row
+ for (let row of nameRows) {
+ const languageInput = row.querySelector(
+ 'input[list]',
+ ) as HTMLInputElement;
+ const nameInput = row.querySelector(
+ '.name-input input[type="text"]',
+ ) as HTMLInputElement;
+ const sourceInput = row.querySelector(
+ '.source-input input[type="text"]',
+ ) as HTMLInputElement;
+
+ const languageCode = languageInput.value;
+ const wikidataId = document
+ .getElementById('instrumentWikidataIdInModal')
+ .textContent.trim();
+
+ // Validate language selection
+ const languageResult = this.nameValidator.validateLanguage(languageInput);
+ const languageContainer = row.querySelector('.language-input');
+ this.nameValidator.displayFeedback(languageContainer, languageResult);
+
+ if (!languageResult.isValid) {
+ allValid = false;
+ continue;
+ }
+
+ try {
+ // Comprehensive name validation
+ const validationResult = await this.nameValidator.validateName(
+ languageCode,
+ nameInput.value,
+ sourceInput.value,
+ wikidataId,
+ );
+
+ // Display feedback for all fields
+ const nameContainer = row.querySelector('.name-input');
+ const sourceContainer = row.querySelector('.source-input');
+
+ this.nameValidator.displayFeedback(
+ nameContainer,
+ validationResult.nameResult,
+ );
+ this.nameValidator.displayFeedback(
+ sourceContainer,
+ validationResult.sourceResult,
+ );
+
+ if (!validationResult.isValid) {
+ allValid = false;
+ continue;
+ }
+
+ // Add to confirmation message with better formatting
+ publishResults += `
+
+
+
Language:
+
${languageCode} (${validationResult.languageDescription})
+
+
+
Name:
+
${nameInput.value}
+
+
+
Source:
+
${sourceInput.value}
+
+