diff --git a/html/webpage/assets/js/script.js b/html/webpage/assets/js/script.js index f9577dd..7d45816 100644 --- a/html/webpage/assets/js/script.js +++ b/html/webpage/assets/js/script.js @@ -56,6 +56,15 @@ * @property {string} text */ +/** + * @typedef {Object} BroadcastZone + * @property {number} index + * @property {string} description + * @property {String} SoundChannel + * @property {String} Box + * @property {String} Relay + */ + /** * List of Soundbank data loaded from server * @type {SoundBank[]} @@ -106,12 +115,9 @@ let soundbankfiles = []; /** * Select2 data source * See https://select2.org/data-sources/formats - * @type {Object} - * @property {Select2item[]} results + * @type {Select2item[]} */ -let select2results = { - results: [] -}; +let select2data = []; /** * List of voice types available @@ -135,6 +141,21 @@ let languages = []; */ let scheduledays = [] +/** + * List of broadcast zones available + * @type {BroadcastZone[]} + */ +let BroadcastZoneList = []; + +/** + * Create a list item element + * @param {String} text Text Content for the list item + * @param {String} className Specific class name for the list item + * @returns {JQuery} + */ +function ListItem(text, className=""){ + return $('
  • ').addClass(className).text(text); +} /** * Fill soundbank table body with values @@ -368,9 +389,9 @@ function fetchAPI(endpoint, method, headers = {}, body = null, cbOK, cbError) { /** * Reload sound bank from server - * @param {String} APIURL API URL endpoint + * @param {String} APIURL API URL endpoint, default "SoundBank/" */ -function reloadSoundBank(APIURL) { +function reloadSoundBank(APIURL = "SoundBank/") { soundbankdata = []; fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => { if (Array.isArray(okdata)) { @@ -385,9 +406,9 @@ function reloadSoundBank(APIURL) { /** * Reload message bank from server -* @param {string} APIURL API URL endpoint +* @param {string} APIURL API URL endpoint, default "MessageBank/" */ -function reloadMessageBank(APIURL) { +function reloadMessageBank(APIURL = "MessageBank/") { messagebankdata = []; fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => { if (Array.isArray(okdata)) { @@ -402,9 +423,9 @@ function reloadMessageBank(APIURL) { /** * Reload language bank from server - * @param {string} APIURL API URL endpoint + * @param {string} APIURL API URL endpoint, default "LanguageLink/" */ -function reloadLanguageBank(APIURL) { +function reloadLanguageBank(APIURL = "LanguageLink/") { languagebankdata = []; fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => { if (Array.isArray(okdata)) { @@ -419,9 +440,9 @@ function reloadLanguageBank(APIURL) { /** * Reload timer bank from server - * @param {string} APIURL API URL endpoint + * @param {string} APIURL API URL endpoint, default "ScheduleBank/" */ -function reloadTimerBank(APIURL) { +function reloadTimerBank(APIURL = "ScheduleBank/") { schedulebankdata = []; fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => { if (Array.isArray(okdata)) { @@ -436,11 +457,11 @@ function reloadTimerBank(APIURL) { /** * Reload logs from server with date and filter - * @param {String} APIURL API URL endpoint + * @param {String} APIURL API URL endpoint , default "Log/" * @param {String} date date in format dd-mm-yyyy * @param {String} filter log filter text */ -function reloadLogs(APIURL, date, filter) { +function reloadLogs(APIURL = "Log/", date, filter) { const params = new URLSearchParams({ date: date, filter: filter @@ -460,22 +481,38 @@ function reloadLogs(APIURL, date, filter) { * Reload soundbank files from server * @param {String} APIURL API URL endpoint (default "SoundBank/") */ -function regetSoundbankFiles(APIURL = "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); - //console.log("Loaded " + soundbankfiles.length + " sound files : " + soundbankfiles.join(", ") ); - - // refill select2results - select2results.results = soundbankfiles.map((item, index) => ({ id: index + 1, text: item })); - } else console.log("regetSoundbankFiles: okdata is not array"); + // 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); }); } +/** + * Reload broadcast zones from server + * @param {String} APIURL API URL endpoint (default "BroadcastZones/") + */ +function reloadBroadcastZones(APIURL = "BroadcastZones/") { + BroadcastZoneList = []; + fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => { + if (Array.isArray(okdata)) { + BroadcastZoneList = okdata; + fill_broadcastzonetablebody(BroadcastZoneList); + } else console.log("reloadBroadcastZones: okdata is not array"); + }, (errdata) => { + alert("Error loading broadcast zones : " + errdata.message); + }); +} + + + /** * Reload voice types from server */ @@ -646,7 +683,7 @@ $(document).ready(function () { getCategories(); getLanguages(); getScheduledDays(); - regetSoundbankFiles(); + reloadSoundbankFiles(); // Initialize WebSocket connection ws = new WebSocket(window.location.pathname + '/ws'); @@ -723,11 +760,50 @@ $(document).ready(function () { let $btnEdit = $('#btnEdit'); let $btnExport = $('#btnExport'); let $btnImport = $('#btnImport'); - let $modal = $('#soundbankmodal'); $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 () { @@ -751,14 +827,12 @@ $(document).ready(function () { }); $btnAdd.click(() => { - $('.js-example-basic-single').select2({ - placeholder: 'Select a sound file', - closeOnSelect: true, - data: select2results, - }); + $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 @@ -805,9 +879,16 @@ $(document).ready(function () { 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 () { - const desc = $('#description').val(); - console.log('Description input value:', desc); - // You can use desc here (e.g., send to server) + + // 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'); + }); }); } } @@ -848,6 +929,110 @@ $(document).ready(function () { let APIURL = "MessageBank/"; let $findmessage = $('#findmessage'); + // modal for add / edit messagebank + let $modal = $('#messagebankmodal'); + // text input, disabled by default + let $messageindex = $modal.find('#messageindex'); + // text input + let $messagedescription = $modal.find('#messagedescription'); + // select input, options loaded from languages[] + let $messagelanguage = $modal.find('#messagelanguage'); + // number input from 1 to 100 + let $messageannid = $modal.find('#messageannid'); + // select input, options loaded from voiceTypes[] + let $messagevoicetype = $modal.find('#messagevoicetype'); + // list