100 lines
1.9 KiB
Vue
100 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<Dialog ref="dialog"
|
||
|
|
:reject-label="$t('main.dialog.cancel')"
|
||
|
|
:confirm-label="'Install'"
|
||
|
|
confirm-style="success"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<div class="header">
|
||
|
|
<img class="icon" :src="app.iconUrl" />
|
||
|
|
<div class="right">
|
||
|
|
<div class="title">{{ manifest.title }}</div>
|
||
|
|
<div class="lastUpdated">{{ $t('appstore.installDialog.lastUpdated', { date: prettyDate(app.creationDate) }) }}</div>
|
||
|
|
<div class="memoryRequirement">{{ $t('appstore.installDialog.memoryRequirement', { size: prettyFileSize(manifest.memoryLimit) }) }}</div>
|
||
|
|
<div class="author"><a :href="manifest.website" target="_blank">Website</a></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-html="description"></div>
|
||
|
|
</div>
|
||
|
|
</Dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import { Dialog } from 'pankow';
|
||
|
|
import { prettyDate, prettyFileSize } from 'pankow/utils';
|
||
|
|
import { marked } from 'marked';
|
||
|
|
|
||
|
|
const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
|
||
|
|
const accessToken = localStorage.token;
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'AppInstallDialog',
|
||
|
|
components: {
|
||
|
|
Dialog,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
API_ORIGIN,
|
||
|
|
app: {},
|
||
|
|
manifest: {},
|
||
|
|
busy: false,
|
||
|
|
error: {},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
description() {
|
||
|
|
return marked.parse(this.manifest.description || '');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
prettyDate,
|
||
|
|
prettyFileSize,
|
||
|
|
async open(app) {
|
||
|
|
this.app = app;
|
||
|
|
this.manifest = app.manifest;
|
||
|
|
|
||
|
|
this.$refs.dialog.open();
|
||
|
|
},
|
||
|
|
onProceed() {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
.header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 26px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 96px;
|
||
|
|
height: 96px;
|
||
|
|
object-fit: cover;
|
||
|
|
margin-right: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.description {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: left;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|