mirror of
https://github.com/Elvanos/fantasia-archive.git
synced 2024-05-16 10:13:05 +12:00
0.1.4 Final RC (ui edits)
This commit is contained in:
Elvanos
parent
28c5235827
commit
106e432016
84
package-lock.json
generated
84
package-lock.json
generated
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fantasiaarchive",
|
||||
"version": "0.1.3",
|
||||
"version": "0.1.4",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
@ -2497,6 +2497,19 @@
|
|||
"picomatch": "^2.0.4"
|
||||
}
|
||||
},
|
||||
"apexcharts": {
|
||||
"version": "3.26.0",
|
||||
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.26.0.tgz",
|
||||
"integrity": "sha512-zdYHs3k3tgmCn1BpYLj7rhGEndBYF33Pq1+g0ora37xAr+3act5CJrpdXM2jx2boVUyXgavoSp6sa8WpK7RkSA==",
|
||||
"requires": {
|
||||
"svg.draggable.js": "^2.2.2",
|
||||
"svg.easing.js": "^2.0.0",
|
||||
"svg.filter.js": "^2.0.2",
|
||||
"svg.pathmorphing.js": "^0.1.3",
|
||||
"svg.resize.js": "^1.4.3",
|
||||
"svg.select.js": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"app-builder-bin": {
|
||||
"version": "3.5.10",
|
||||
"resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-3.5.10.tgz",
|
||||
|
|
@ -15453,6 +15466,70 @@
|
|||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"svg.draggable.js": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||
"requires": {
|
||||
"svg.js": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"svg.easing.js": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||
"integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
|
||||
"requires": {
|
||||
"svg.js": ">=2.3.x"
|
||||
}
|
||||
},
|
||||
"svg.filter.js": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||
"integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
|
||||
"requires": {
|
||||
"svg.js": "^2.2.5"
|
||||
}
|
||||
},
|
||||
"svg.js": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
|
||||
},
|
||||
"svg.pathmorphing.js": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||
"requires": {
|
||||
"svg.js": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"svg.resize.js": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||
"requires": {
|
||||
"svg.js": "^2.6.5",
|
||||
"svg.select.js": "^2.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"svg.select.js": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||
"requires": {
|
||||
"svg.js": "^2.2.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"svg.select.js": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||
"requires": {
|
||||
"svg.js": "^2.6.5"
|
||||
}
|
||||
},
|
||||
"svgo": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
|
||||
|
|
@ -16640,6 +16717,11 @@
|
|||
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-apexcharts": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.0.tgz",
|
||||
"integrity": "sha512-sT6tuVTLBwfH3TA7azecDNS/W70bmz14ZJI7aE7QIqcG9I6OywyH7x3hcOeY1v1DxttI8Svc5RuYj4Dd+A5F4g=="
|
||||
},
|
||||
"vue-class-component": {
|
||||
"version": "7.2.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"dependencies": {
|
||||
"@quasar/extras": "^1.0.0",
|
||||
"@types/fs-extra": "^8.1.0",
|
||||
"apexcharts": "^3.26.0",
|
||||
"axios": "^0.18.1",
|
||||
"core-js": "^3.6.5",
|
||||
"katex": "^0.12.0",
|
||||
|
|
@ -29,6 +30,7 @@
|
|||
"quasar-tiptap": "^1.9.1",
|
||||
"tiptap": "^1.31.0",
|
||||
"tiptap-extensions": "^1.34.0",
|
||||
"vue-apexcharts": "^1.6.0",
|
||||
"vue-class-component": "^7.2.2",
|
||||
"vue-codemirror": "^4.0.6",
|
||||
"vue-i18n": "^8.0.0",
|
||||
|
|
@ -77,4 +79,4 @@
|
|||
"npm": ">= 6.13.4",
|
||||
"yarn": ">= 1.21.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@ module.exports = configure(function (ctx) {
|
|||
boot: [
|
||||
"i18n",
|
||||
"axios",
|
||||
'notify-defaults'
|
||||
'notify-defaults',
|
||||
'apex'
|
||||
],
|
||||
|
||||
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
|
||||
|
|
|
|||
4
src/boot/apex.js
Normal file
4
src/boot/apex.js
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import Vue from "vue"
|
||||
import VueApexCharts from "vue-apexcharts"
|
||||
|
||||
Vue.component("apexchart", VueApexCharts)
|
||||
|
|
@ -1,8 +1,94 @@
|
|||
<template>
|
||||
<q-page class="column items-center justify-center">
|
||||
|
||||
<!-- New document dialog -->
|
||||
<newDocumentDialog
|
||||
:dialog-trigger="newObjectDialogTrigger"
|
||||
@trigger-dialog-close="newObjectDialogClose"
|
||||
/>
|
||||
|
||||
<div class="col-12">
|
||||
<h3>Project screen for {{projectName}}</h3>
|
||||
<h5 class="mainProjectSubTitle">Project screen for </h5>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h2 class="mainProjectTitle"> {{projectName}}</h2>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<q-card
|
||||
dark
|
||||
class="documentGraphWrapper"
|
||||
>
|
||||
<transition
|
||||
enter-active-class="animated fadeIn"
|
||||
leave-active-class="animated fadeOut"
|
||||
:duration="600"
|
||||
>
|
||||
<q-card-section
|
||||
v-show="!graphDataLoaded"
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
style="height: 500px;"
|
||||
class="flex justify-center flex-center"
|
||||
>
|
||||
<q-spinner-gears
|
||||
color="primary"
|
||||
size="160px"
|
||||
/>
|
||||
</q-card-section>
|
||||
</transition>
|
||||
|
||||
<transition
|
||||
enter-active-class="animated fadeIn"
|
||||
leave-active-class="animated fadeOut"
|
||||
:duration="600"
|
||||
>
|
||||
<q-card-section
|
||||
v-show="graphDataShowing && allDocuments === 0"
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
style="height: 500px;"
|
||||
class="flex justify-center flex-center column"
|
||||
>
|
||||
<div class="row justify-center flex-center">
|
||||
<div class="col-12 q-mb-xl">
|
||||
<h6 class="q-my-xs text-center">Welcome to your new project! Feel free to look around or...</h6>
|
||||
</div>
|
||||
<div class="col-12 q-mt-md q-mb-xl text-center">
|
||||
<q-btn
|
||||
color="primary"
|
||||
size="lg"
|
||||
outline
|
||||
class="q-px-xl q-py-xs"
|
||||
@click="newObjectAssignUID"
|
||||
>
|
||||
Create your first document!
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-card-section>
|
||||
</transition>
|
||||
|
||||
<transition
|
||||
enter-active-class="animated fadeIn"
|
||||
leave-active-class="animated fadeOut"
|
||||
appear
|
||||
:duration="600"
|
||||
>
|
||||
<q-card-section
|
||||
v-show="graphDataShowing && allDocuments > 0"
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<h5 class="q-px-lg q-my-lg">
|
||||
Document distribution - <span class="text-bold text-primary">{{allDocuments}}</span> total
|
||||
</h5>
|
||||
<apexchart v-if="graphDataShowing" type="bar" height="350" width="900" :options="chartOptions" :series="series" />
|
||||
</q-card-section>
|
||||
</transition>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
</q-page>
|
||||
|
|
@ -12,19 +98,256 @@
|
|||
import { Component } from "vue-property-decorator"
|
||||
|
||||
import BaseClass from "src/BaseClass"
|
||||
import { Loading } from "quasar"
|
||||
|
||||
import { Loading, colors } from "quasar"
|
||||
import PouchDB from "pouchdb"
|
||||
import newDocumentDialog from "src/components/dialogs/NewDocument.vue"
|
||||
import { retrieveCurrentProjectName } from "src/scripts/projectManagement/projectManagent"
|
||||
|
||||
@Component({
|
||||
components: { }
|
||||
components: {
|
||||
newDocumentDialog
|
||||
}
|
||||
})
|
||||
export default class ProjectScreen extends BaseClass {
|
||||
projectName = ""
|
||||
|
||||
graphDataLoaded = false
|
||||
graphDataShowing = false
|
||||
|
||||
allDocuments = 0
|
||||
|
||||
async created () {
|
||||
this.projectName = await retrieveCurrentProjectName()
|
||||
this.loadGraphData().catch(e => console.log(e))
|
||||
Loading.hide()
|
||||
}
|
||||
|
||||
async loadGraphData () {
|
||||
if (this.SGET_allBlueprints.length === 0) {
|
||||
await this.sleep(1000)
|
||||
this.loadGraphData().catch(e => console.log(e))
|
||||
return
|
||||
}
|
||||
|
||||
this.populateChartOptions()
|
||||
|
||||
const allBlueprings = this.SGET_allBlueprints
|
||||
|
||||
// Process all documents, build hieararchy out of the and sort them via name and custom order
|
||||
for (const blueprint of allBlueprings) {
|
||||
const CurrentObjectDB = new PouchDB(blueprint._id)
|
||||
const allDocuments = await CurrentObjectDB.allDocs({ include_docs: true })
|
||||
const docCount = allDocuments.rows.length
|
||||
|
||||
this.allDocuments = this.allDocuments + docCount
|
||||
|
||||
this.series[0].data.push(docCount)
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
||||
this.chartOptions.xaxis.categories.push(blueprint.namePlural)
|
||||
}
|
||||
this.graphDataLoaded = true
|
||||
|
||||
await this.sleep(600)
|
||||
this.graphDataShowing = true
|
||||
}
|
||||
|
||||
series = [{
|
||||
name: "Documents",
|
||||
data: [] as number[]
|
||||
}]
|
||||
|
||||
chartOptions = {} as any
|
||||
|
||||
populateChartOptions () {
|
||||
this.chartOptions = {
|
||||
colors: [colors.getBrand("primary")],
|
||||
animations: {
|
||||
enabled: true,
|
||||
easing: "easeinout",
|
||||
speed: 1000
|
||||
},
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: "none"
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
height: 350,
|
||||
type: "bar",
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
dataLabels: {
|
||||
position: "center" // top, center, bottom
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 1,
|
||||
left: 1,
|
||||
blur: 1,
|
||||
color: "#000",
|
||||
opacity: 0.65
|
||||
},
|
||||
enabled: true,
|
||||
formatter: function (val: string) {
|
||||
return val
|
||||
},
|
||||
offsetY: 20,
|
||||
style: {
|
||||
fontSize: "14px",
|
||||
fontFamily: "Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;",
|
||||
colors: ["#fff"]
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: [] as string[],
|
||||
position: "bottom",
|
||||
labels: {
|
||||
style: {
|
||||
fontFamily: "Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;",
|
||||
colors: colors.getBrand("accent"),
|
||||
cssClass: "docCountLabel"
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: true
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
crosshairs: {
|
||||
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
colorFrom: "transparent",
|
||||
colorTo: "transparent",
|
||||
stops: [0, 100],
|
||||
opacityFrom: 0,
|
||||
opacityTo: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: function (val: string) {
|
||||
return val
|
||||
},
|
||||
style: {
|
||||
fontSize: "14px",
|
||||
fontFamily: "Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;",
|
||||
colors: "#dcdcdc"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************************************/
|
||||
// New document dialog
|
||||
/****************************************************************/
|
||||
|
||||
newObjectDialogTrigger: string | false = false
|
||||
newObjectDialogClose () {
|
||||
this.newObjectDialogTrigger = false
|
||||
}
|
||||
|
||||
newObjectAssignUID () {
|
||||
this.newObjectDialogTrigger = this.generateUID()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.mainProjectTitle {
|
||||
color: var(--q-color-dark);
|
||||
}
|
||||
|
||||
body.body--dark {
|
||||
.mainProjectTitle {
|
||||
color: var(--q-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-tooltip {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.apexcharts-canvas {
|
||||
padding-bottom: 50px;
|
||||
box-sizing: content-box !important;
|
||||
|
||||
path {
|
||||
stroke: none !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.apexcharts-series path {
|
||||
fill: var(--q-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.documentGraphWrapper {
|
||||
min-width: 950px;
|
||||
min-height: 500px;
|
||||
max-height: 500px;
|
||||
max-width: 950px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.docCountLabel {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.mainProjectSubTitle {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mainProjectTitle {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue