Add info icons to prompt export

This commit is contained in:
maver 2023-07-08 17:47:04 +02:00
parent 023d3fade2
commit 15d4283cd4
2 changed files with 51 additions and 15 deletions

View File

@ -250,6 +250,31 @@
background-color: #000; background-color: #000;
} }
#prompt-manager-export-format-popup {
display:none;
}
.prompt-manager-export-format-popup-flex {
display: flex;
flex-direction: column;
}
.prompt-manager-export-format-popup-flex .row {
display: flex;
justify-content: space-between;
}
.prompt-manager-export-format-popup-flex a,
.prompt-manager-export-format-popup-flex span {
display: flex;
margin: auto 0;
justify-content: space-between;
}
#prompt-manager-export-format-popup span {
font-size: 16px;
}
@media screen and (max-width: 412px) { @media screen and (max-width: 412px) {
#completion_prompt_manager #completion_prompt_manager_list { #completion_prompt_manager #completion_prompt_manager_list {
font-size: 1.25em !important; font-size: 1.25em !important;

View File

@ -316,8 +316,7 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
} }
this.handleImport = () => { this.handleImport = () => {
callPopup('Existing prompts with the same ID will be overridden. Do you want to proceed?', 'confirm',)
callPopup('Your prompts will be merged with the import. Imported prompts with the same ID will override existing prompts.', 'confirm',)
.then(userChoice => { .then(userChoice => {
if (false === userChoice) return; if (false === userChoice) return;
@ -338,8 +337,9 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
const data = JSON.parse(fileContent); const data = JSON.parse(fileContent);
this.import(data); this.import(data);
} catch (err) { } catch (err) {
this.log('An error occurred while importing prompts'); toastr.error('An error occurred while importing prompts. More info available in console.')
this.log(err.toString()); console.log('An error occurred while importing prompts');
console.log(err.toString());
} }
}; };
@ -951,17 +951,26 @@ PromptManagerModule.prototype.renderPromptManager = function () {
</select> </select>
<a class="menu_button fa-chain fa-solid" title="Attach prompt" data-i18n="Add"></a> <a class="menu_button fa-chain fa-solid" title="Attach prompt" data-i18n="Add"></a>
<a class="caution menu_button fa-x fa-solid" title="Delete prompt" data-i18n="Delete"></a> <a class="caution menu_button fa-x fa-solid" title="Delete prompt" data-i18n="Delete"></a>
<a class="menu_button fa-file-arrow-down fa-solid" id="prompt-manager-export" title="Export this prompt list" data-i18n="Export"></a> ${ this.serviceSettings.prompt_manager_settings.showAdvancedSettings
<a class="menu_button fa-file-arrow-up fa-solid" id="prompt-manager-import" title="Import a prompt list" data-i18n="Import"></a> ? `<a class="menu_button fa-file-arrow-down fa-solid" id="prompt-manager-export" title="Export this prompt list" data-i18n="Export"></a>
<a class="menu_button fa-file-arrow-up fa-solid" id="prompt-manager-import" title="Import a prompt list" data-i18n="Import"></a>` : '' }
<a class="menu_button fa-plus-square fa-solid" title="New prompt" data-i18n="New"></a> <a class="menu_button fa-plus-square fa-solid" title="New prompt" data-i18n="New"></a>
</div> </div>
`; `;
const exportPopup = ` const exportPopup = `
<div id="prompt-manager-export-format-popup" class="list-group"> <div id="prompt-manager-export-format-popup" class="list-group">
<a class="export-promptmanager-prompts-full list-group-item" data-i18n="Export all">Export all</a> <div class="prompt-manager-export-format-popup-flex">
<a class="export-promptmanager-prompts-character list-group-item" data-i18n="Export for character">Export for character</a> <div class="row">
</div> <a class="export-promptmanager-prompts-full list-group-item" data-i18n="Export all">Export all</a>
<span class="tooltip fa-solid fa-info-circle" title="Export all user prompts to a file"></span>
</div>
<div class="row">
<a class="export-promptmanager-prompts-character list-group-item" data-i18n="Export for character">Export for character</a>
<span class="tooltip fa-solid fa-info-circle" title="Export prompts currently attached to this character, including their order, to a file"></span>
</div>
</div>
</div>
`; `;
const rangeBlockDiv = promptManagerDiv.querySelector('.range-block'); const rangeBlockDiv = promptManagerDiv.querySelector('.range-block');
@ -971,7 +980,7 @@ PromptManagerModule.prototype.renderPromptManager = function () {
let exportPopper = Popper.createPopper( let exportPopper = Popper.createPopper(
document.getElementById('prompt-manager-export'), document.getElementById('prompt-manager-export'),
document.getElementById('prompt-manager-export-format-popup'), document.getElementById('prompt-manager-export-format-popup'),
{ placement: 'bottom'} {placement: 'bottom'}
); );
const showExportSelection = () => { const showExportSelection = () => {
@ -984,15 +993,17 @@ PromptManagerModule.prototype.renderPromptManager = function () {
exportPopper.update(); exportPopper.update();
} }
rangeBlockDiv.querySelector('.export-promptmanager-prompts-full').addEventListener('click', this.handleFullExport);
rangeBlockDiv.querySelector('.export-promptmanager-prompts-character').addEventListener('click', this.handleCharacterExport);
const footerDiv = rangeBlockDiv.querySelector(`.${this.configuration.prefix}prompt_manager_footer`); const footerDiv = rangeBlockDiv.querySelector(`.${this.configuration.prefix}prompt_manager_footer`);
footerDiv.querySelector('.menu_button:nth-child(2)').addEventListener('click', this.handleAppendPrompt); footerDiv.querySelector('.menu_button:nth-child(2)').addEventListener('click', this.handleAppendPrompt);
footerDiv.querySelector('.caution').addEventListener('click', this.handleDeletePrompt); footerDiv.querySelector('.caution').addEventListener('click', this.handleDeletePrompt);
footerDiv.querySelector('.menu_button:last-child').addEventListener('click', this.handleNewPrompt); footerDiv.querySelector('.menu_button:last-child').addEventListener('click', this.handleNewPrompt);
footerDiv.querySelector('#prompt-manager-export').addEventListener('click', showExportSelection);
footerDiv.querySelector('#prompt-manager-import').addEventListener('click', this.handleImport); if (true === this.serviceSettings.prompt_manager_settings.showAdvancedSettings) {
footerDiv.querySelector('#prompt-manager-import').addEventListener('click', this.handleImport);
footerDiv.querySelector('#prompt-manager-export').addEventListener('click', showExportSelection);
rangeBlockDiv.querySelector('.export-promptmanager-prompts-full').addEventListener('click', this.handleFullExport);
rangeBlockDiv.querySelector('.export-promptmanager-prompts-character').addEventListener('click', this.handleCharacterExport);
}
} }
}; };