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

AjoutMenu

Browse source
This commit is contained in:
Pauline MAROT 2021-12-15 14:10:35 +01:00
parent b0c746322f
commit ecf8e5fcf2
Signed by untrusted user: linepau
GPG key ID: 0F0ED996BFD1E3D9
8 changed files with 317 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/NervTN.vue
View file

@ -1,12 +1,18 @@
<script setup>
import ReloadPWA from './components/ReloadPWA.vue';
import {useI18n} from 'vue-i18n';
import NavMessage from './components/message/NavMessage.vue';
const {t} = useI18n({useScope: 'local'});
</script>
<script>
export default{
components: {NavMessage}
}
</script>
<template>
<div id="appflex">
<div id="page">
@ -20,6 +26,11 @@ const {t} = useI18n({useScope: 'local'});
</div>
<div id="sidebar" class="sidebar">
<router-view name="Sidebar"></router-view>
<div id="menu">
<NavMessage/>
<router-view name="navMessage"></router-view>
</div>
</div>
</div>
<header class="navbar">
@ -28,16 +39,18 @@ const {t} = useI18n({useScope: 'local'});
<span id="site-name">{{ t('home.apps') }}</span>
</router-link>
<div class="dropdown">
<button class="dropdown-toggle" v-on:click="isShowDrop = !isShowDrop">
👥 Connexion ▾
</button>
<ul class="dropdown-menu" v-show="isShowDrop">
<li><a href="#">Compte</a></li>
<li><a href="#">Tableau de bord</a></li>
<li><a href="#">Déconnexion</a></li>
</ul>
</div>
<div class="nav-menu">
<details>
<summary>
<span class="connect">👥 Connexion</span>
</summary>
<ul>
<li class="nav-connect"><a href="#">Compte</a></li>
<li class="nav-connect"><a href="#">Tableau de bord</a></li>
<li class="nav-connect"><a href="#">Déconnexion</a></li>
</ul>
</details>
</div>
<div class="links">
<router-view name="Links"></router-view>
@ -47,7 +60,7 @@ const {t} = useI18n({useScope: 'local'});
<option value="fr">Français</option>
<option value="nl">Nederlands</option>
</select>
</div>
</div>
</header>
<footer class="footer">
</footer>

27
src/assets/css/sidebar.less
View file

@ -23,6 +23,33 @@
}
}
#menu {
font-size: 1.1rem;
margin: 0.5rem;
padding: 1rem;
}
.nav-menu{
margin-left: auto;
padding-right: 10px;
cursor: pointer;
}
.connect {
padding: 0.5rem;
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
}
.nav-connect {
list-style: none;
}
.nav-links {
display: inline-block;
a, a:visited {

174
src/components/contact/Contact.vue Normal file
View file

@ -0,0 +1,174 @@
<template>
<div class="vCard">
<vue-tabs>
<v-tab title="👤 Contact">
<h1>👤 Contact</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" required>
</div>
<button @click="persist">Enregistrer</button>
</v-tab>
<br>
<v-tab 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}" 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" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"
v-model="home">
</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>
<button @click="persist">Enregistrer</button>
</div>
</v-tab>
<br>
<v-tab 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" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$"
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>
<div>
<button @click="persist">Enregistrer</button>
</div>
</v-tab>
<br>
<v-tab title="✍🏼 Commentaires">
<h1>✍🏼 Commentaires</h1>
<div>
<label for="comment"></label>
<textarea v-model="home"></textarea>
</div>
<button @click="persist">Enregistrer</button>
</v-tab>
</vue-tabs>
</div>
</template>
<script>
/* export default {
name: 'vCard',
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');
}
}
};
new Vue({
el:"#vCard",
})
*/
</script>
<style scoped>
label{
padding: 5px;
}
input{
padding: 5px;
}
li {
list-style-type: none;
}
textarea {
padding: 20px;
}
button{
margin-top: 20px;
}
</style>

113
src/components/contact/Rooster.vue
View file

@ -1,113 +0,0 @@
<template>
<form id="vCard">
<!-- Informations Personnelles -->
<p>
<label for="avatar">Avatar</label>
<input type="file" />
</p>
<p>
<label for="name">Nom complet</label>
<input type="text" v-model="home" required>
</p>
<p>
<label for="nickname">Pseudonyme</label>
<input type="text" v-model="home">
</p>
<p>
<label for="bday">Date de naissance</label>
<input type="text" v-model="home">
</p>
<p>
<label for="emailHome">Email Perso</label>
<input type="text" v-model="home">
</p>
<p>
<label for="nbrHome">Numéro de téléphone</label>
<input type="text" v-model="home">
</p>
<p class="Home">
<h3>Adresse</h3>
<label for="street">Rue</label>
<input type="text" v-model="home">
<label for="locality">Ville</label>
<input type="text" v-model="home">
<label for="pcode">Code Postal</label>
<input type="text" v-model="home">
<label for="ctry">Pays</label>
<input type="text" v-model="home">
</p>
<!-- Emploi -->
<p>
<label for="orgname">Entreprise</label>
<input type="text" v-model="work">
</p>
<p>
<label for="title">Poste</label>
<input type="text" v-model="work">
</p>
<p>
<label for="role">Rôle</label>
<input type="text" v-model="work">
</p>
<p>
<label for="emailWork">Email Professionnel</label>
<input type="text" v-model="work">
</p>
<p>
<label for="nbrWork">Numéro de téléphone</label>
<input type="text" v-model="work">
</p>
<p class="Work">
<h3>Adresse</h3>
<label for="street">Rue</label>
<input type="text" v-model="work">
<label for="locality">Ville</label>
<input type="text" v-model="work">
<label for="pcode">Code Postal</label>
<input type="number" v-model="work">
<label for="ctry">Pays</label>
<input type="text" v-model="work">
</p>
<p>
<button @click="persist">Enregistrer</button>
</p>
</form>
</template>
<script>
export default {
name: 'vCard',
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>

11
src/components/message/Chat.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<h1>Chat</h1>
</template>
<script>
</script>

12
src/components/message/Correspondance.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<h1>Correspondance</h1>
</template>
<script>
</script>

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

@ -0,0 +1,33 @@
<template>
<details>
<summary>
<span class="onglet">💬 ✉️ Messages</span>
</summary>
<ul>
<li><router-link to="/correspondance">📭 Correspondance</router-link></li>
<li><router-link to="/chat">💬 Chat</router-link></li>
<li><router-link to="">🎥 Visioconférence</router-link></li>
</ul>
</details>
<details>
<summary>
<router-link to="/contact">👤 Contact</router-link>
</summary>
<ul>
<li><router-link to=""></router-link></li>
<li><router-link to=""></router-link></li>
<li><router-link to=""></router-link></li>
</ul>
</details>
</template>
<style scoped>
li {
list-style-type: none;
}
</style>

34
src/nervtn-routes.js
View file

@ -5,6 +5,10 @@ import * as VueRouter from 'vue-router';
const Apps = () => import('./components/NervTNApps.vue');
const Dashboard = () => import('./components/Dashboard.vue');
const Chat = () => import('./components/message/Chat.vue');
const Correspondance = () => import('./components/message/Correspondance.vue');
const Contact = () =>import('./components/contact/Contact.vue');
const routes = [
{
@ -27,6 +31,36 @@ const routes = [
//ActionBar: {}
}
},
{
path: '/chat',
name: "Chat",
components: {
default: Chat,
//Links: {},
//Sidebar: {},
//ActionBar: {}
}
},
{
path: '/correspondance',
name: "Correspondance",
components: {
default: Correspondance,
//Links: {},
//Sidebar: {},
//ActionBar: {}
}
},
{
path: '/contact',
name: "Contact",
components: {
default: Contact,
//Links: {},
//Sidebar: {},
//ActionBar: {}
}
},
{
path: '/:errorPath(.*)*',
name: "NotFound",