kekscloud/keksAccountGUI
Archived
1
0
Fork 0
Code Issues 2 Pull requests Releases Wiki Activity

YoLo making this thing actually usable.

Browse source
This commit is contained in:
Kekskurse 2019-08-17 20:21:55 +02:00
parent dd19c6d57a
commit 4c1a94159a
6 changed files with 122 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/components/AppCards.vue Normal file
View 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
src/components/Login.vue
View file

@ -1,6 +1,5 @@
<template>
<div>
<h1>Login</h1>
<v-alert
:value="true"
type="error"

2
src/views/AppDetails.vue
View file

@ -1,5 +1,5 @@
<template>
<div style="">
<div style="margin-top: 50px;">
<v-container grid-list-md pa-10>
<v-layout row wrap>

61
src/views/Dashboard.vue
View file

@ -1,59 +1,23 @@
<template>
<div style="">
<div style="margin-top:50px;">
<v-container grid-list-md pa-10 >
<v-layout row wrap>
<v-flex md12>
<h1>Dashboard</h1>
<br><br>
<h3>Hello {{$store.getters.getMe["username"]}}, login to</h3>
<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>
<AppCards :apps="apps" v-on:appClick="navigateToApp"></AppCards>
</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-container>
</div>
</template>
<script>
import ServerService from '../services/Server'
import UserService from '../services/User'
import AppService from '../services/Apps'
import AppCardsComponente from '../components/AppCards'
export default {
data () {
@ -63,6 +27,9 @@
apps: []
}
},
components: {
"AppCards": AppCardsComponente
},
methods: {
'getImageUrl' : function (id) {
return AppService.getAppImage(id);
@ -85,13 +52,13 @@
</script>
<style>
.header {
.header {
background-image: url('~@/assets/manhattan-407703_1920.jpg');
background-repeat: no-repeat;
margin-top: -100px;
height: 30vh;
text-align: center;
}
}
.header h1{
padding-top: 200px;
font-size: 56px !important;
@ -102,21 +69,21 @@
.header h1 .small{
font-weight: 300 !important;
}
.header h2{
.header h2{
padding-top: 30px;
font-size: 34px !important;
font-weight: 300;
line-height: 32px !important;
letter-spacing: normal !important;
}
h1{
}
h1{
font-weight: 300;
line-height: 32px !important;
letter-spacing: normal !important;
}
h2{
}
h2{
font-weight: 300;
line-height: 32px !important;
letter-spacing: normal !important;
}
}
</style>

44
src/views/ListApps.vue
View file

@ -1,5 +1,5 @@
<template>
<div style="">
<div style="margin-top: 50px;">
<v-container grid-list-md pa-10>
<v-layout row wrap>
<v-flex md12>
@ -9,37 +9,7 @@
<p>Here you can Administrate your apps</p>
</v-flex>
</v-layout>
<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 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>
<AppCards :apps="apps" v-on:appClick="navigateToAppSettingPage"></AppCards>
</v-container>
@ -49,15 +19,23 @@
<script>
import AppService from '../services/Apps'
import AppCardsComponente from '../components/AppCards'
export default {
data () {
return {
apps: []
apps: [],
}
},
components: {
"AppCards": AppCardsComponente
},
methods: {
getImageUrl: function(id) {
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() {

28
src/views/Login.vue
View file

@ -1,18 +1,35 @@
<template>
<div style="">
<div style="min-height: 100pc;" class="bg">
<div class="header2">
</div>
<v-container grid-list-md>
<v-layout row wrap>
<v-flex md4></v-flex>
<v-flex md4 v-if="!$store.state.loggedIn">
<Login></Login>
<v-flex md4 v-if="!$store.state.loggedIn" style="">
<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 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-layout>
</v-container>
@ -69,6 +86,9 @@
</script>
<style>
.bg {
background-image: url('~@/assets/texture-1485529_1920.jpg');
}
.header2 {
background-image: url('~@/assets/texture-1485529_1920.jpg');
background-repeat: no-repeat;