YoLo making this thing actually usable.
This commit is contained in:
parent
dd19c6d57a
commit
4c1a94159a
6 changed files with 122 additions and 109 deletions
49
src/components/AppCards.vue
Normal file
49
src/components/AppCards.vue
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<template>
|
||||||
|
<v-simple-table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="text-left" style="width:30px;">Icon</th>
|
||||||
|
<th class="text-left">Name</th>
|
||||||
|
<th class="text-left">Description</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="app in apps" :key="app.name" @click="$emit('appClick', app)" style="cursor: pointer;">
|
||||||
|
<td style="width:30px;">
|
||||||
|
<img :src="getImageUrl(app.id)" style="max-width: 30px;">
|
||||||
|
</td>
|
||||||
|
<td>{{ app.name }}</td>
|
||||||
|
<td>{{ app.description }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</v-simple-table>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ServerService from '../services/Server'
|
||||||
|
import UserService from '../services/User'
|
||||||
|
import AppService from '../services/Apps'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
apps: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: [
|
||||||
|
'apps'
|
||||||
|
],
|
||||||
|
methods: {
|
||||||
|
'getImageUrl' : function (id) {
|
||||||
|
return AppService.getAppImage(id);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted: function() {
|
||||||
|
console.log("APPCARDSW");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h1>Login</h1>
|
|
||||||
<v-alert
|
<v-alert
|
||||||
:value="true"
|
:value="true"
|
||||||
type="error"
|
type="error"
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="">
|
<div style="margin-top: 50px;">
|
||||||
|
|
||||||
<v-container grid-list-md pa-10>
|
<v-container grid-list-md pa-10>
|
||||||
<v-layout row wrap>
|
<v-layout row wrap>
|
||||||
|
|
|
||||||
|
|
@ -1,59 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="">
|
<div style="margin-top:50px;">
|
||||||
<v-container grid-list-md pa-10 >
|
<v-container grid-list-md pa-10 >
|
||||||
<v-layout row wrap>
|
<v-layout row wrap>
|
||||||
<v-flex md12>
|
<v-flex md12>
|
||||||
<h1>Dashboard</h1>
|
<h1>Dashboard</h1>
|
||||||
<br><br>
|
<br><br>
|
||||||
<h3>Hello {{$store.getters.getMe["username"]}}, login to</h3>
|
<h3>Hello {{$store.getters.getMe["username"]}}, login to</h3>
|
||||||
|
<AppCards :apps="apps" v-on:appClick="navigateToApp"></AppCards>
|
||||||
|
|
||||||
<v-layout row wrap>
|
|
||||||
<v-flex md4 xs12 text-xs-center v-for="(item, index) in apps">
|
|
||||||
<v-card>
|
|
||||||
<v-layout>
|
|
||||||
<v-flex xs5>
|
|
||||||
<v-img
|
|
||||||
:src="getImageUrl(item.id)"
|
|
||||||
height="125px"
|
|
||||||
contain
|
|
||||||
></v-img>
|
|
||||||
</v-flex>
|
</v-flex>
|
||||||
<v-flex xs7>
|
|
||||||
<v-card-title primary-title>
|
|
||||||
<div>
|
|
||||||
<div class="headline">{{ item.name }}</div>
|
|
||||||
<div>{{ item.description }}</div>
|
|
||||||
</div>
|
|
||||||
</v-card-title>
|
|
||||||
</v-flex>
|
|
||||||
</v-layout>
|
|
||||||
<v-divider light></v-divider>
|
|
||||||
<v-card-actions class="pa-3">
|
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
<v-btn icon>
|
|
||||||
<v-icon @click="navigateToApp(item)">input</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-flex>
|
|
||||||
</v-layout>
|
|
||||||
</v-flex>
|
|
||||||
|
|
||||||
|
|
||||||
</v-layout>
|
</v-layout>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ServerService from '../services/Server'
|
import ServerService from '../services/Server'
|
||||||
import UserService from '../services/User'
|
import UserService from '../services/User'
|
||||||
import AppService from '../services/Apps'
|
import AppService from '../services/Apps'
|
||||||
|
import AppCardsComponente from '../components/AppCards'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
|
|
@ -63,6 +27,9 @@
|
||||||
apps: []
|
apps: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
"AppCards": AppCardsComponente
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
'getImageUrl' : function (id) {
|
'getImageUrl' : function (id) {
|
||||||
return AppService.getAppImage(id);
|
return AppService.getAppImage(id);
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="">
|
<div style="margin-top: 50px;">
|
||||||
<v-container grid-list-md pa-10>
|
<v-container grid-list-md pa-10>
|
||||||
<v-layout row wrap>
|
<v-layout row wrap>
|
||||||
<v-flex md12>
|
<v-flex md12>
|
||||||
|
|
@ -9,37 +9,7 @@
|
||||||
<p>Here you can Administrate your apps</p>
|
<p>Here you can Administrate your apps</p>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
</v-layout>
|
</v-layout>
|
||||||
<v-layout row wrap>
|
<AppCards :apps="apps" v-on:appClick="navigateToAppSettingPage"></AppCards>
|
||||||
<v-flex md4 xs12 text-xs-center v-for="(item, index) in apps">
|
|
||||||
<v-card>
|
|
||||||
<v-layout>
|
|
||||||
<v-flex xs5>
|
|
||||||
<v-img
|
|
||||||
:src="getImageUrl(item.id)"
|
|
||||||
height="125px"
|
|
||||||
contain
|
|
||||||
></v-img>
|
|
||||||
</v-flex>
|
|
||||||
<v-flex xs7>
|
|
||||||
<v-card-title primary-title>
|
|
||||||
<div>
|
|
||||||
<div class="headline">{{ item.name }}</div>
|
|
||||||
<div>{{ item.description }}</div>
|
|
||||||
</div>
|
|
||||||
</v-card-title>
|
|
||||||
</v-flex>
|
|
||||||
</v-layout>
|
|
||||||
<v-divider light></v-divider>
|
|
||||||
<v-card-actions class="pa-3">
|
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
<v-btn icon>
|
|
||||||
<v-icon @click="$router.push({name: 'appDetails', params: {id: item.id}})">settings</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</v-flex>
|
|
||||||
</v-layout>
|
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -49,15 +19,23 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AppService from '../services/Apps'
|
import AppService from '../services/Apps'
|
||||||
|
import AppCardsComponente from '../components/AppCards'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
apps: []
|
apps: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
"AppCards": AppCardsComponente
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getImageUrl: function(id) {
|
getImageUrl: function(id) {
|
||||||
return AppService.getAppImage(id); // "https://account.keks.cloud/gui/apps/"+id+"/icon";
|
return AppService.getAppImage(id); // "https://account.keks.cloud/gui/apps/"+id+"/icon";
|
||||||
|
},
|
||||||
|
navigateToAppSettingPage: function(app) {
|
||||||
|
this.$router.push({name: 'appDetails', params: {id: app.id}});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="">
|
<div style="min-height: 100pc;" class="bg">
|
||||||
<div class="header2">
|
<div class="header2">
|
||||||
</div>
|
</div>
|
||||||
<v-container grid-list-md>
|
<v-container grid-list-md>
|
||||||
<v-layout row wrap>
|
<v-layout row wrap>
|
||||||
<v-flex md4></v-flex>
|
<v-flex md4></v-flex>
|
||||||
<v-flex md4 v-if="!$store.state.loggedIn">
|
<v-flex md4 v-if="!$store.state.loggedIn" style="">
|
||||||
<Login></Login>
|
<template>
|
||||||
|
<v-card
|
||||||
|
class="mx-auto"
|
||||||
|
>
|
||||||
|
<v-card-title>Login</v-card-title>
|
||||||
|
<v-card-text><Login></Login></v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
</v-flex>
|
</v-flex>
|
||||||
<v-flex md4 v-if="$store.state.loggedIn">
|
<v-flex md4 v-if="$store.state.loggedIn">
|
||||||
<p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p>
|
<template>
|
||||||
|
<v-card
|
||||||
|
class="mx-auto"
|
||||||
|
>
|
||||||
|
<v-card-title>Login</v-card-title>
|
||||||
|
<v-card-text><p>Hallo {{$store.getters.getMe["username"]}}, du bist bereits eingeloggt.</p></v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
</v-flex>
|
</v-flex>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</v-layout>
|
</v-layout>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
||||||
|
|
@ -69,6 +86,9 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.bg {
|
||||||
|
background-image: url('~@/assets/texture-1485529_1920.jpg');
|
||||||
|
}
|
||||||
.header2 {
|
.header2 {
|
||||||
background-image: url('~@/assets/texture-1485529_1920.jpg');
|
background-image: url('~@/assets/texture-1485529_1920.jpg');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
|
||||||
Reference in a new issue