commit 18/09/2025
This commit is contained in:
274
html/webpage/assets/js/soundbank.js
Normal file
274
html/webpage/assets/js/soundbank.js
Normal file
@@ -0,0 +1,274 @@
|
||||
/**
|
||||
* @typedef {Object} SoundBank
|
||||
* @property {number} index
|
||||
* @property {string} description
|
||||
* @property {string} tag
|
||||
* @property {string} category
|
||||
* @property {string} language
|
||||
* @property {string} voiceType
|
||||
* @property {string} path
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} Select2item
|
||||
* @property {number} id
|
||||
* @property {string} text
|
||||
*/
|
||||
|
||||
/**
|
||||
* List of Soundbank data loaded from server
|
||||
* @type {SoundBank[]}
|
||||
*/
|
||||
let soundbankdata = [];
|
||||
/**
|
||||
* Currently selected soundbank row in the table
|
||||
* @type {JQuery<HTMLElement>|null}
|
||||
*/
|
||||
let selectedsoundrow = null;
|
||||
|
||||
/**
|
||||
* List of sound files in the soundbank directory, that ends with .wav or .mp3
|
||||
* @type {string[]}
|
||||
*/
|
||||
let soundbankfiles = [];
|
||||
|
||||
/**
|
||||
* Select2 data source
|
||||
* See https://select2.org/data-sources/formats
|
||||
* @type {Select2item[]}
|
||||
*/
|
||||
let select2data = [];
|
||||
|
||||
/**
|
||||
* Reload sound bank from server
|
||||
* @param {String} APIURL API URL endpoint, default "SoundBank/"
|
||||
*/
|
||||
function reloadSoundBank(APIURL = "SoundBank/") {
|
||||
soundbankdata = [];
|
||||
fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
|
||||
|
||||
if (Array.isArray(okdata)) {
|
||||
soundbankdata = okdata;
|
||||
selectedsoundrow = null;
|
||||
fill_soundbanktablebody(soundbankdata);
|
||||
}
|
||||
}, (errdata) => {
|
||||
alert("Error loading soundbank : " + errdata.message);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Fill soundbank table body with values
|
||||
* @param {SoundBank[]} vv values to fill
|
||||
*/
|
||||
function fill_soundbanktablebody(vv) {
|
||||
$('#soundbanktablebody').empty();
|
||||
if (!Array.isArray(vv) || vv.length === 0) return;
|
||||
vv.forEach(item => {
|
||||
const row = `<tr>
|
||||
<td>${item.index}</td>
|
||||
<td>${item.description}</td>
|
||||
<td>${item.tag}</td>
|
||||
<td>${item.category}</td>
|
||||
<td>${item.language}</td>
|
||||
<td>${item.voiceType}</td>
|
||||
<td>${item.path}</td>
|
||||
</tr>`;
|
||||
$('#soundbanktablebody').append(row);
|
||||
let $addedrow = $('#soundbanktablebody tr:last');
|
||||
$addedrow.on('click', function () {
|
||||
if (selectedsoundrow) {
|
||||
selectedsoundrow.find('td').css('background-color', '');
|
||||
if (selectedsoundrow.is($(this))) {
|
||||
selectedsoundrow = null;
|
||||
$('#btnRemove').prop('disabled', true);
|
||||
$('#btnEdit').prop('disabled', true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
$(this).find('td').css('background-color', '#ffeeba');
|
||||
selectedsoundrow = $(this);
|
||||
$('#btnRemove').prop('disabled', false);
|
||||
$('#btnEdit').prop('disabled', false);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$('#tablesize').text("Table Size: " + vv.length);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Reload soundbank files from server
|
||||
* @param {String} APIURL API URL endpoint (default "SoundBank/")
|
||||
*/
|
||||
function reloadSoundbankFiles(APIURL = "SoundBank/") {
|
||||
soundbankfiles = [];
|
||||
fetchAPI(APIURL + "ListFiles", "GET", {}, null, (okdata) => {
|
||||
// okdata is a string contains elements separated by semicolon ;
|
||||
if (Array.isArray(okdata)) {
|
||||
soundbankfiles = okdata.filter(item => item.trim().length > 0);
|
||||
// refill select2data
|
||||
select2data = soundbankfiles.map((item, index) => ({ id: index + 1, text: item }));
|
||||
} else console.log("reloadSoundbankFiles: okdata is not array");
|
||||
}, (errdata) => {
|
||||
alert("Error loading soundbank files : " + errdata.message);
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
console.log("soundbank.js loaded successfully");
|
||||
reloadSoundbankFiles();
|
||||
$('#soundbanktablebody').empty();
|
||||
selectedsoundrow = null;
|
||||
let $btnClear = $('#btnClear');
|
||||
let $btnAdd = $('#btnAdd');
|
||||
let $btnRemove = $('#btnRemove');
|
||||
let $btnEdit = $('#btnEdit');
|
||||
let $btnExport = $('#btnExport');
|
||||
let $btnImport = $('#btnImport');
|
||||
$btnRemove.prop('disabled', true);
|
||||
$btnEdit.prop('disabled', true);
|
||||
let APIURL = "SoundBank/";
|
||||
let $modal = $('#soundbankmodal');
|
||||
let $modalindex = $modal.find('#modalindex');
|
||||
let $modaldescription = $modal.find('#modaldescription');
|
||||
let $modaltag = $modal.find('#modaltag');
|
||||
let $modalcategory = $modal.find('#modalcategory');
|
||||
let $modallanguage = $modal.find('#modallanguage');
|
||||
let $modalvoicetype = $modal.find('#modalvoicetype');
|
||||
let $modalpath = $modal.find('#modalpath');
|
||||
|
||||
/**
|
||||
* Clear soundbank modal inputs
|
||||
*/
|
||||
function clearSoundbankModal() {
|
||||
$modalindex.val('').prop('disabled', true);
|
||||
$modaldescription.val('');
|
||||
$modaltag.val('');
|
||||
// fill modalcategory options from categories[]
|
||||
$modalcategory.empty();
|
||||
categories.forEach(cat => {
|
||||
$modalcategory.append(new Option(cat, cat));
|
||||
});
|
||||
$modalcategory.val(null);
|
||||
// fill modallanguage options from languages[]
|
||||
$modallanguage.empty();
|
||||
languages.forEach(lang => {
|
||||
$modallanguage.append(new Option(lang, lang));
|
||||
});
|
||||
$modallanguage.val(null);
|
||||
// fill modalvoicetype options from voiceTypes[]
|
||||
$modalvoicetype.empty();
|
||||
voiceTypes.forEach(vt => {
|
||||
$modalvoicetype.append(new Option(vt, vt));
|
||||
});
|
||||
$modalvoicetype.val(null);
|
||||
// fill modalpath options from soundbankfiles[]
|
||||
// TODO read https://jeesite.com/front/jquery-select2/4.0/index.htm
|
||||
console.log("select2data has " + select2data.length + " items");
|
||||
$('#modalpath').select2({
|
||||
data: select2data
|
||||
})
|
||||
}
|
||||
|
||||
reloadSoundBank(APIURL);
|
||||
$('#findsoundbank').on('input', function () {
|
||||
let searchTerm = $(this).val().trim().toLowerCase();
|
||||
if (searchTerm.length > 0) {
|
||||
selectedsoundrow = null;
|
||||
let filtered = soundbankdata.filter(item => item.description.toLowerCase().includes(searchTerm) || item.tag.toLowerCase().includes(searchTerm) || item.path.toLowerCase().includes(searchTerm));
|
||||
fill_soundbanktablebody(filtered);
|
||||
} else {
|
||||
selectedsoundrow = null;
|
||||
fill_soundbanktablebody(soundbankdata);
|
||||
}
|
||||
});
|
||||
$btnClear.click(() => {
|
||||
DoClear(APIURL, "Soundbank", (okdata) => {
|
||||
reloadSoundBank(APIURL);
|
||||
alert("Success clear soundbank : " + okdata.message);
|
||||
}, (errdata) => {
|
||||
alert("Error clear soundbank : " + errdata.message);
|
||||
});
|
||||
|
||||
});
|
||||
$btnAdd.click(() => {
|
||||
|
||||
$modal.modal('show');
|
||||
clearSoundbankModal();
|
||||
// event on Click save button
|
||||
$modal.off('click.soundbanksave').on('click.soundbanksave', '#soundbanksave', function () {
|
||||
//TODO Add soundbank save process here
|
||||
$modal.modal('hide');
|
||||
});
|
||||
// event on Click close button
|
||||
$modal.off('click.soundbankclose').on('click.soundbankclose', '#soundbankclose', function () {
|
||||
$modal.modal('hide');
|
||||
});
|
||||
});
|
||||
$btnRemove.click(() => {
|
||||
if (selectedsoundrow) {
|
||||
let cells = selectedsoundrow.find('td');
|
||||
/** @type {SoundBank} */
|
||||
let sb = {
|
||||
index: cells.eq(0).text(),
|
||||
description: cells.eq(1).text(),
|
||||
tag: cells.eq(2).text(),
|
||||
category: cells.eq(3).text(),
|
||||
language: cells.eq(4).text(),
|
||||
voiceType: cells.eq(5).text(),
|
||||
path: cells.eq(6).text()
|
||||
}
|
||||
if (confirm(`Are you sure to delete soundbank [${sb.index}] Description=${sb.description} Tag=${sb.tag}?`)) {
|
||||
fetchAPI(APIURL + "DeleteByIndex/" + sb.index, "DELETE", {}, null, (okdata) => {
|
||||
reloadSoundBank(APIURL);
|
||||
alert("Success delete soundbank : " + okdata.message);
|
||||
}, (errdata) => {
|
||||
alert("Error delete soundbank : " + errdata.message);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
$btnEdit.click(() => {
|
||||
if (selectedsoundrow) {
|
||||
let cells = selectedsoundrow.find('td');
|
||||
/** @type {SoundBank} */
|
||||
let sb = {
|
||||
index: cells.eq(0).text(),
|
||||
description: cells.eq(1).text(),
|
||||
tag: cells.eq(2).text(),
|
||||
category: cells.eq(3).text(),
|
||||
language: cells.eq(4).text(),
|
||||
voiceType: cells.eq(5).text(),
|
||||
path: cells.eq(6).text()
|
||||
}
|
||||
if (confirm(`Are you sure to edit soundbank [${sb.index}] Description=${sb.description} Tag=${sb.tag}?`)) {
|
||||
$modal.modal('show');
|
||||
$modal.off('hidden.bs.modal').on('hidden.bs.modal', function () {
|
||||
|
||||
// event on Click save button
|
||||
$modal.off('click.soundbanksave').on('click.soundbanksave', '#soundbanksave', function () {
|
||||
//TODO Add soundbank save process here
|
||||
$modal.modal('hide');
|
||||
});
|
||||
// event on Click close button
|
||||
$modal.off('click.soundbankclose').on('click.soundbankclose', '#soundbankclose', function () {
|
||||
$modal.modal('hide');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
$btnExport.click(() => {
|
||||
DoExport(APIURL, "soundbank.xlsx", {});
|
||||
});
|
||||
$btnImport.click(() => {
|
||||
DoImport(APIURL, (okdata) => {
|
||||
reloadSoundBank(APIURL);
|
||||
alert("Success import soundbank : " + okdata.message);
|
||||
}, (errdata) => {
|
||||
alert("Error importing soundbank from XLSX : " + errdata.message);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user