kompetenzinventar/ki-frontend
7
4
Fork 7
Code Issues Pull Requests 11 Packages Projects Releases 1 Wiki Activity

config.js #9

Merged
weeman merged 1 commits from feature-config-js into main 2021-08-02 18:02:11 +02:00
Conversation 0 Commits 1 Files Changed 12 +40 -26
12 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -2,6 +2,8 @@
node_modules node_modules
/dist /dist
# KI
/public/config.js
# local env files # local env files
.env.local .env.local

18
README.md
View File

@ -3,19 +3,28 @@
[![Build Status](https://drone.wtf-eg.de/api/badges/kompetenzinventar/ki-frontend/status.svg)](https://drone.wtf-eg.de/kompetenzinventar/ki-frontend) [![Build Status](https://drone.wtf-eg.de/api/badges/kompetenzinventar/ki-frontend/status.svg)](https://drone.wtf-eg.de/kompetenzinventar/ki-frontend)
Vue3 Projekt: Vue3 Projekt:
## Project setup ## Project setup
``` ```
npm ci npm ci
``` ```
### Konfigurationsdatei anpassen
```
cp public/config.js.dev public/config.js
vi public/config.js
```
### Compiles and hot-reloads for development ### Compiles and hot-reloads for development
``` ```
VUE_APP_API_URL=http://localhost:8000 npm run serve npm run serve
``` ```
### Compiles and minifies for production ### Compiles and minifies for production
``` ```
VUE_APP_API_URL=http://localhost:8000 npm run build npm run build
``` ```
### Lints and fixes files ### Lints and fixes files
@ -28,9 +37,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
Vorraussetzung: Node & NPM Vorraussetzung: Node & NPM
### Enviroment Variable
VUE_APP_API_URL ist die Enviroment Variable mit der die Adresse der API übergeben wird
## Docker ## Docker
@ -46,7 +52,7 @@ docker build --target ki-frontend --tag ki_frontend .
``` ```
docker run \ docker run \
--name=ki_frontend \ --name=ki_frontend \
-e VUE_APP_API_URL=http://localhost:5000 \ -v ${PWD}/public/config.js:/user/share/nginx/html/config.js \
-p 8000:80 \ -p 8000:80 \
ki_frontend ki_frontend
``` ```

3
public/config.js.dev Normal file
View File

@ -0,0 +1,3 @@
window.ki = {
apiUrl: 'http://localhost:5000'
}

3
public/config.js.int Normal file
View File

@ -0,0 +1,3 @@
window.ki = {
apiUrl: 'http://localhost:13338'
}

4
public/index.html
View File

@ -4,9 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" type="image/png" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" type="image/png" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" type="image/png" href="<%= BASE_URL %>favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="<%= BASE_URL %>favicon-96x96.png" sizes="96x96">
<title>Kompetenz Inventar der WTF eG</title> <title>Kompetenz Inventar der WTF eG</title>
<script src="<%= BASE_URL %>config.js"></script>
</head> </head>
<body> <body>
<noscript> <noscript>

2
src/App.vue
View File

@ -107,4 +107,4 @@ export default {
}, },
}, },
}; };
</script> </script>

6
src/components/AutoComplete.vue
View File

@ -109,7 +109,7 @@ export default {
}, },
data() { data() {
return { return {
iconUrl: process.env.VUE_APP_API_URL, iconUrl: this.apiUrl,
searchText: "", searchText: "",
contactContent: "", contactContent: "",
searchResults: [], searchResults: [],
@ -122,7 +122,7 @@ export default {
async search() { async search() {
try { try {
const request = await this.axios.get( const request = await this.axios.get(
`${process.env.VUE_APP_API_URL}/${this.type}s?search=${this.searchText}`, `${this.apiUrl}/${this.type}s?search=${this.searchText}`,
{ {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
@ -204,4 +204,4 @@ export default {
}, },
}, },
}; };
</script> </script>

4
src/components/ProfileList.vue
View File

@ -59,8 +59,8 @@ export default {
}, },
data() { data() {
return { return {
iconUrl: process.env.VUE_APP_API_URL iconUrl: this.apiUrl
} }
} }
}; };
</script> </script>

8
src/main.js
View File

@ -1,4 +1,4 @@
import { createApp } from 'vue/dist/vue.esm-bundler'; import { createApp } from 'vue/dist/vue.esm-bundler'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
@ -12,10 +12,6 @@ const app = createApp(App)
app.use(router) app.use(router)
app.config.globalProperties.axios=axios app.config.globalProperties.axios=axios
app.config.globalProperties.apiUrl = window.ki.apiUrl
app.config.globalProperties.apiUrl= (process.env.VUE_APP_API_URL ? process.env.VUE_APP_API_URL : '')
app.mount('#app') app.mount('#app')

4
src/views/Search.vue
View File

@ -80,7 +80,7 @@ export default {
async submitSearch() { async submitSearch() {
this.showErrorMessage = false; this.showErrorMessage = false;
try { try {
let url = `${process.env.VUE_APP_API_URL}/users/profiles`; let url = `${this.apiUrl}/users/profiles`;
if (this.searchText != "") { if (this.searchText != "") {
url += `?nickname=${this.searchText}`; url += `?nickname=${this.searchText}`;
} }
@ -98,4 +98,4 @@ export default {
}, },
}, },
}; };
</script> </script>

8
src/views/profile/Edit.vue
View File

@ -127,7 +127,7 @@
v-model="profile.address.country" v-model="profile.address.country"
/> />
</div> </div>
</div> </div>
<button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">Speichern</button> <button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">Speichern</button>
<div <div
@ -182,7 +182,7 @@ export default {
async created() { async created() {
try { try {
const userProfile = await axios.get( const userProfile = await axios.get(
`${process.env.VUE_APP_API_URL}/users/${localStorage.getItem( `${this.apiUrl}/users/${localStorage.getItem(
"user_id" "user_id"
)}/profile`, )}/profile`,
{ {
@ -198,7 +198,7 @@ export default {
async submitForm() { async submitForm() {
try { try {
const formSubmitResult = await axios.post( const formSubmitResult = await axios.post(
`${process.env.VUE_APP_API_URL}/users/${localStorage.getItem( `${this.apiUrl}/users/${localStorage.getItem(
"user_id" "user_id"
)}/profile`, )}/profile`,
this.profile, this.profile,
@ -222,4 +222,4 @@ export default {
} }
}, },
}; };
</script> </script>

4
src/views/profile/View.vue
View File

@ -44,7 +44,7 @@ export default {
async created() { async created() {
try { try {
const userProfile = await this.axios.get( const userProfile = await this.axios.get(
`${process.env.VUE_APP_API_URL}/users/${this.$route.params.memberId}/profile`, `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
{ {
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` }, headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
} }
@ -55,4 +55,4 @@ export default {
} }
}, },
}; };
</script> </script>