From 2c87c528a0500546505e77ebc55c812e0ac062b5 Mon Sep 17 00:00:00 2001
From: Kekskurse <git@kekskurse.de>
Date: Tue, 24 Sep 2019 16:21:00 +0200
Subject: [PATCH] New Stuff

---
 .env                              |  1 +
 .env.development                  |  1 +
 package-lock.json                 | 24 +++++++++++
 package.json                      |  1 +
 src/components/UploadAppImage.vue | 69 +++++++++++++++++++++++++++++++
 src/services/Api.js               |  2 +-
 src/services/Apps.js              |  4 +-
 src/views/AppDetails.vue          | 38 +++++++++++------
 8 files changed, 124 insertions(+), 16 deletions(-)
 create mode 100644 .env
 create mode 100644 .env.development
 create mode 100644 src/components/UploadAppImage.vue

diff --git a/.env b/.env
new file mode 100644
index 00000000..d2b1562e
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VUE_APP_API_URL=https://api.account.keks.cloud
diff --git a/.env.development b/.env.development
new file mode 100644
index 00000000..4f533623
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VUE_APP_API_URL=http://localhost:8000/
diff --git a/package-lock.json b/package-lock.json
index de45238d..b33bc35b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2392,6 +2392,22 @@
         "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": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -11996,6 +12012,14 @@
       "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
       "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": {
       "version": "15.7.1",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.1.tgz",
diff --git a/package.json b/package.json
index f8f1499a..671b8338 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "axios": "^0.18.1",
     "core-js": "^2.6.9",
     "vue": "^2.6.10",
+    "vue-image-crop-upload": "^2.5.0",
     "vue-router": "^3.1.2",
     "vuetify": "^2.0.5",
     "vuex": "^3.1.1"
diff --git a/src/components/UploadAppImage.vue b/src/components/UploadAppImage.vue
new file mode 100644
index 00000000..3423984a
--- /dev/null
+++ b/src/components/UploadAppImage.vue
@@ -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>
diff --git a/src/services/Api.js b/src/services/Api.js
index 9a5363f2..4cddd668 100644
--- a/src/services/Api.js
+++ b/src/services/Api.js
@@ -3,7 +3,7 @@ import axios from 'axios'
 export default() => {
     return axios.create({
         //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,
         headers: {
             'Accept': 'application/json',
diff --git a/src/services/Apps.js b/src/services/Apps.js
index 180d7930..04012ce9 100644
--- a/src/services/Apps.js
+++ b/src/services/Apps.js
@@ -5,7 +5,7 @@ export default {
         return Api().get('/v1/app')
     },
     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) {
         return Api().get('/v1/app/'+id)
@@ -31,4 +31,4 @@ export default {
     newApp(name, description, url) {
         return Api().post('/v1/app', {name: name, description: description, url: url});
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/AppDetails.vue b/src/views/AppDetails.vue
index 3e703014..bafe39e8 100644
--- a/src/views/AppDetails.vue
+++ b/src/views/AppDetails.vue
@@ -20,7 +20,7 @@
 
                             <v-tab-item :key="1" :transition="false"  :reverse-transition="false" >
                                 <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>
                                     {{ app.description }}<br><br>
                                     <a :href="app.url">{{ app.url }}</a>
@@ -135,7 +135,7 @@
                                             <v-btn color="success" @click="updateSettings()" >Speichern</v-btn>
                                         </v-flex>
                                         <v-flex md4>
-                                            IMAGE
+                                            <UploadAppImage :appId="app.id"></UploadAppImage>
                                         </v-flex>
 
                                     </v-layout>
@@ -144,6 +144,9 @@
                             <v-tab-item :key="4" :transition="false"  :reverse-transition="false">
                                 <v-container style="padding-right: 0px; padding-left:0px;">
                                     <p>
+                                        <v-alert type="warning">
+                                            This feature coming soon.
+                                        </v-alert>
                                         Beim ändern der Permissions müssen alle User den Zugriff erneut bestätigen.
 
                                         <v-checkbox
@@ -190,16 +193,23 @@
                                 </v-container>
                             </v-tab-item>
                             <v-tab-item :key="4" :transition="false"  :reverse-transition="false">
-                                <v-container style="padding-right: 0px; padding-left:0px;">
-                                        <table>
-                                            <tr>
-                                                <th>Username</th>
-                                            </tr>
-                                            <tr v-for="user in appUser">
-                                                <td>{{ user.username }}</td>
-                                            </tr>
-                                        </table>
-                                </v-container>
+
+                                <v-simple-table>
+                                    <template v-slot:default>
+                                        <thead>
+                                        <tr>
+                                            <th class="text-left">Username</th>
+                                            <th class="text-right">Actions</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        <tr v-for="user in appUser">
+                                            <td>{{ user.username }}</td>
+                                            <td class="text-right"><i>None</i></td>
+                                        </tr>
+                                        </tbody>
+                                    </template>
+                                </v-simple-table>
                             </v-tab-item>
 
                         </v-tabs>
@@ -221,6 +231,7 @@
     import UserService from '../services/User'
     import LoginComponent from '../components/Login'
     import AppService from '../services/Apps'
+    import UploadAppImageComponent from '../components/UploadAppImage'
 
     export default {
         data () {
@@ -231,7 +242,8 @@
             }
         },
         components: {
-            "Login": LoginComponent
+            "Login": LoginComponent,
+            "UploadAppImage": UploadAppImageComponent
         },
         methods: {
             'updateSettings': function () {