100 lines
2.8 KiB
Vue
100 lines
2.8 KiB
Vue
|
<script setup>
|
||
|
|
|
||
|
|
import { ref, useTemplateRef } from 'vue';
|
||
|
|
import { marked } from 'marked';
|
||
|
|
import { Dialog } from 'pankow';
|
||
|
|
|
||
|
|
const dialog = useTemplateRef('dialog');
|
||
|
|
const app = ref(null);
|
||
|
|
const hasPendingCheclistItems = ref(false);
|
||
|
|
const acknowledge = ref(false);
|
||
|
|
|
||
|
|
function onConfirm() {
|
||
|
|
delete localStorage['confirmPostInstall_' + app.value.id];
|
||
|
|
dialog.value.close();
|
||
|
|
window.open('https://' + app.value.fqdn);
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
async open(a, ack = false) {
|
||
|
|
app.value = a;
|
||
|
|
acknowledge.value = ack;
|
||
|
|
hasPendingCheclistItems.value = !Object.keys(a.checklist).find((i) => a.checklist[i].acknowledged);
|
||
|
|
dialog.value.open();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Dialog ref="dialog"
|
||
|
|
:confirm-label="acknowledge ? $t('app.appInfo.openAction', { app: app.manifest.title }) : null"
|
||
|
|
:reject-label="$t('main.dialog.close')"
|
||
|
|
:reject-style="acknowledge ? 'secondary' : ''"
|
||
|
|
@confirm="onConfirm"
|
||
|
|
>
|
||
|
|
<div v-if="app">
|
||
|
|
<div class="app-info-header">
|
||
|
|
<img :src="app.iconUrl" onerror="this.onerror=null;this.src='img/appicon_fallback.png'" class="app-info-icon"/>
|
||
|
|
<div class="app-info-title">
|
||
|
|
{{ app.manifest.title }}<br/>
|
||
|
|
<span class="text-muted text-small">{{ $t('app.appInfo.package') }} <a :href="`/#/appstore/${app.manifest.id}?version=${app.manifest.version}`">v{{ app.manifest.version }}</a> </span>
|
||
|
|
<br/>
|
||
|
|
<span v-if="app.manifest.documentationUrl" class="text-small"><a target="_blank" :href="app.manifest.documentationUrl">{{ $t('app.docsAction') }}</a> </span>
|
||
|
|
<br/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-html="marked.parse(app.manifest.postInstallMessage)"></div>
|
||
|
|
<div v-if="app.manifest.documentationUrl" v-html="$t('app.appInfo.appDocsUrl', { docsUrl: app.manifest.documentationUrl, title: app.manifest.title, forumUrl: (app.manifest.forumUrl || 'https://forum.cloudron.io') })"></div>
|
||
|
|
|
||
|
|
<div class="app-info-checklist" v-show="hasPendingCheclistItems">
|
||
|
|
<label class="control-label">{{ $t('app.appInfo.checklist') }}</label>
|
||
|
|
<div v-for="(item, key) in app.checklist" :key="key">
|
||
|
|
<div class="checklist-item" v-show="!item.acknowledged">
|
||
|
|
<span v-html="marked.parse(item.message)"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
.app-info-header {
|
||
|
|
display: flex;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-info-title {
|
||
|
|
margin-left: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-info-icon {
|
||
|
|
width: 64px;
|
||
|
|
height: 64px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-info-checklist {
|
||
|
|
margin-top: 20px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checklist-item {
|
||
|
|
padding: 8px;
|
||
|
|
border: none;
|
||
|
|
border-left: 2px solid rgb(255, 76, 76);
|
||
|
|
background-color: #ff000014;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checklist-item > span > * {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|