lucretia/embeddingsearch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #46 from LD-Reborn/41-create-a-front-end---toasts

Browse Source 
41 create a front end   toasts
This commit is contained in:
LD50
2025-12-23 14:55:39 +01:00
committed by GitHub
parent 89f8aa6591 e64f4ca555
commit cce42d8ec3
3 changed files with 118 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/Server/Views/Home/Index.cshtml
View File

@@ -85,7 +85,6 @@
<div class="me-3"> <div class="me-3">
<strong>@T["Database size"]:</strong> <span id="databaseUtilization">0.00MiB</span> <strong>@T["Database size"]:</strong> <span id="databaseUtilization">0.00MiB</span>
</div> </div>
<button id="cacheClear" class="btn btn-warning btn-sm">@T["Clear"]</button>
</div> </div>
<!-- Recent Queries --> <!-- Recent Queries -->
@@ -744,7 +743,7 @@
"attributes": attributes, "attributes": attributes,
"datapoints": datapoints "datapoints": datapoints
}]; }];
// TODO add throbber to indicate loading showToast("@T["Creating entity"]", "primary");
fetch(`/Entity/Index`, { fetch(`/Entity/Index`, {
method: 'POST', method: 'POST',
headers: { headers: {
@@ -754,14 +753,15 @@
}).then(async response => { }).then(async response => {
result = await response.json(); result = await response.json();
if (response.ok && result.Success) { if (response.ok && result.Success) {
// TODO add toast showToast("@T["Entity was created successfully"]", "success");
console.log('Entity was created successfully'); console.log('Entity was created successfully');
selectDomain(getSelectedDomainKey()); selectDomain(getSelectedDomainKey());
} else { } else {
// TODO add toast showToast("@T["Failed to create entity"]", "danger");
console.error('Failed to create entity:', result.Message); console.error('Failed to create entity:', result.Message);
} }
}).catch(error => { }).catch(error => {
showToast("@T["Failed to create entity"]", "danger");
console.error('Error creating entity:', error); console.error('Error creating entity:', error);
}); });
@@ -781,15 +781,16 @@
method: 'GET' method: 'GET'
}).then(response => { }).then(response => {
if (response.ok) { if (response.ok) {
// TODO add toast showToast("@T["Searchdomain was created successfully"]", "success");
console.log('Searchdomain created successfully'); console.log('Searchdomain created successfully');
// Reload the page to show the new searchdomain // Reload the page to show the new searchdomain
location.reload(); location.reload();
} else { } else {
// TODO add toast showToast("@T["Failed to create searchdomain"]", "danger");
console.error('Failed to create searchdomain'); console.error('Failed to create searchdomain');
} }
}).catch(error => { }).catch(error => {
showToast("@T["Failed to create searchdomain"]", "danger");
console.error('Error creating searchdomain:', error); console.error('Error creating searchdomain:', error);
}); });
}); });
@@ -802,15 +803,16 @@
method: 'GET' method: 'GET'
}).then(response => { }).then(response => {
if (response.ok) { if (response.ok) {
// TODO add toast showToast("@T["Searchdomain cache was cleared successfully"]", "success");
console.log('Searchdomain cache cleared successfully'); console.log('Searchdomain cache cleared successfully');
// Update cache utilization display // Update cache utilization display
document.querySelector('#cacheUtilization').innerText = '0.00MiB'; document.querySelector('#cacheUtilization').innerText = '0.00MiB';
} else { } else {
// TODO add toast showToast("@T["Failed to clear searchdomain cache"]", "danger");
console.error('Failed to clear searchdomain cache'); console.error('Failed to clear searchdomain cache');
} }
}).catch(error => { }).catch(error => {
showToast("@T["Failed to clear searchdomain cache"]", "danger");
console.error('Error clearing searchdomain cache:', error); console.error('Error clearing searchdomain cache:', error);
}); });
}); });
@@ -825,11 +827,11 @@
}).then(async response => { }).then(async response => {
let result = await response.json(); let result = await response.json();
if (response.ok && result.Success) { if (response.ok && result.Success) {
// TODO add toast showToast("@T["Entity was deleted successfully"]", "success");
console.log('Entity deleted successfully'); console.log('Entity deleted successfully');
selectDomain(getSelectedDomainKey()); selectDomain(getSelectedDomainKey());
} else { } else {
// TODO add toast showToast("@T["Failed to delete entity"]", "danger");
console.error('Failed to delete entity:', result.Message); console.error('Failed to delete entity:', result.Message);
} }
}).catch(error => { }).catch(error => {
@@ -865,8 +867,7 @@
"attributes": attributes, "attributes": attributes,
"datapoints": datapoints "datapoints": datapoints
}]; }];
console.log(data); showToast("@T["Updating entity"]", "primary");
// TODO add throbber to indicate loading
fetch(`/Entity/Index`, { fetch(`/Entity/Index`, {
method: 'POST', method: 'POST',
headers: { headers: {
@@ -876,15 +877,16 @@
}).then(async response => { }).then(async response => {
result = await response.json(); result = await response.json();
if (response.ok && result.Success) { if (response.ok && result.Success) {
// TODO add toast showToast("@T["Entity was updated successfully"]", "success");
console.log('Entity was created successfully'); console.log('Entity was updated successfully');
selectDomain(getSelectedDomainKey()); selectDomain(getSelectedDomainKey());
} else { } else {
// TODO add toast showToast("@T["Failed to update entity"]", "danger");
console.error('Failed to create entity:', result.Message); console.error('Failed to update entity:', result.Message);
} }
}).catch(error => { }).catch(error => {
console.error('Error creating entity:', error); showToast("@T["Failed to update entity"]", "danger");
console.error('Error update entity:', error);
}); });
}); });
@@ -901,15 +903,16 @@
}).then(async response => { }).then(async response => {
result = await response.json(); result = await response.json();
if (response.ok && result.Success) { if (response.ok && result.Success) {
// TODO add toast showToast("@T["Search query was deleted successfully"]", "success");
console.log('Search query was deleted successfully'); console.log('Search query was deleted successfully');
selectDomain(getSelectedDomainKey()); selectDomain(getSelectedDomainKey());
} else { } else {
// TODO add toast showToast("@T["Failed to delete search query"]", "danger");
console.error('Failed to delete query:', result.Message); console.error('Failed to delete search query:', result.Message);
} }
}).catch(error => { }).catch(error => {
console.error('Error creating entity:', error); showToast("@T["Failed to delete search query"]", "danger");
console.error('Failed to delete search query:', error);
}); });
}); });
document document
@@ -928,15 +931,16 @@
}).then(async response => { }).then(async response => {
result = await response.json(); result = await response.json();
if (response.ok && result.Success) { if (response.ok && result.Success) {
// TODO add toast showToast("@T["Searchdomain was created successfully"]", "success");
console.log('Search query was deleted successfully'); console.log('Search query was updated successfully');
selectDomain(getSelectedDomainKey()); selectDomain(getSelectedDomainKey());
} else { } else {
// TODO add toast showToast("@T["Updating search query failed"]", "danger");
console.error('Failed to delete query:', result.Message); console.error('Updating search query failed:', result.Message);
} }
}).catch(error => { }).catch(error => {
console.error('Error creating entity:', error); showToast("@T["Updating search query failed"]", "danger");
console.error('Updating search query failed:', error);
}); });
}); });
}); });
@@ -945,18 +949,20 @@
// Implement delete logic here // Implement delete logic here
fetch(`/Searchdomain/Delete?searchdomain=${encodeURI(domains[domainKey])}`, { fetch(`/Searchdomain/Delete?searchdomain=${encodeURI(domains[domainKey])}`, {
method: 'GET' method: 'GET'
}).then(response => { }).then(async response => {
if (response.ok) { var result = await response.json();;
// TODO add toast if (response.ok && result.Success === true) {
showToast("@T["Searchdomain was deleted successfully"]", "success");
// Remove from sidebar // Remove from sidebar
var domainItem = document.getElementById('sidebar_domain_' + domainKey); var domainItem = document.getElementById('sidebar_domain_' + domainKey);
domainItem.remove(); domainItem.remove();
console.log('Searchdomain deleted successfully'); console.log('Searchdomain deleted successfully');
} else { } else {
// TODO add toast showToast("@T["Failed to delete searchdomain"]", "danger");
console.error('Failed to delete searchdomain'); console.error('Failed to delete searchdomain:', result.Message);
} }
}).catch(error => { }).catch(error => {
showToast("@T["Failed to delete searchdomain"]", "danger");
console.error('Error deleting searchdomain:', error); console.error('Error deleting searchdomain:', error);
}); });
} }
@@ -965,9 +971,10 @@
// Implement rename logic here // Implement rename logic here
fetch(`/Searchdomain/Update?searchdomain=${encodeURI(domains[domainKey])}&newName=${newName}`, { fetch(`/Searchdomain/Update?searchdomain=${encodeURI(domains[domainKey])}&newName=${newName}`, {
method: 'GET' method: 'GET'
}).then(response => { }).then(async response => {
if (response.ok) { var result = await response.json();
// TODO add toast if (response.ok && result.Success === true) {
showToast("@T["Searchdomain was renamed successfully"]", "success");
// Update sidebar and header name // Update sidebar and header name
var domainItem = document.getElementById('sidebar_domain_' + domainKey); var domainItem = document.getElementById('sidebar_domain_' + domainKey);
domainItem.innerText = newName; domainItem.innerText = newName;
@@ -976,11 +983,12 @@
console.log('Searchdomain renamed successfully'); console.log('Searchdomain renamed successfully');
} else { } else {
// TODO add toast showToast("@T["Failed to rename searchdomain"]", "danger");
console.error('Failed to rename searchdomain'); console.error('Failed to rename searchdomain:', result.Message);
} }
}).catch(error => { }).catch(error => {
console.error('Error renaming searchdomain:', error); showToast("@T["Failed to rename searchdomain"]", "danger");
console.error('Failed to rename searchdomain:', error);
}); });
} }
@@ -992,15 +1000,17 @@
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify(newSettings) body: JSON.stringify(newSettings)
}).then(response => { }).then(async response => {
if (response.ok) { var result = await response.json();
// TODO add toast if (response.ok && result.Success === true) {
showToast("@T["Searchdomain settings were updated successfully"]", "success");
console.log('Searchdomain settings updated successfully'); console.log('Searchdomain settings updated successfully');
} else { } else {
// TODO add toast showToast("@T["Updating searchdomain settings failed"]", "danger");
console.error('Failed to update searchdomain settings'); console.error('Failed to update searchdomain settings');
} }
}).catch(error => { }).catch(error => {
showToast("@T["Updating searchdomain settings failed"]", "danger");
console.error('Error updating searchdomain settings:', error); console.error('Error updating searchdomain settings:', error);
}); });
} }
@@ -1045,37 +1055,37 @@
let entitiesUrl = `/Entity/List?searchdomain=${encodeURIComponent(domainName)}&returnEmbeddings=false&returnModels=true`; let entitiesUrl = `/Entity/List?searchdomain=${encodeURIComponent(domainName)}&returnEmbeddings=false&returnModels=true`;
let entitiesCard = document.querySelector("#entitiesTable").parentElement; let entitiesCard = document.querySelector("#entitiesTable").parentElement;
clearEntitiesTable(); clearEntitiesTable();
showEntitiesLoading(entitiesCard); showThrobber(entitiesCard);
fetch(entitiesUrl) fetch(entitiesUrl)
.then(r => r.json()) .then(r => r.json())
.then(data => { .then(data => {
entities = data.Results; entities = data.Results;
populateEntitiesTable(); populateEntitiesTable();
hideEntitiesLoading(entitiesCard); hideThrobber(entitiesCard);
}) })
.catch(err => { .catch(err => {
console.error(err); console.error(err);
flagSearchdomainAsErroneous(domainKey); flagSearchdomainAsErroneous(domainKey);
hideEntitiesLoading(entitiesCard); hideThrobber(entitiesCard);
}); });
/* ---------- QUERIES ---------- */ /* ---------- QUERIES ---------- */
let queriesUrl = `/Searchdomain/GetSearches?searchdomain=${encodeURIComponent(domainName)}`; let queriesUrl = `/Searchdomain/GetSearches?searchdomain=${encodeURIComponent(domainName)}`;
let queriesCard = document.querySelector("#queriesTable").parentElement; let queriesCard = document.querySelector("#queriesTable").parentElement;
clearQueriesTable(); clearQueriesTable();
showQueriesLoading(queriesCard); showThrobber(queriesCard);
fetch(queriesUrl) fetch(queriesUrl)
.then(r => r.json()) .then(r => r.json())
.then(data => { .then(data => {
queries = Object.entries(data.Searches).map(key => ({"Name": key[0], "AccessDateTimes": key[1].AccessDateTimes, "Results": key[1].Results})); queries = Object.entries(data.Searches).map(key => ({"Name": key[0], "AccessDateTimes": key[1].AccessDateTimes, "Results": key[1].Results}));
populateQueriesTable(); populateQueriesTable();
hideQueriesLoading(queriesCard); hideThrobber(queriesCard);
}) })
.catch(err => { .catch(err => {
console.error('Error fetching queries:', err); console.error('Error fetching queries:', err);
hideQueriesLoading(queriesCard); hideThrobber(queriesCard);
}); });
searchdomainConfigPromise.then(searchdomainConfig => { searchdomainConfigPromise.then(searchdomainConfig => {
@@ -1085,9 +1095,8 @@
configElementCachereconciliation.checked = searchdomainConfig.Settings.CacheReconciliation; configElementCachereconciliation.checked = searchdomainConfig.Settings.CacheReconciliation;
configElementCachereconciliation.disabled = false; configElementCachereconciliation.disabled = false;
} else { } else {
//configElement.value = 'Error fetching searchdomain config';
configElementCachereconciliation.disabled = true; configElementCachereconciliation.disabled = true;
// TODO add toast showToast("@T["Unable to fetch searchdomain config"]", "danger");
console.error('Failed to fetch searchdomain config'); console.error('Failed to fetch searchdomain config');
} }
}); });
@@ -1097,7 +1106,7 @@
document.querySelector('#cacheUtilization').innerText = document.querySelector('#cacheUtilization').innerText =
`${NumberOfBytesAsHumanReadable(cacheUtilization.SearchCacheSizeBytes)}`; `${NumberOfBytesAsHumanReadable(cacheUtilization.SearchCacheSizeBytes)}`;
} else { } else {
// TODO add toast showToast("@T["Unable to fetch searchdomain cache utilization"]", "danger");
console.error('Failed to fetch searchdomain cache utilization'); console.error('Failed to fetch searchdomain cache utilization');
} }
}); });
@@ -1108,7 +1117,7 @@
document.querySelector('#databaseUtilization').innerText = document.querySelector('#databaseUtilization').innerText =
`${NumberOfBytesAsHumanReadable(databaseUtilization.SearchdomainDatabaseSizeBytes)}`; `${NumberOfBytesAsHumanReadable(databaseUtilization.SearchdomainDatabaseSizeBytes)}`;
} else { } else {
// TODO add toast showToast("@T["Unable to fetch searchdomain database utilization"]", "danger");
console.error('Failed to fetch searchdomain database utilization'); console.error('Failed to fetch searchdomain database utilization');
} }
}); });
@@ -1275,26 +1284,16 @@
domainItem.classList.add('list-group-item-danger'); domainItem.classList.add('list-group-item-danger');
} }
function showEntitiesLoading(element = null) { function showThrobber(element = null) {
if (element == null) element = document; if (element == null) element = document;
element.querySelector('.spinner').classList.remove('d-none'); element.querySelector('.spinner').classList.remove('d-none');
} }
function hideEntitiesLoading(element = null) { function hideThrobber(element = null) {
if (element == null) element = document; if (element == null) element = document;
element.querySelector('.spinner').classList.add('d-none'); element.querySelector('.spinner').classList.add('d-none');
} }
function showQueriesLoading(element = null) {
if (!element) element = document;
element.querySelector('.spinner').classList.remove('d-none');
}
function hideQueriesLoading(element = null) {
if (!element) element = document;
element.querySelector('.spinner').classList.add('d-none');
}
function showEntityDetails(entity) { function showEntityDetails(entity) {
// Title // Title
document.getElementById('entityDetailsTitle').innerText = entity.Name; document.getElementById('entityDetailsTitle').innerText = entity.Name;

10
src/Server/Views/Shared/_Layout.cshtml
View File

@@ -1,4 +1,7 @@
<!DOCTYPE html> @using Server.Services
@inject LocalizationService T
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@@ -6,6 +9,11 @@
<title>@ViewData["Title"] - embeddingsearch</title> <title>@ViewData["Title"] - embeddingsearch</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<script>
window.appTranslations = {
closeAlert: '@T["Close alert"]'
};
</script>
</head> </head>
<body> <body>
<header> <header>

47
src/Server/wwwroot/js/site.js
View File

@@ -2,3 +2,50 @@
// for details on configuring this project to bundle and minify static web assets. // for details on configuring this project to bundle and minify static web assets.
// Write your JavaScript code. // Write your JavaScript code.
function createToastContainer() {
const container = document.createElement('div');
container.id = 'toastContainer';
container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
container.setAttribute("aria-live", "polite");
container.setAttribute("aria-atomic", "true");
const liveRegion = document.createElement('div');
liveRegion.id = 'toastLiveRegion';
liveRegion.className = 'visually-hidden';
liveRegion.setAttribute('aria-live', 'assertive');
liveRegion.setAttribute('aria-atomic', 'true');
container.appendChild(liveRegion);
document.body.appendChild(container);
return container;
}
// Simple toast helper
function showToast(message, type) {
const toastContainer = document.getElementById('toastContainer') || createToastContainer();
const toast = document.createElement('div');
toast.className = `toast align-items-center text-white bg-${type} border-0`;
toast.role = 'alert';
var useDarkElements = type === "warning"
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">${message}</div>
<button type="button" class="btn-close${useDarkElements ? "" : " btn-close-white"} me-2 m-auto"${useDarkElements ? ' style="filter: unset;"' : ""} data-bs-dismiss="toast" aria-label="${window.appTranslations.closeAlert}"></button>
</div>
`;
if (useDarkElements) {
toast.classList.remove("text-white");
toast.classList.add("text-dark");
}
toastContainer.appendChild(toast);
const liveRegion = document.getElementById('toastLiveRegion');
if (liveRegion) {
liveRegion.textContent = '';
setTimeout(() => liveRegion.textContent = message, 500);
}
const bsToast = new bootstrap.Toast(toast, { delay: 10000 });
bsToast.show();
toast.addEventListener('hidden.bs.toast', () => toast.remove());
}