From 4f00a2b83465574a9fceb5eb71bc013e906f6926 Mon Sep 17 00:00:00 2001 From: Kode Date: Tue, 25 Feb 2020 11:27:29 +0000 Subject: [PATCH] work on item automation --- models/item.js | 4 +- src/App.vue | 2 +- src/components/AppItem.vue | 217 +++++++--------------------- src/components/EditTile.vue | 248 +++++++++++++++++++++----------- src/components/EditUser.vue | 8 +- src/components/Tile.vue | 9 +- src/css/app.scss | 24 +++- src/i18n/en-us/index.js | 2 +- src/pages/application/Index.vue | 1 + 9 files changed, 252 insertions(+), 263 deletions(-) diff --git a/models/item.js b/models/item.js index 356c602..8315a26 100644 --- a/models/item.js +++ b/models/item.js @@ -32,7 +32,7 @@ class Item extends Model { }, config: { type: DataTypes.TEXT - }, + }/* , tags: { type: DataTypes.TEXT, set (val) { @@ -41,7 +41,7 @@ class Item extends Model { get () { return JSON.parse(this.tags) } - } + } */ }, { sequelize, underscored: true, diff --git a/src/App.vue b/src/App.vue index c20df24..6ddc4f0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -39,7 +39,7 @@ export default { mounted () { console.log(this.user) this.$store.dispatch('app/status') - // this.$store.dispatch('tiles/getApps') + this.$store.dispatch('tiles/getApps') // this.$store.dispatch('tags/getTags') // this.$store.dispatch('tiles/getPossibleApps') this.$store.dispatch('users/getUsers') diff --git a/src/components/AppItem.vue b/src/components/AppItem.vue index a8b10ee..0d19827 100644 --- a/src/components/AppItem.vue +++ b/src/components/AppItem.vue @@ -1,202 +1,91 @@ + diff --git a/src/components/EditTile.vue b/src/components/EditTile.vue index edf61e3..72693f4 100644 --- a/src/components/EditTile.vue +++ b/src/components/EditTile.vue @@ -4,13 +4,14 @@
-
- - Change Image +
+ Application + Website + Docker
- -
- +
@@ -45,7 +46,13 @@ clickable v-ripple name="general" - label="Profile" + label="General" + /> + - - @@ -73,19 +68,43 @@ + + + + + :label="this.$t('Tags')" + outlined + v-model="tags" + multiple + :options="possibletags" + use-input + new-value-mode="add-unique" + emit-value + use-chips + @filter="filterFn" + /> + + + + + + + + - - - -
-
- -
-
- - -
- - - - - - - - -
Search
- Lorem ipsum dolor sit amet consectetur adipisicing elit. - - -
Background
- Lorem ipsum dolor sit amet consectetur adipisicing elit. @@ -166,6 +142,64 @@
+ + + +
Select Application
+ + + + + + + + + + + + + + + + +
Enter website address
+ + + + + +
+
+ +
+
+ + + + + + + + +
@@ -200,8 +234,9 @@ export default { return { color: this.color || '#222222', title: this.title, - icon: this.icon, - url: this.url + icon: this.seticon, + url: this.url, + preview: true } }, tagsParse () { @@ -211,6 +246,7 @@ export default { return JSON.parse(this.application.tags) }, seticon () { + if (this.icon) return this.icon return (this.application.icon !== null) ? process.env.BACKEND_LOCATION + this.application.icon : 'https://apps.heimdall.site/img/heimdall-logo-white.svg' } }, @@ -224,12 +260,19 @@ export default { tags: null, url: null, icon: null, + description: '', actions: false, possibletags: this.tagsParse, submitEmpty: false, submitResult: [], changeicon: false, - tab: 'general' + tab: 'general', + applicationdialog: false, + websitedialog: false, + dockerdialog: false, + websitedata: null, + selectedwebsiteimage: null, + website: null } }, @@ -279,6 +322,20 @@ export default { } }) }, + setApplication () { + this.title = this.applicationtype.name + this.description = this.applicationtype.description + this.icon = 'https://raw.githubusercontent.com/linuxserver/Heimdall-Apps/master/' + this.applicationtype.name + '/' + this.applicationtype.icon + }, + setWebsite () { + this.title = this.websitedata.title + this.description = this.websitedata.description + this.icon = this.websitedata.icons[this.selectedwebsiteimage] + this.url = this.website + }, + selectWebsiteImage (key) { + this.selectedwebsiteimage = key + }, closeCreate () { this.actions = false setTimeout(async function () { @@ -287,16 +344,25 @@ export default { }.bind(this), 300) }, - async getIcons () { + async getWebsiteData () { try { - const html = await fetch('https://cors-anywhere.herokuapp.com/' + this.url) + const websitedata = {} + const html = await fetch('https://cors-anywhere.herokuapp.com/' + this.website) // console.log(html) const parser = new DOMParser() const document = parser.parseFromString(await html.text(), 'text/html') const links = document.getElementsByTagName('link') + websitedata.title = document.getElementsByTagName('title')[0].innerText + const metas = document.getElementsByTagName('meta') const icons = [] + for (let i = 0; i < metas.length; i++) { + if (metas[i].getAttribute('name') === 'description') { + websitedata.description = metas[i].getAttribute('content') + } + } + for (let i = 0; i < links.length; i++) { const link = links[i] @@ -324,14 +390,14 @@ export default { // This is of course assuming the script is executing in the browser // Node.js is a different story! As I would be using cheerio.js for parsing the html instead of document. // Also you would use the response.headers object for Node.js below. - console.log('link: ' + this.url) + console.log('link: ' + this.website) let finalBase = '' - if (this.url.endsWith('/')) { - const baseurl = this.url.split('/') + if (this.website.endsWith('/')) { + const baseurl = this.website.split('/') baseurl.pop() finalBase = baseurl.join('/') } else { - finalBase = this.url + finalBase = this.website } let absoluteHref = finalBase @@ -364,8 +430,9 @@ export default { } } } - - console.log(icons) + websitedata.icons = icons + this.websitedata = websitedata + console.log(websitedata) } catch (e) { console.log(e) } @@ -374,3 +441,20 @@ export default { } + diff --git a/src/components/EditUser.vue b/src/components/EditUser.vue index cc1bb55..94ddd70 100644 --- a/src/components/EditUser.vue +++ b/src/components/EditUser.vue @@ -4,12 +4,12 @@
-
- - Change Image -
+
+ + Change Image +
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 0a2e1f6..8996dc7 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -1,11 +1,11 @@ @@ -33,6 +33,9 @@ export default { const a = parseFloat(parseInt((parseInt(alpha, 16) / 255) * 1000) / 1000) const brightness = r * 0.299 + g * 0.587 + b * 0.114 + (1 - a) * 255 return brightness > 186 ? darkColor : lightColor + }, + preview () { + return this.application.preview } }, diff --git a/src/css/app.scss b/src/css/app.scss index c50e19f..37f40e3 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -115,7 +115,11 @@ h1 { margin-right: 15px; } } - + &.preview { + .item { + margin: 20px 0; + } + } } .svg-inline--fa { display: inline-block; @@ -596,9 +600,9 @@ div.create { align-items: center; background: #00000059; color: #ffffffd1; - top: 90px; + top: 50%; left: 50%; - transform: translateX(-50%); + transform: translate(-50%, -50%); z-index: 5; width: 120px; height: 120px; @@ -607,6 +611,7 @@ div.create { font-weight: bold; font-size: 12px; text-transform: uppercase; + line-height: 1.4; } .useractions { position: absolute; @@ -615,12 +620,12 @@ div.create { bottom: 0; width: 70px; background: #724c7a; - transform: translateX(80px); + transform: translateX(0); transition: all 0.3s; color: white; padding: 10px 0; - &.active { - transform: translateX(0); + &.inactive { + transform: translateX(80px); } button { padding: 10px 0; @@ -640,6 +645,13 @@ div.create { max-width: 340px; text-align: center; position: relative; + .buttons { + display: flex; + flex-direction: column; + button { + margin-bottom: 10px; + } + } .q-list { } .q-avatar { diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js index 67bfd4f..93bdcc8 100644 --- a/src/i18n/en-us/index.js +++ b/src/i18n/en-us/index.js @@ -35,7 +35,7 @@ export default { mfa_no_qr: 'If you have problems scanning the QR code, do a manual setup with code: {code}.', code: 'Code', // Edit / Create tiles - application_name: 'Application name', + name: 'Name', application_type: 'Application type', colour: 'Color', upload_file: 'Upload File', diff --git a/src/pages/application/Index.vue b/src/pages/application/Index.vue index fd917e1..be49c68 100644 --- a/src/pages/application/Index.vue +++ b/src/pages/application/Index.vue @@ -57,6 +57,7 @@ export default { return this.$store.state.tiles.create }, set (val) { + this.$store.dispatch('tiles/getPossibleApps') this.$store.commit('tiles/create', val) } }