IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

switch language und switch clare format for currency in english and german, europa

Browse Source
This commit is contained in:
ogerly 2021-03-04 11:48:09 +01:00
parent 2b3dad4970
commit 243451d691
8 changed files with 34 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/SidebarPlugin/SideBar.vue
View File

@ -159,10 +159,10 @@
},
setLocale(locale) {
this.$i18n.locale = locale
this.$router.push({
params: { lang: locale }
})
this.hideDropdown()
//this.$router.push({
// params: { lang: locale }
//})
//this.hideDropdown()
}
},
beforeDestroy() {

126
frontend/src/components/SwitchLang.vue
View File

@ -1,126 +0,0 @@
<template>
<div class="relative">
<button
href="#"
class="flex items-center"
@click="toggleVisibility"
@keydown.space.exact.prevent="toggleVisibility"
@keydown.esc.exact="hideDropdown"
@keydown.shift.tab="hideDropdown"
@keydown.up.exact.prevent="startArrowKeys"
@keydown.down.exact.prevent="startArrowKeys"
>
<img :src="`/flag_${$i18n.locale}.svg`" alt="flag" class="w-8 h-8">
<span class="ml-2">{{ $i18n.locale.toUpperCase() }}</span>
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"></path></svg>
</button>
<transition name="dropdown-fade">
<ul v-on-clickaway="hideDropdown" v-if="isVisible" ref="dropdown" class="absolute normal-case z-30 font-normal xs:left-0 lg:right-0 bg-white shadow overflow-hidden rounded w-48 border mt-2 py-1 lg:z-20">
<li>
<a
href="#"
@click.prevent="setLocale('en')"
ref="account"
class="flex items-center px-3 py-3 hover:bg-gray-200"
@keydown.up.exact.prevent=""
@keydown.tab.exact="focusNext(false)"
@keydown.down.exact.prevent="focusNext(true)"
@keydown.esc.exact="hideDropdown"
>
<img src="/flag_en.svg" alt="english flag" class="h-8 w-8">
<span class="ml-2">English</span>
</a>
</li>
<!-- <li>
<a
href="#"
class="flex items-center px-3 py-3 hover:bg-gray-200"
@keydown.tab.exact="focusNext(false)"
@keydown.shift.tab="focusPrevious(false)"
@keydown.up.exact.prevent="focusPrevious(true)"
@keydown.down.exact.prevent="focusNext(true)"
@keydown.esc.exact="hideDropdown"
>
<svg fill="currentColor" class="text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-11v2h1a3 3 0 0 1 0 6h-1v1a1 1 0 0 1-2 0v-1H8a1 1 0 0 1 0-2h3v-2h-1a3 3 0 0 1 0-6h1V6a1 1 0 0 1 2 0v1h3a1 1 0 0 1 0 2h-3zm-2 0h-1a1 1 0 1 0 0 2h1V9zm2 6h1a1 1 0 0 0 0-2h-1v2z"></path></svg>
<span class="ml-2">Billing</span>
</a>
</li> -->
<li>
<a
href="#"
@click.prevent="setLocale('de')"
class="flex items-center px-3 py-3 hover:bg-gray-200"
@keydown.shift.tab="focusPrevious(false)"
@keydown.up.exact.prevent="focusPrevious(true)"
@keydown.down.exact.prevent=""
@keydown.tab.exact="hideDropdown"
@keydown.esc.exact="hideDropdown"
>
<img src="/flag_de.svg" alt="english flag" class="h-8 w-8">
<span class="ml-2">Deutsch</span>
</a>
</li>
</ul>
</transition>
</div>
</template>
<script>
import { mixin as clickaway } from 'vue-clickaway'
export default {
mixins: [ clickaway ],
data() {
return {
isVisible: false,
focusedIndex: 0,
}
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
},
hideDropdown() {
this.isVisible = false
this.focusedIndex = 0
},
startArrowKeys() {
if (this.isVisible) {
// this.$refs.account.focus()
this.$refs.dropdown.children[0].children[0].focus()
}
},
focusPrevious(isArrowKey) {
this.focusedIndex = this.focusedIndex - 1
if (isArrowKey) {
this.focusItem()
}
},
focusNext(isArrowKey) {
this.focusedIndex = this.focusedIndex + 1
if (isArrowKey) {
this.focusItem()
}
},
focusItem() {
this.$refs.dropdown.children[this.focusedIndex].children[0].focus()
},
setLocale(locale) {
this.$i18n.locale = locale
this.$router.push({
params: { lang: locale }
})
this.hideDropdown()
}
}
}
</script>
<style scoped>
.dropdown-fade-enter-active, .dropdown-fade-leave-active {
transition: all .1s ease-in-out;
}
.dropdown-fade-enter, .dropdown-fade-leave-to {
opacity: 0;
transform: translateY(-12px);
}
</style>

17
frontend/src/i18n.js
View File

@ -16,8 +16,23 @@ function loadLocaleMessages () {
return messages
}
const numberFormats = {
'en-US': {
currency: {
style: 'currency'
}
},
'de-DE': {
currency: {
style: 'currency'
}
}
}
export default new VueI18n({
locale: 'en',
fallbackLocale: 'en',
messages: loadLocaleMessages()
messages: loadLocaleMessages(),
numberFormats
})

30
frontend/src/store/store.js
View File

@ -45,11 +45,11 @@ export const store = new Vuex.Store({
},
user_balance: (state,balance) => {
//console.log('mutation: user_balance')
state.user.balance = balance
state.user.balance = (balance)/10000
},
user_balance_gdt: (state,balance) => {
//console.log('mutation: user_balance_gdt')
state.user.balance_gdt = balance
state.user.balance_gdt = (balance)/10000
},
transactions: (state,transactions) => {
//console.log('mutation: transactions')
@ -102,27 +102,6 @@ export const store = new Vuex.Store({
},
ajaxCreate: async ({ dispatch, state }) => {
//console.log('action: ajaxCreate')
//console.log("dispatch", dispatch)
//console.log("state.ajaxCreateData", state.ajaxCreateData)
/*
const result = await communityAPI.create(
state.ajaxCreateData.session_id,
state.ajaxCreateData.email,
state.ajaxCreateData.amount,
state.ajaxCreateData.target_date,
state.ajaxCreateData.memo
)
*/
/*
this.ajaxCreateData.session_id : '',
this.ajaxCreateData.email: "max.musterman@gmail.de",
this.ajaxCreateData.amount: 10000000,
this.ajaxCreateData.target_date:"2021-02-19T13:25:36+00:00",
this.ajaxCreateData.memo:"AGE",
this.ajaxCreateData.auto_sign: true
*/
axios.post("http://localhost/transaction-creations/ajaxCreate", state.ajaxCreateData).then((result) => {
console.log("store ajaxCreate result", result)
@ -138,10 +117,7 @@ export const store = new Vuex.Store({
},
ajaxListTransactions: async ({commit, dispatch, state}) => {
// console.log('action: ajaxListTransactions', state.session_id)
// const result = await communityAPI.transactions(state.session_id)
// const result = await communityAPI.transactions(state.session_id)
},
accountBalance: async ({ commit, dispatch, state }) => {
//console.log('action: accountBalance')

16
frontend/src/views/KontoOverview/GddStatus.vue
View File

@ -6,7 +6,7 @@
type="gradient-red"
sub-title="balance_gdd"
class="mb-4">
{{ setComma($store.state.user.balance) }} GDD
{{ $n($store.state.user.balance) }} GDD
<template slot="footer">
<span class="text-success mr-2">Wird immer angezeigt</span>
</template>
@ -17,13 +17,14 @@
type="gradient-orange"
sub-title="balance_gdt"
class="mb-4">
{{ setComma($store.state.user.balance_gdt) }} GDT
{{ $n($store.state.user.balance_gdt) }} GDT
<template slot="footer">
<span class="text-nowrap">Wird nur angezeigt wenn user GDT besitzt.</span>
</template>
</stats-card>
</b-col>
</b-row>
</div>
</template>
@ -35,15 +36,6 @@ export default {
balance_gdd: this.$store.state.user.balance,
balance_gdt: this.$store.state.user.balance_gdt,
}
},
methods: {
setComma(int){
if (int !== '' || int !== undefined || int !== 0 || int !== '0' || int !== null) {
int = int /10000
return int.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
//return int / 10000
}
}
},
}
};
</script>

8
frontend/src/views/KontoOverview/GddTable.vue
View File

@ -6,7 +6,7 @@
<div class="d-flex w-100 justify-content-between" @click="toogle(item)" >
<b-icon v-if="item.type === 'send'" icon="box-arrow-left" class="m-1" font-scale="2" style="color:red"></b-icon>
<b-icon v-else icon="box-arrow-right" class="m-1" font-scale="2" style="color:green" ></b-icon>
<h1 class="mb-1">{{ setComma(item.balance) }} <small>GDD</small></h1>
<h1 class="mb-1">{{ $n((item.balance)/1000) }} <small>GDD</small></h1>
<h2 class="text-muted">{{item.name}}</h2>
<b-button v-b-toggle="'a'+item.transaction_id" variant="primary"><b>i</b></b-button>
</div>
@ -80,12 +80,6 @@ export default {
toogle(item) {
const temp = '<b-collapse visible v-bind:id="item.id">xxx <small class="text-muted">porta</small></b-collapse>'
},
setComma(int){
if (int !== '' || int !== undefined || int !== 0 || int !== '0' || int !== null) {
int = int /10000
return int.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
}
}
}
};

8
frontend/src/views/Layout/ContentFooter.vue
View File

@ -8,16 +8,16 @@
</b-col>
<b-col lg="6">
<b-nav class="nav-footer justify-content-center justify-content-lg-end">
<b-nav-item ref="https://www.creative-tim.com" target="_blank">
<b-nav-item ref="https://gradido.net/" target="_blank">
Gradido
</b-nav-item>
<b-nav-item href="https://www.creative-tim.com/presentation" target="_blank">
<b-nav-item href="https://gradido.net/" target="_blank">
Impressum
</b-nav-item>
<b-nav-item href="http://blog.creative-tim.com" target="_blank">
<b-nav-item href="https://gradido.net/" target="_blank">
Datenschutzerklärung
</b-nav-item>
<b-nav-item href="https://www.creative-tim.com/license" target="_blank">
<b-nav-item href="https://gradido.net/" target="_blank">
License
</b-nav-item>
</b-nav>

12
frontend/src/views/Pages/UserProfile/UserCard.vue
View File

@ -29,7 +29,7 @@
<span class="description">Community</span>
</div>
<div>
<span class="heading"> {{ setComma(this.$store.state.user.balance) }} </span>
<span class="heading"> {{ $n(this.$store.state.user.balance) }} </span>
<span class="description">GDD</span>
</div>
</div>
@ -63,15 +63,7 @@ export default {
name: "profilecard",
components: {
VueQrcode,
},
methods: {
setComma(int){
if (int !== '' || int !== undefined || int !== 0 || int !== '0' || int !== null) {
int = int /10000
return int.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
}
}
}
}
};
</script>
<style></style>