274 lines
9.7 KiB
JavaScript
274 lines
9.7 KiB
JavaScript
/**
|
|
* @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[]}
|
|
*/
|
|
window.soundbankdata = [];
|
|
/**
|
|
* Currently selected soundbank row in the table
|
|
* @type {JQuery<HTMLElement>|null}
|
|
*/
|
|
window.selectedsoundrow = null;
|
|
|
|
/**
|
|
* List of sound files in the soundbank directory, that ends with .wav or .mp3
|
|
* @type {string[]}
|
|
*/
|
|
window.soundbankfiles = [];
|
|
|
|
/**
|
|
* Select2 data source
|
|
* See https://select2.org/data-sources/formats
|
|
* @type {Select2item[]}
|
|
*/
|
|
window.select2data = [];
|
|
|
|
/**
|
|
* Reload sound bank from server
|
|
* @param {String} APIURL API URL endpoint, default "SoundBank/"
|
|
*/
|
|
function reloadSoundBank(APIURL = "SoundBank/") {
|
|
window.soundbankdata = [];
|
|
fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
|
|
|
|
if (Array.isArray(okdata)) {
|
|
window.soundbankdata.push(...okdata);
|
|
window.selectedsoundrow = null;
|
|
fill_soundbanktablebody(window.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 (window.selectedsoundrow) {
|
|
window.selectedsoundrow.find('td').css('background-color', '');
|
|
if (window.selectedsoundrow.is($(this))) {
|
|
window.selectedsoundrow = null;
|
|
$('#btnRemove').prop('disabled', true);
|
|
$('#btnEdit').prop('disabled', true);
|
|
return;
|
|
}
|
|
}
|
|
$(this).find('td').css('background-color', '#ffeeba');
|
|
window.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/") {
|
|
window.soundbankfiles = [];
|
|
fetchAPI(APIURL + "ListFiles", "GET", {}, null, (okdata) => {
|
|
// okdata is a string contains elements separated by semicolon ;
|
|
if (Array.isArray(okdata)) {
|
|
window.soundbankfiles = okdata.filter(item => item.trim().length > 0);
|
|
// refill select2data
|
|
window.select2data = window.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();
|
|
window.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("window.select2data has " + window.select2data.length + " items");
|
|
$('#modalpath').select2({
|
|
data: window.select2data
|
|
})
|
|
}
|
|
|
|
reloadSoundBank(APIURL);
|
|
$('#findsoundbank').on('input', function () {
|
|
let searchTerm = $(this).val().trim().toLowerCase();
|
|
if (searchTerm.length > 0) {
|
|
window.selectedsoundrow = null;
|
|
let filtered = window.soundbankdata.filter(item => item.description.toLowerCase().includes(searchTerm) || item.tag.toLowerCase().includes(searchTerm) || item.path.toLowerCase().includes(searchTerm));
|
|
fill_soundbanktablebody(filtered);
|
|
} else {
|
|
window.selectedsoundrow = null;
|
|
fill_soundbanktablebody(window.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 (window.selectedsoundrow) {
|
|
let cells = window.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 (window.selectedsoundrow) {
|
|
let cells = window.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);
|
|
});
|
|
});
|
|
}); |