mirror of
https://github.com/linuxserver/heimdalljs.git
synced 2026-02-20 05:12:24 +08:00
work on tags and preview
This commit is contained in:
Kode
parent
05ca0ffa8f
commit
1103831cd1
@ -48,7 +48,9 @@ module.exports = function (ctx) {
|
||||
directives: [],
|
||||
|
||||
// Quasar plugins
|
||||
plugins: []
|
||||
plugins: [
|
||||
'LocalStorage'
|
||||
]
|
||||
},
|
||||
|
||||
// https://quasar.dev/quasar-cli/cli-documentation/supporting-ie
|
||||
|
||||
@ -13,6 +13,8 @@ export default {
|
||||
},
|
||||
mounted () {
|
||||
this.$store.dispatch('tiles/getApps')
|
||||
this.$store.dispatch('tags/getTags')
|
||||
this.$store.dispatch('tiles/getPossibleApps')
|
||||
this.$store.dispatch('users/getUsers')
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="list-item">
|
||||
<div class="list-item" :class="{ edit: this.showback === true}">
|
||||
<div class="list-item-inner">
|
||||
<div class="list-item-front">
|
||||
<div class="icon"><img class="app-icon" :src="'http://heimdallmaster.test/storage/' + this.icon"></div>
|
||||
<div class="name">
|
||||
{{ this.application.title }}
|
||||
<span class="tags">Tags: dashboard, dev, work</span>
|
||||
<span class="tags">Tags: {{ this.taglist }}</span>
|
||||
<a :href="this.application.url">url</a>
|
||||
</div>
|
||||
<div class="pinned">
|
||||
@ -20,14 +20,31 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item-back">
|
||||
<div class="confirmation">
|
||||
Are you sure you want to delete this item?
|
||||
<div>
|
||||
<q-btn style="width: 120px;" unelevated color="red-10" @click="edit = true">Yes</q-btn>
|
||||
<q-btn size="12px" unelevated @click="hideBack()">Cancel</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-dialog v-model="edit">
|
||||
<q-card style="width: calc(100% - 60px); max-width: 900px; background: #ececec;">
|
||||
<q-card-section>
|
||||
<q-card style="width: calc(100% - 60px); max-width: 900px; background: #fcfcfc;">
|
||||
<div class="popup-header">
|
||||
<div class="text-h6">Application</div>
|
||||
</q-card-section>
|
||||
<div class="actions">
|
||||
<q-btn flat>
|
||||
<q-icon name="save" />
|
||||
Save
|
||||
</q-btn>
|
||||
<q-btn flat v-close-popup>
|
||||
<q-icon name="block" />
|
||||
Cancel
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pt-none">
|
||||
|
||||
@ -46,7 +63,13 @@
|
||||
<label>Application Type *</label>
|
||||
<q-select
|
||||
outlined
|
||||
v-model="application"
|
||||
:options="possibleapps"
|
||||
option-value="appid"
|
||||
option-label="name"
|
||||
map-options
|
||||
emit-value
|
||||
|
||||
v-model="applicationtype"
|
||||
></q-select>
|
||||
</div>
|
||||
|
||||
@ -77,15 +100,26 @@
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="input">
|
||||
<div class="input double">
|
||||
<label>Tags (Optional)</label>
|
||||
<select class="tags select2-hidden-accessible" multiple="" name="tags[]" data-select2-id="1" tabindex="-1" aria-hidden="true"><option value="0" selected="selected" data-select2-id="3">Home dashboard</option><option value="4">test</option></select><span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="2" style="width: 280px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"><ul class="select2-selection__rendered"><li class="select2-selection__choice" title="Home dashboard" data-select2-id="4"><span class="select2-selection__choice__remove" role="presentation">×</span>Home dashboard</li><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
|
||||
<q-select
|
||||
outlined
|
||||
v-model="tags"
|
||||
multiple
|
||||
:options="possibletags"
|
||||
use-chips
|
||||
option-value="id"
|
||||
option-label="title"
|
||||
map-options
|
||||
emit-value
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input">
|
||||
<div class="icon-container">
|
||||
<div id="appimage">
|
||||
</div>
|
||||
<img style="width: 140px" :src="'http://heimdallmaster.test/storage/' + this.application.icon" />
|
||||
</div>
|
||||
<div class="upload-btn-wrapper">
|
||||
<button class="btn">Upload a file </button>
|
||||
<input type="file" id="upload" name="file" data-com.bitwarden.browser.user-edited="yes">
|
||||
@ -93,34 +127,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input">
|
||||
<label>Preview</label>
|
||||
<tile
|
||||
:application="preview"
|
||||
></tile>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="text-h6">Preview</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<div id="tile-preview" class="input">
|
||||
<section class="item-container" data-id="">
|
||||
<div class="item set-bg-elem" style="background-color: rgb(0, 136, 255); color: white;">
|
||||
<img class="app-icon" src="http://heimdallmaster.test/img/heimdall-icon-small.png">
|
||||
<div class="details">
|
||||
<div class="title white">NZBHydra</div>
|
||||
</div>
|
||||
<a class="link white" href="http://192.168.0.20:5076/"><svg class="svg-inline--fa fa-arrow-alt-to-right fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="arrow-alt-to-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 88v336c0 13.3-10.7 24-24 24h-24c-13.3 0-24-10.7-24-24V88c0-13.3 10.7-24 24-24h24c13.3 0 24 10.7 24 24zM24 320h136v87.7c0 17.8 21.5 26.7 34.1 14.1l152.2-152.2c7.5-7.5 7.5-19.8 0-27.3L194.1 90.1c-12.6-12.6-34.1-3.7-34.1 14.1V192H24c-13.3 0-24 10.7-24 24v80c0 13.3 10.7 24 24 24z"></path></svg><!-- <i class="fas fa-arrow-alt-to-right"></i> --></a>
|
||||
</div>
|
||||
<a class="item-edit" href="http://heimdallmaster.test/items/11/edit"><svg class="svg-inline--fa fa-pencil fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="pencil" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg><!-- <i class="fas fa-pencil"></i> --></a>
|
||||
</section>
|
||||
</div>
|
||||
<div id="sapconfig"></div>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="OK" color="primary" v-close-popup />
|
||||
</q-card-actions>
|
||||
<q-separator />
|
||||
<div class="popup-header">
|
||||
<div class="text-h6"></div>
|
||||
<div class="actions">
|
||||
<q-btn flat>
|
||||
<q-icon name="save" />
|
||||
Save
|
||||
</q-btn>
|
||||
<q-btn flat v-close-popup>
|
||||
<q-icon name="block" />
|
||||
Cancel
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
@ -128,13 +162,34 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Tile from 'components/Tile'
|
||||
export default {
|
||||
name: 'AppItem',
|
||||
|
||||
props: ['application'],
|
||||
|
||||
components: {
|
||||
Tile
|
||||
},
|
||||
|
||||
computed: {
|
||||
possibleapps () {
|
||||
return this.$store.state.tiles.possibleapps
|
||||
},
|
||||
possibletags () {
|
||||
return this.$store.state.tags.all
|
||||
},
|
||||
taglist () {
|
||||
return this.tags.map(a => a.title).join()
|
||||
},
|
||||
preview () {
|
||||
return {
|
||||
color: this.color,
|
||||
title: this.title,
|
||||
icon: this.icon,
|
||||
url: this.url
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
@ -142,7 +197,9 @@ export default {
|
||||
edit: false,
|
||||
showback: false,
|
||||
color: this.application.colour,
|
||||
applicationtype: this.application.appid,
|
||||
title: this.application.title,
|
||||
tags: this.application.tags,
|
||||
url: this.application.url,
|
||||
icon: this.application.icon || '../img/heimdall-icon-small.png'
|
||||
}
|
||||
|
||||
@ -46,10 +46,10 @@ export default {
|
||||
|
||||
computed: {
|
||||
tiles () {
|
||||
return this.$store.state.tiles.all.length
|
||||
return this.$store.state.tiles.active.length
|
||||
},
|
||||
active_tiles () {
|
||||
return this.$store.state.tiles.active.length
|
||||
return this.$store.state.tiles.all.length
|
||||
},
|
||||
users () {
|
||||
return this.$store.state.users.all.length
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section class="item-container ui-sortable-handle" data-id="3">
|
||||
<section class="item-container ui-sortable-handle" :data-id="this.$attrs.id">
|
||||
<div class="item" :style="'background-color: ' + this.$attrs.colour">
|
||||
<img class="app-icon" :src="'http://heimdallmaster.test/storage/' + this.icon">
|
||||
<div class="details">
|
||||
|
||||
@ -159,7 +159,10 @@ div.create {
|
||||
flex-wrap: wrap;
|
||||
.input {
|
||||
width: 28%;
|
||||
margin: 20px;
|
||||
margin: 20px;
|
||||
&.double {
|
||||
width: calc(56% + 40px);
|
||||
}
|
||||
label:not(.switch) {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
@ -269,8 +272,14 @@ div.create {
|
||||
min-height: 92px;
|
||||
color: #505050;
|
||||
transform: rotateX(180deg);
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.10);
|
||||
padding: 5px 20px;
|
||||
justify-content: center;
|
||||
.confirmation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
@ -322,5 +331,35 @@ div.create {
|
||||
border-color: #3d8ad8;
|
||||
}
|
||||
.q-field--outlined {
|
||||
background: #e6e6e6;
|
||||
}
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 60px;
|
||||
padding-left: 35px;
|
||||
color: #505050;
|
||||
background: #ececec;
|
||||
.actions {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.q-btn__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
color: #5050509e;
|
||||
line-height: 1.6;
|
||||
i {
|
||||
font-size: 24px;
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
}
|
||||
.q-btn {
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,21 @@
|
||||
Heimdall
|
||||
</q-toolbar-title>
|
||||
|
||||
<div>v{{ this.version }}</div>
|
||||
<q-chip
|
||||
icon="bookmark"
|
||||
clickable
|
||||
:class="{ active: filter === null }"
|
||||
@click="setFilter(null)"
|
||||
>All</q-chip>
|
||||
<q-chip
|
||||
v-for="tag in tags"
|
||||
:key="tag.id"
|
||||
icon="bookmark"
|
||||
clickable
|
||||
:class="{ active: filter === tag.id }"
|
||||
@click="setFilter(tag.id)"
|
||||
>{{ tag.title }}</q-chip>
|
||||
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
|
||||
@ -28,7 +42,7 @@
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container id="app">
|
||||
<router-view />
|
||||
<router-view :filter="filter" />
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
</template>
|
||||
@ -44,11 +58,32 @@ export default {
|
||||
MenuList
|
||||
},
|
||||
|
||||
computed: {
|
||||
tags () {
|
||||
return this.$store.state.tags.all
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
leftDrawerOpen: false,
|
||||
version: version
|
||||
version: version,
|
||||
filter: null
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setFilter (tag) {
|
||||
this.filter = tag
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.q-chip {
|
||||
background: #dadada26;
|
||||
&.active {
|
||||
background: #dadada;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,13 +14,19 @@ import Tile from 'components/Tile'
|
||||
export default {
|
||||
name: 'PageIndex',
|
||||
|
||||
props: ['filter'],
|
||||
|
||||
components: {
|
||||
Tile
|
||||
},
|
||||
|
||||
computed: {
|
||||
applications: function () {
|
||||
return this.$store.state.tiles.active
|
||||
if (this.filter === null) {
|
||||
return this.$store.state.tiles.active
|
||||
} else {
|
||||
return this.$store.state.tiles.active.filter(a => a.tags.map(b => b.id).includes(this.filter))
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@ import Vuex from 'vuex'
|
||||
// import example from './module-example'
|
||||
import tiles from './tiles'
|
||||
import users from './users'
|
||||
import tags from './tags'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
@ -20,7 +21,8 @@ export default function (/* { ssrContext } */) {
|
||||
const Store = new Vuex.Store({
|
||||
modules: {
|
||||
tiles,
|
||||
users
|
||||
users,
|
||||
tags
|
||||
},
|
||||
|
||||
// enable strict mode (adds overhead!)
|
||||
|
||||
10
src/store/tags/actions.js
Normal file
10
src/store/tags/actions.js
Normal file
@ -0,0 +1,10 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export function getTags (context) {
|
||||
axios
|
||||
.get(process.env.BACKEND_LOCATION + '/tags', { crossdomain: true })
|
||||
.then((response) => {
|
||||
// console.log(response.data)
|
||||
context.commit('all', response.data)
|
||||
})
|
||||
}
|
||||
4
src/store/tags/getters.js
Normal file
4
src/store/tags/getters.js
Normal file
@ -0,0 +1,4 @@
|
||||
/*
|
||||
export function someGetter (state) {
|
||||
}
|
||||
*/
|
||||
12
src/store/tags/index.js
Normal file
12
src/store/tags/index.js
Normal file
@ -0,0 +1,12 @@
|
||||
import state from './state'
|
||||
import * as getters from './getters'
|
||||
import * as mutations from './mutations'
|
||||
import * as actions from './actions'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions
|
||||
}
|
||||
3
src/store/tags/mutations.js
Normal file
3
src/store/tags/mutations.js
Normal file
@ -0,0 +1,3 @@
|
||||
export function all (state, data) {
|
||||
state.all = data
|
||||
}
|
||||
5
src/store/tags/state.js
Normal file
5
src/store/tags/state.js
Normal file
@ -0,0 +1,5 @@
|
||||
export default function () {
|
||||
return {
|
||||
all: []
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import axios from 'axios'
|
||||
import { LocalStorage } from 'quasar'
|
||||
|
||||
export function getApps (context) {
|
||||
axios
|
||||
@ -9,3 +10,20 @@ export function getApps (context) {
|
||||
context.commit('active', response.data.apps)
|
||||
})
|
||||
}
|
||||
|
||||
export function getPossibleApps (context, force = false) {
|
||||
let key = 'heimdall.possibleapps'
|
||||
let possibleapps = LocalStorage.getItem(key)
|
||||
// console.log(possibleapps)
|
||||
if (possibleapps === null || force === true) {
|
||||
axios
|
||||
.get('https://apps.heimdall.site/list', { crossdomain: true })
|
||||
.then((response) => {
|
||||
// console.log(response.data)
|
||||
context.commit('possibleapps', response.data.apps)
|
||||
LocalStorage.set(key, response.data)
|
||||
})
|
||||
} else {
|
||||
context.commit('possibleapps', possibleapps.apps)
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,3 +5,7 @@ export function all (state, data) {
|
||||
export function active (state, data) {
|
||||
state.active = data
|
||||
}
|
||||
|
||||
export function possibleapps (state, data) {
|
||||
state.possibleapps = data
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
export default function () {
|
||||
return {
|
||||
all: [],
|
||||
active: []
|
||||
active: [],
|
||||
possibleapps: []
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user