simplify log and text modals

Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>
This commit is contained in:
MHSanaei 2024-02-21 15:16:27 +03:30
parent c83a1db0c8
commit aebf52efb2
2 changed files with 46 additions and 45 deletions

View File

@ -1,13 +1,14 @@
{{define "textModal"}} {{define "textModal"}}
<a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title" <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
:closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}' :closable="true"
:class="themeSwitcher.currentTheme" :class="themeSwitcher.currentTheme">
:ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}"> <template slot="footer">
<a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;" <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
:href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)" :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
:download="txtModal.fileName"> :download="txtModal.fileName">[[ txtModal.fileName ]]
{{ i18n "download" }} [[ txtModal.fileName ]]
</a-button> </a-button>
<a-button type="primary" id="copy-btn">{{ i18n "copy" }}</a-button>
</template>
<a-input type="textarea" v-model="txtModal.content" <a-input type="textarea" v-model="txtModal.content"
:autosize="{ minRows: 10, maxRows: 20}"></a-input> :autosize="{ minRows: 10, maxRows: 20}"></a-input>
</a-modal> </a-modal>
@ -28,7 +29,7 @@
this.visible = true; this.visible = true;
textModalApp.$nextTick(() => { textModalApp.$nextTick(() => {
if (this.clipboard === null) { if (this.clipboard === null) {
this.clipboard = new ClipboardJS('#txt-modal-ok-btn', { this.clipboard = new ClipboardJS('#copy-btn', {
text: () => this.content, text: () => this.content,
}); });
this.clipboard.on('success', () => { this.clipboard.on('success', () => {

View File

@ -285,45 +285,45 @@
</template> </template>
</a-modal> </a-modal>
<a-modal id="log-modal" v-model="logModal.visible" title="Logs" <a-modal id="log-modal" v-model="logModal.visible"
:closable="true" @ok="() => logModal.visible = false" @cancel="() => logModal.visible = false" :closable="true" @cancel="() => logModal.visible = false"
:class="themeSwitcher.currentTheme" :class="themeSwitcher.currentTheme"
width="800px" width="800px" footer="">
footer=""> <template slot="title">
{{ i18n "pages.index.logs" }}
<a-icon :spin="logModal.loading"
type="sync"
style="vertical-align: middle; margin-left: 10px;"
:disabled="logModal.loading"
@click="openLogs()">
</a-icon>
</template>
<a-form layout="inline"> <a-form layout="inline">
<a-form-item label="Count"> <a-form-item>
<a-select v-model="logModal.rows" <a-input-group compact>
style="width: 80px" <a-select v-model="logModal.rows" style="width:70px;"
@change="openLogs()" @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
:dropdown-class-name="themeSwitcher.currentTheme">
<a-select-option value="10">10</a-select-option> <a-select-option value="10">10</a-select-option>
<a-select-option value="20">20</a-select-option> <a-select-option value="20">20</a-select-option>
<a-select-option value="50">50</a-select-option> <a-select-option value="50">50</a-select-option>
<a-select-option value="100">100</a-select-option> <a-select-option value="100">100</a-select-option>
</a-select> </a-select>
</a-form-item> <a-select v-model="logModal.level" style="width:100px;"
<a-form-item label="Log Level"> @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
<a-select v-model="logModal.level"
style="width: 120px"
@change="openLogs()"
:dropdown-class-name="themeSwitcher.currentTheme">
<a-select-option value="debug">Debug</a-select-option> <a-select-option value="debug">Debug</a-select-option>
<a-select-option value="info">Info</a-select-option> <a-select-option value="info">Info</a-select-option>
<a-select-option value="notice">Notice</a-select-option> <a-select-option value="notice">Notice</a-select-option>
<a-select-option value="warning">Warning</a-select-option> <a-select-option value="warning">Warning</a-select-option>
<a-select-option value="err">Error</a-select-option> <a-select-option value="err">Error</a-select-option>
</a-select> </a-select>
</a-form-item> </a-input-group>
<a-form-item label="SysLog">
<a-checkbox v-model="logModal.syslog" @change="openLogs()"></a-checkbox>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button class="ant-btn ant-btn-primary" :loading="logModal.loading" @click="openLogs()"><a-icon :spin="logModal.loading" type="sync"></a-icon> Reload</a-button> <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item style="float: right;">
<a-button type="primary" style="margin-bottom: 10px;" <a-button type="primary" icon="download"
:href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs)" download="x-ui.log"> :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs)" download="x-ui.log">
{{ i18n "download" }} x-ui.log
</a-button> </a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
@ -331,8 +331,8 @@
</a-modal> </a-modal>
<a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title" <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
:closable="true" :class="themeSwitcher.currentTheme" :closable="true" footer=""
@ok="() => backupModal.hide()" @cancel="() => backupModal.hide()"> :class="themeSwitcher.currentTheme">
<a-alert type="warning" style="margin-bottom: 10px; width: fit-content" <a-alert type="warning" style="margin-bottom: 10px; width: fit-content"
:message="backupModal.description" :message="backupModal.description"
show-icon show-icon