New Stuff
This commit is contained in:
parent
4c1a94159a
commit
2c87c528a0
8 changed files with 124 additions and 16 deletions
1
.env
Normal file
1
.env
Normal file
|
@ -0,0 +1 @@
|
||||||
|
VUE_APP_API_URL=https://api.account.keks.cloud
|
1
.env.development
Normal file
1
.env.development
Normal file
|
@ -0,0 +1 @@
|
||||||
|
VUE_APP_API_URL=http://localhost:8000/
|
24
package-lock.json
generated
24
package-lock.json
generated
|
@ -2392,6 +2392,22 @@
|
||||||
"resolve": "^1.4.0"
|
"resolve": "^1.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"babel-runtime": {
|
||||||
|
"version": "6.26.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
|
||||||
|
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
|
||||||
|
"requires": {
|
||||||
|
"core-js": "^2.4.0",
|
||||||
|
"regenerator-runtime": "^0.11.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"regenerator-runtime": {
|
||||||
|
"version": "0.11.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
|
||||||
|
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||||
|
@ -11996,6 +12012,14 @@
|
||||||
"integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
|
"integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"vue-image-crop-upload": {
|
||||||
|
"version": "2.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-image-crop-upload/-/vue-image-crop-upload-2.5.0.tgz",
|
||||||
|
"integrity": "sha512-AV+ZwPuaZ8tKdSopaSOCk4v0JqKZjFu6uLQg5D06pzt2GLcIR8NgrFz+/S0YN25RgkC4vHvUr9+XcNSUTk28ng==",
|
||||||
|
"requires": {
|
||||||
|
"babel-runtime": "^6.11.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"vue-loader": {
|
"vue-loader": {
|
||||||
"version": "15.7.1",
|
"version": "15.7.1",
|
||||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.1.tgz",
|
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.1.tgz",
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
"axios": "^0.18.1",
|
"axios": "^0.18.1",
|
||||||
"core-js": "^2.6.9",
|
"core-js": "^2.6.9",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
|
"vue-image-crop-upload": "^2.5.0",
|
||||||
"vue-router": "^3.1.2",
|
"vue-router": "^3.1.2",
|
||||||
"vuetify": "^2.0.5",
|
"vuetify": "^2.0.5",
|
||||||
"vuex": "^3.1.1"
|
"vuex": "^3.1.1"
|
||||||
|
|
69
src/components/UploadAppImage.vue
Normal file
69
src/components/UploadAppImage.vue
Normal file
|
@ -0,0 +1,69 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div style="text-align: center">
|
||||||
|
<img :src="imgDataUrl"><br>
|
||||||
|
<v-btn
|
||||||
|
depressed
|
||||||
|
@click="toggleShow"
|
||||||
|
>Upload new Image</v-btn>
|
||||||
|
</div>
|
||||||
|
<my-upload field="img"
|
||||||
|
@crop-success="cropSuccess"
|
||||||
|
|
||||||
|
v-model="show"
|
||||||
|
:width="300"
|
||||||
|
:height="300"
|
||||||
|
:url="uploadUrl"
|
||||||
|
:params="params"
|
||||||
|
:headers="headers"
|
||||||
|
lang-type="en"
|
||||||
|
img-format="png"></my-upload>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
//import 'babel-polyfill'; // es6 shim
|
||||||
|
import myUpload from 'vue-image-crop-upload';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
uploadUrl: process.env.VUE_APP_API_URL+"api/v1/app/"+this.appId+"/changeImage",
|
||||||
|
params: {
|
||||||
|
token: '123456798',
|
||||||
|
name: 'avatar'
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
Authorization: 'ERROR'
|
||||||
|
},
|
||||||
|
imgDataUrl: '' // the datebase64 url of created image
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: [
|
||||||
|
'appId',
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
'my-upload': myUpload
|
||||||
|
},
|
||||||
|
mounted: function() {
|
||||||
|
let token = localStorage.getItem("access_token");
|
||||||
|
this.headers["Authorization"] = "Bearer "+token
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleShow() {
|
||||||
|
this.show = !this.show;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* crop success
|
||||||
|
*
|
||||||
|
* [param] imgDataUrl
|
||||||
|
* [param] field
|
||||||
|
*/
|
||||||
|
cropSuccess(imgDataUrl, field){
|
||||||
|
this.imgDataUrl = imgDataUrl;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -3,7 +3,7 @@ import axios from 'axios'
|
||||||
export default() => {
|
export default() => {
|
||||||
return axios.create({
|
return axios.create({
|
||||||
//baseURL: `http://127.0.0.1:8000/api/`,
|
//baseURL: `http://127.0.0.1:8000/api/`,
|
||||||
baseURL: `https://api.account.keks.cloud/api/`,
|
baseURL: process.env.VUE_APP_API_URL+`api/`,
|
||||||
withCredentials: false,
|
withCredentials: false,
|
||||||
headers: {
|
headers: {
|
||||||
'Accept': 'application/json',
|
'Accept': 'application/json',
|
||||||
|
|
|
@ -5,7 +5,7 @@ export default {
|
||||||
return Api().get('/v1/app')
|
return Api().get('/v1/app')
|
||||||
},
|
},
|
||||||
getAppImage(id) {
|
getAppImage(id) {
|
||||||
return "https://api.account.keks.cloud/gui/apps/"+id+"/icon";
|
return process.env.VUE_APP_API_URL+"gui/apps/"+id+"/icon";
|
||||||
},
|
},
|
||||||
getApp(id) {
|
getApp(id) {
|
||||||
return Api().get('/v1/app/'+id)
|
return Api().get('/v1/app/'+id)
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
|
|
||||||
<v-tab-item :key="1" :transition="false" :reverse-transition="false" >
|
<v-tab-item :key="1" :transition="false" :reverse-transition="false" >
|
||||||
<v-container style="padding-right: 0px; padding-left:0px;">
|
<v-container style="padding-right: 0px; padding-left:0px;">
|
||||||
<img :src="imageUrl" style="float: right;width: 100px;">
|
<img :src="imageUrl" style="float: right;max-width: 300px;">
|
||||||
<b>Description</b><br>
|
<b>Description</b><br>
|
||||||
{{ app.description }}<br><br>
|
{{ app.description }}<br><br>
|
||||||
<a :href="app.url">{{ app.url }}</a>
|
<a :href="app.url">{{ app.url }}</a>
|
||||||
|
@ -135,7 +135,7 @@
|
||||||
<v-btn color="success" @click="updateSettings()" >Speichern</v-btn>
|
<v-btn color="success" @click="updateSettings()" >Speichern</v-btn>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
<v-flex md4>
|
<v-flex md4>
|
||||||
IMAGE
|
<UploadAppImage :appId="app.id"></UploadAppImage>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
|
|
||||||
</v-layout>
|
</v-layout>
|
||||||
|
@ -144,6 +144,9 @@
|
||||||
<v-tab-item :key="4" :transition="false" :reverse-transition="false">
|
<v-tab-item :key="4" :transition="false" :reverse-transition="false">
|
||||||
<v-container style="padding-right: 0px; padding-left:0px;">
|
<v-container style="padding-right: 0px; padding-left:0px;">
|
||||||
<p>
|
<p>
|
||||||
|
<v-alert type="warning">
|
||||||
|
This feature coming soon.
|
||||||
|
</v-alert>
|
||||||
Beim ändern der Permissions müssen alle User den Zugriff erneut bestätigen.
|
Beim ändern der Permissions müssen alle User den Zugriff erneut bestätigen.
|
||||||
|
|
||||||
<v-checkbox
|
<v-checkbox
|
||||||
|
@ -190,16 +193,23 @@
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-tab-item>
|
</v-tab-item>
|
||||||
<v-tab-item :key="4" :transition="false" :reverse-transition="false">
|
<v-tab-item :key="4" :transition="false" :reverse-transition="false">
|
||||||
<v-container style="padding-right: 0px; padding-left:0px;">
|
|
||||||
<table>
|
<v-simple-table>
|
||||||
|
<template v-slot:default>
|
||||||
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Username</th>
|
<th class="text-left">Username</th>
|
||||||
|
<th class="text-right">Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
<tr v-for="user in appUser">
|
<tr v-for="user in appUser">
|
||||||
<td>{{ user.username }}</td>
|
<td>{{ user.username }}</td>
|
||||||
|
<td class="text-right"><i>None</i></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
</v-container>
|
</template>
|
||||||
|
</v-simple-table>
|
||||||
</v-tab-item>
|
</v-tab-item>
|
||||||
|
|
||||||
</v-tabs>
|
</v-tabs>
|
||||||
|
@ -221,6 +231,7 @@
|
||||||
import UserService from '../services/User'
|
import UserService from '../services/User'
|
||||||
import LoginComponent from '../components/Login'
|
import LoginComponent from '../components/Login'
|
||||||
import AppService from '../services/Apps'
|
import AppService from '../services/Apps'
|
||||||
|
import UploadAppImageComponent from '../components/UploadAppImage'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
|
@ -231,7 +242,8 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
"Login": LoginComponent
|
"Login": LoginComponent,
|
||||||
|
"UploadAppImage": UploadAppImageComponent
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
'updateSettings': function () {
|
'updateSettings': function () {
|
||||||
|
|
Reference in a new issue