NervTN/nervtn-web
NervTN/nervtn-web
8
0
Fork 0
Code Issues 5 Pull requests Releases Activity

Mise en place du menu Message/Profile et traduction

Browse source
This commit is contained in:
Pauline MAROT 2021-12-28 15:55:42 +01:00
parent 14c8aa257f
commit a5d5526ce0
Signed by untrusted user: linepau
GPG key ID: 0F0ED996BFD1E3D9
12 changed files with 344 additions and 233 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/NervTN.vue
View file

@ -1,10 +1,17 @@
<script setup>
import ReloadPWA from './components/ReloadPWA.vue';
import NavMessage from './components/message/NavMessage.vue';
import {useI18n} from 'vue-i18n';
const {t} = useI18n({useScope: 'local'});
</script>
<script>
export default{
components: {NavMessage}
}
</script>
<template>
<div id="appflex">
<div id="page">
@ -18,31 +25,12 @@ const {t} = useI18n({useScope: 'local'});
</div>
<div id="sidebar" class="sidebar">
<router-view name="Sidebar"></router-view>
<div id="menu">
<details>
<summary>
<span>👤 {{ t('menu.contact') }}</span>
</summary>
<ul>
<li><router-link to="/profil">📝 {{ t('menu.profile') }}</router-link></li>
<li><router-link to="">🗒️ {{ t('menu.contacts list') }}</router-link></li>
</ul>
</details>
<details>
<summary>
<span>💬 ✉️ {{ t('menu.messages') }}</span>
</summary>
<ul>
<li><router-link to="/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
<li><router-link to="/chat">💬 {{ t('menu.chat') }}</router-link></li>
<li><router-link to="">🎥 {{ t('menu.video conferencing') }}</router-link></li>
</ul>
</details>
<NavMessage/>
<router-view name="navMessage"></router-view>
</div>
</div>
</div>
</div>
<header class="navbar">
<router-link :to="{name: 'Apps'}" class="home-link">
<img id="main-logo" alt="" src="./assets/logo.svg"/>

187
src/components/contact/Profil.vue
View file

@ -1,187 +0,0 @@
<script setup>
import {useI18n} from 'vue-i18n';
const {t} = useI18n({useScope: 'local'});
</script>
<template>
<form id="profil" method="POST" v-on:submit="checkForm">
<div title="👤 Profil">
<h1>👤 Profil</h1>
<div>
<label for="avatar">Avatar</label>
<input type="file" />
</div>
<div>
<label for="nickname">Pseudonyme :</label>
<input type="text" v-model="home">
</div>
<div>
<label for="emailHome">Email Personnelle :</label>
<input type="email" v-model="home" placeholder="john.Doe@email.com" required>
</div>
</div>
<br>
<div title="📇 Informations personnelles">
<h1>📇 Informations personnelles</h1>
<div>
<label for="name">Nom complet :</label>
<input type="text" v-model="home" pattern="{a-zA-Z}{4,25}" placeholder="John Doe" required>
</div>
<div>
<label for="bday"> Date de naissance :</label>
<input type="date" v-model="home">
</div>
<div>
<label for="nbrHome">Numéro de téléphone :</label>
<input type="tel" v-model="home" placeholder="+32(0)15738490" >
</div>
<div class="Home">
<h3>Adresse Personnelle</h3>
<ul>
<li><label for="street">Rue :</label></li>
<input type="text" v-model="home">
<li><label for="locality">Ville :</label></li>
<input type="text" v-model="home">
<li><label for="pcode">Code Postal :</label></li>
<input type="text" v-model="home">
<li><label for="ctry">Pays :</label></li>
<input type="text" v-model="home">
</ul>
</div>
</div>
<br>
<div title="💼 Emploi">
<h1>💼 Emploi</h1>
<div>
<label for="orgname">Entreprise :</label>
<input type="text" v-model="work">
</div>
<div>
<label for="title">Poste :</label>
<input type="text" v-model="work">
</div>
<div>
<label for="role">Rôle :</label>
<input type="text" v-model="work">
</div>
<div>
<label for="emailWork">Email Professionnel :</label>
<input type="email" v-model="work">
</div>
<div>
<label for="nbrWork">Numéro de téléphone :</label>
<input type="tel" v-model="work">
</div>
<div class="Work">
<h3>Adresse Proffessionelle</h3>
<ul>
<li><label for="street">Rue :</label></li>
<input type="text" v-model="work">
<li><label for="locality">Ville :</label></li>
<input type="text" v-model="work">
<li><label for="pcode">Code Postal :</label></li>
<input type="text" v-model="work">
<li><label for="ctry">Pays :</label></li>
<input type="text" v-model="work">
</ul>
</div>
<button type="submit" value="Submit">Enregistrer</button>
</div>
<br>
<div title="✍🏼 À propos / Commentaires">
<h1>✍🏼 À propos / Commentaires</h1>
<div>
<label for="comments"></label>
<textarea v-model="home"></textarea>
</div>
<button @click="persist">Enregistrer</button>
</div>
</form>
</template>
<script>
/*const profil = new Vue ({ // vue n'est pas définie
el: '#profil',
data: {
home: null,
work: null
},
methods:{
checkForm: function (e) {
if (this.home && this.work) {
return true;
}
e.preventDefault();
}
}
}); */
/*export default { //home n'est pas déclarer
name: 'profil',
setup() {
home = "",
work = ""
},
mounted() {
if (localStorage.home) {
this.home = localStorage.home;
}
if (localStorage.work) {
this.work = localStorage.work;
}
},
methods: {
persist() {
localStorage.home = this.home;
localStorage.work = this.work;
console.log('ok');
}
}
}; */
</script>
<style scoped>
label{
padding: 5px;
}
input{
padding: 5px;
}
li {
list-style-type: none;
}
textarea {
padding: 20px;
}
button{
margin-top: 20px;
}
</style>
<i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>

188
src/components/contact/Profile.vue Normal file
View file

@ -0,0 +1,188 @@
<script setup>
import {useI18n} from 'vue-i18n';
const {t} = useI18n({useScope: 'local'});
</script>
<template>
<form id="profil" method="POST" v-on:submit="checkForm">
<div title="👤">
<h1>👤 {{ t ('pwa.profile') }}</h1>
<div>
<label for="avatar">{{ t ('pwa.avatar') }}</label>
<input type="file" id="avatar" />
</div>
<div>
<label for="nickname">{{ t ('pwa.nickname') }}:</label>
<input type="text" id="nickname" v-model="home">
</div>
<div>
<label for="emailHome">{{ t ('pwa.emailHome') }}:</label>
<input type="email" id="emailHome" v-model="home" placeholder="john.Doe@email.com" required>
</div>
</div>
<br>
<div title="📇">
<h1>📇 {{ t ('pwa.personalInfo') }}</h1>
<div>
<label for="name">{{ t ('pwa.name') }}:</label>
<input type="text" id="name" v-model="home" pattern="{a-zA-Z}{4,25}" placeholder="John Doe" required>
</div>
<div>
<label for="bday">{{ t ('pwa.bday') }}:</label>
<input type="date" id="bday" v-model="home">
</div>
<div>
<label for="nbrHome">{{ t ('pwa.nbrHome') }}:</label>
<input type="tel" id="nbrHome" v-model="home" placeholder="+32(0)15738490" >
</div>
<div class="Home">
<h3>{{ t ('pwa.home') }}</h3>
<ul>
<li><label for="street">{{ t ('pwa.street') }}:</label></li>
<input type="text" id="street" v-model="home">
<li><label for="locality">{{ t ('pwa.locality') }}:</label></li>
<input type="text" id="locality" v-model="home">
<li><label for="pcode">{{ t ('pwa.pcode') }}:</label></li>
<input type="text" id="pcode" v-model="home">
<li><label for="ctry">{{ t ('pwa.ctry') }}:</label></li>
<input type="text" id="ctry" v-model="home">
</ul>
</div>
</div>
<br>
<div title="💼">
<h1>💼 {{ t ('pwa.job') }}</h1>
<div>
<label for="orgname">{{ t ('pwa.orgname') }}:</label>
<input type="text" id="orgname" v-model="work">
</div>
<div>
<label for="title">{{ t ('pwa.title') }}:</label>
<input type="text" id="title" v-model="work">
</div>
<div>
<label for="role">{{ t ('pwa.role') }}:</label>
<input type="text" id="role" v-model="work">
</div>
<div>
<label for="emailWork">{{ t ('pwa.emailWork') }}:</label>
<input type="email" id="emailWork" v-model="work">
</div>
<div>
<label for="nbrWork">{{ t ('pwa.nbrWork') }}:</label>
<input type="tel" id="nbrWork" v-model="work">
</div>
<div class="Work">
<h3>{{ t ('pwa.work') }}</h3>
<ul>
<li><label for="street">{{ t ('pwa.street') }}:</label></li>
<input type="text" id="street" v-model="work">
<li><label for="locality">{{ t ('pwa.locality') }}:</label></li>
<input type="text" id="locality" v-model="work">
<li><label for="pcode">{{ t ('pwa.pcode') }}:</label></li>
<input type="text" id="pcode" v-model="work">
<li><label for="ctry">{{ t ('pwa.ctry') }}:</label></li>
<input type="text" id="ctry" v-model="work">
</ul>
</div>
<button type="submit" value="Submit">{{ t ('pwa.save') }}</button>
</div>
<br>
<div title="✍🏼">
<h1>✍🏼 {{ t ('pwa.comments') }}</h1>
<div>
<label for="comments"></label>
<textarea id="comments" v-model="home"></textarea>
</div>
<button @click="persist">{{ t ('pwa.save') }}</button>
</div>
</form>
</template>
<script>
/*const profil = new Vue ({ // vue n'est pas définie
el: '#profil',
data: {
home: null,
work: null
},
methods:{
checkForm: function (e) {
if (this.home && this.work) {
return true;
}
e.preventDefault();
}
}
}); */
/*export default { //home n'est pas déclarer
name: 'profil',
setup() {
home = "",
work = ""
},
mounted() {
if (localStorage.home) {
this.home = localStorage.home;
}
if (localStorage.work) {
this.work = localStorage.work;
}
},
methods: {
persist() {
localStorage.home = this.home;
localStorage.work = this.work;
console.log('ok');
}
}
}; */
</script>
<style scoped>
label{
padding: 5px;
}
input{
padding: 5px;
}
li {
list-style-type: none;
}
textarea {
padding: 20px;
}
button{
margin-top: 20px;
}
</style>
<i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>

26
src/components/contact/locale/en.json
View file

@ -0,0 +1,26 @@
{
"pwa": {
"profile": "Profile",
"avatar": "Avatar",
"nickname": "Nickname",
"emailHome": "Personal Email",
"personalInfo": "Personal information",
"name": "Full name",
"bday": "Date of birth",
"nbrHome": "Phone number",
"home": "Personal Address",
"street": "Street",
"locality": "City",
"pcode": "Postal Code",
"ctry": "Country",
"job": "Job",
"orgname": "Company",
"title": "Position",
"role": "Role",
"emailWork": "Professional Email",
"nbrWork": "Phone number",
"work": "Professional address ",
"save": "Save",
"comments": "About / Comments"
}
}

27
src/components/contact/locale/fr.json
View file

@ -0,0 +1,27 @@
{
"pwa": {
"profile": "Profil",
"avatar": "Avatar",
"nickname": "Pseudonyme",
"emailHome": "Email Personnelle",
"personalInfo": "Informations Personnelles",
"name": "Nom complet",
"bday": "Date de naissance",
"nbrHome" : "Numéro de téléphone",
"home": "Adresse Personnelle",
"street": "Rue",
"locality": "Ville",
"pcode": "Code Postal",
"ctry": "Pays",
"job": "Emploi",
"orgname": "Entreprise",
"title": "Poste",
"role": "Rôle",
"emailWork": "Email Professionnel",
"nbrWork": "Numéro de téléphone",
"work": "Adresse Proffessionelle",
"save": "Enregistrer",
"comments": "À propos / Commentaires"
}
}

14
src/components/message/ChatBox.vue
View file

@ -1,11 +1,16 @@
<script setup>
import {useI18n} from 'vue-i18n';
const {t} = useI18n({useScope: 'local'});
</script>
<template>
<form class='chat-box' v-on:submit='onSubmit($event)'>
<input
v-model='text'
placeholder='Écrire un message'
type='text'
/>
<button :disabled='text === ""'>Envoyer</button>
<button :disabled='text === ""'>{{ t('pwa.send') }}</button>
</form>
</template>
@ -41,4 +46,7 @@ input {
button:disabled {
opacity: 0.5;
}
</style>
</style>
<i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>

43
src/components/message/NavMessage.vue Normal file
View file

@ -0,0 +1,43 @@
<script setup>
import {useI18n} from 'vue-i18n';
const {t} = useI18n({useScope: 'local'});
</script>
<template>
<details>
<summary>
<span>👤 {{ t('menu.contact') }}</span>
</summary>
<ul>
<li><router-link to="/profil">📝 {{ t('menu.profile') }}</router-link></li>
<li><router-link to="">🗒️ {{ t('menu.contacts list') }}</router-link></li>
</ul>
</details>
<details>
<summary>
<span>💬 ✉️ {{ t('menu.messages') }}</span>
</summary>
<ul>
<li><router-link to="/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
<li><router-link to="/chat">💬 {{ t('menu.chat') }}</router-link></li>
<li><router-link to="">🎥 {{ t('menu.video conferencing') }}</router-link></li>
</ul>
</details>
</template>
<style scoped>
li {
list-style-type: none;
}
details {
padding-bottom: 5px;
}
</style>
<i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>

17
src/components/message/locale/en.json
View file

@ -0,0 +1,17 @@
{
"menu": {
"contact": "Contact",
"profile": "Profil",
"contacts list": "contacts list",
"messages": "Messages",
"correspondence": "Correspondence",
"chat": "Chat",
"video conferencing": "Video conferencing"
},
"pwa": {
"send": "Send"
}
}

18
src/components/message/locale/fr.json
View file

@ -0,0 +1,18 @@
{
"menu": {
"contact": "Contact",
"profile ": "Profil",
"contacts list": "Liste des contacts",
"messages": "Messages",
"correspondence": "Correspondence",
"chat": "Chat",
"video conferencing": "Visioconférence"
},
"pwa": {
"send": "Envoyer"
}
}

11
src/locale/en.json
View file

@ -20,15 +20,6 @@
"new_content": "New version available!",
"later": "See later",
"reload": "Reload app"
},
"menu": {
"contact": "Contact",
"profile": "Profil",
"contacts list": "contacts list",
"messages": "Messages",
"correspondence": "Correspondence",
"chat": "Chat",
"video conferencing": "Video conferencing"
}
}

12
src/locale/fr.json
View file

@ -20,15 +20,7 @@
"new_content": "Nouvelle version disponible !",
"later": "Plus tard",
"reload": "Recharger"
},
"menu": {
"contact": "Contact",
"profile ": "Profil",
"contacts list": "Liste des contacts",
"messages": "Messages",
"correspondence": "Correspondence",
"chat": "Chat",
"video conferencing": "Visioconférence"
}
}

2
src/nervtn-routes.js
View file

@ -7,7 +7,7 @@ const Apps = () => import('./components/NervTNApps.vue');
const Dashboard = () => import('./components/Dashboard.vue');
const Chat = () => import('./components/message/Message.vue');
const Correspondance = () => import('./components/message/Correspondance.vue');
const Profil = () =>import('./components/contact/Profil.vue');
const Profil = () =>import('./components/contact/Profile.vue');
const routes = [