add routes & add user
This commit is contained in:
Antoine BRYJA
55
front-end/src/components/ButtonCustom.vue
Normal file
55
front-end/src/components/ButtonCustom.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="button-container">
|
||||
<button class="button-52" role="button">{{text}}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
text: String,
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.button-52 {
|
||||
user-select: none;
|
||||
font-family: 'Fira Sans';
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #2D4570;
|
||||
letter-spacing: 1px;
|
||||
padding: 13px 20px 13px;
|
||||
outline: 0;
|
||||
border: 1px solid #F1F5F5;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.button-52:after {
|
||||
content: "";
|
||||
background-color: #ffe54c;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.button-52:hover:after {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.button-52 {
|
||||
padding: 13px 50px 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
80
front-end/src/components/Entry.vue
Normal file
80
front-end/src/components/Entry.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="form__group field">
|
||||
<input class="form__field" :type="type" :placeholder="placeholder" :style="{height: height + 'vh', width: width + 'vw'} " name="name" id="name" :required="required" />
|
||||
<label for="name" class="form__label">{{placeholder}}</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
height: Number,
|
||||
width: Number,
|
||||
type: String,
|
||||
placeholder: String,
|
||||
required: Boolean,
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.form__group {
|
||||
position: relative;
|
||||
padding: 15px 0 0;
|
||||
margin-top: 10px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.form__field {
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #F1F5F5;
|
||||
outline: 0;
|
||||
font-size: 1.3rem;
|
||||
color: #F1F5F5;
|
||||
padding: 7px 0;
|
||||
background: transparent;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:placeholder-shown ~ .form__label {
|
||||
font-size: 1.3rem;
|
||||
cursor: text;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.form__label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
font-size: 1rem;
|
||||
color: #F1F5F5;
|
||||
}
|
||||
|
||||
.form__field:focus {
|
||||
~ .form__label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
font-size: 1rem;
|
||||
color: #F1F5F5;
|
||||
font-weight:700;
|
||||
}
|
||||
padding-bottom: 6px;
|
||||
font-weight: 700;
|
||||
border-width: 3px;
|
||||
border-image: linear-gradient(to right, #F1F5F5,#F1F5F5);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
/* reset input */
|
||||
.form__field{
|
||||
&:required,&:invalid { box-shadow:none; }
|
||||
}
|
||||
</style>
|
||||
@@ -23,20 +23,24 @@
|
||||
</span>
|
||||
<span class="material-icons">arrow_drop_down</span>
|
||||
</li>
|
||||
<ul v-show="showClient" class="ul-nav">
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">person_add</span>
|
||||
<span>Nouveau</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">list</span>
|
||||
<span>Liste</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<transition name="slide">
|
||||
<ul v-show="showClient" class="ul-nav submenu">
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<RouterLink class="li-solo" to="/addclient">
|
||||
<span class="material-icons">person_add</span>
|
||||
<span>Nouveau</span>
|
||||
</RouterLink>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">list</span>
|
||||
<span>Liste</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</transition>
|
||||
</ul>
|
||||
|
||||
<ul class="ul-nav">
|
||||
@@ -47,23 +51,25 @@
|
||||
</span>
|
||||
<span class="material-icons">arrow_drop_down</span>
|
||||
</li>
|
||||
<ul v-show="showTicket" class="ul-nav">
|
||||
<transition name="slide">
|
||||
<ul v-show="showTicket" class="ul-nav submenu">
|
||||
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<RouterLink class="li-solo" to="/ticket">
|
||||
<span class="material-icons">add</span>
|
||||
<span>Nouveau</span>
|
||||
</RouterLink>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">list</span>
|
||||
<span>Liste</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<RouterLink class="li-solo" to="/ticket">
|
||||
<span class="material-icons">add</span>
|
||||
<span>Nouveau</span>
|
||||
</RouterLink>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">list</span>
|
||||
<span>Liste</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</transition>
|
||||
</ul>
|
||||
|
||||
<ul class="ul-nav">
|
||||
@@ -74,20 +80,22 @@
|
||||
</span>
|
||||
<span class="material-icons">arrow_drop_down</span>
|
||||
</li>
|
||||
<ul v-show="showIntervention" class="ul-nav ">
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">calendar_month</span>
|
||||
<span>Calendrier</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">list</span>
|
||||
<span>Liste</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<transition name="slide">
|
||||
<ul v-show="showIntervention" class="ul-nav submenu">
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">calendar_month</span>
|
||||
<span>Calendrier</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">list</span>
|
||||
<span>Liste</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</transition>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -166,7 +174,7 @@ const toggleCLient = () => {
|
||||
.nav-left::after{
|
||||
content:'';
|
||||
position:absolute;
|
||||
left:0;right:0;bottom:0;
|
||||
left:0;right:0;bottom:-4px;
|
||||
height:2px;
|
||||
background:#2D4570;
|
||||
transform-origin:0 50%;
|
||||
@@ -177,6 +185,22 @@ const toggleCLient = () => {
|
||||
|
||||
.ul-nav > li:visited { color: inherit }
|
||||
|
||||
/* Submenu slide animation (v-show + <transition name="slide">) */
|
||||
.submenu{
|
||||
overflow: hidden; /* required for max-height animation */
|
||||
}
|
||||
.slide-enter-from, .slide-leave-to {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.slide-enter-to, .slide-leave-from {
|
||||
max-height: 400px; /* enough to contain submenu items */
|
||||
opacity: 1;
|
||||
}
|
||||
.slide-enter-active, .slide-leave-active {
|
||||
transition: max-height .28s ease, opacity .18s ease;
|
||||
}
|
||||
|
||||
/* If you prefer the underline only on the link element (RouterLink),
|
||||
uncomment the following instead and comment the rule above:
|
||||
.li-solo:hover { border-bottom: 2px solid #2D4570; }
|
||||
|
||||
97
front-end/src/components/checkbox.vue
Normal file
97
front-end/src/components/checkbox.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="checkbox-wrapper-43">
|
||||
<input type="checkbox" :id="id">
|
||||
<label :for="id" class="check">
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18">
|
||||
<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
|
||||
<polyline points="1 9 7 14 15 4"></polyline>
|
||||
</svg>
|
||||
|
||||
</label>
|
||||
<label class="checkbox-text">{{text}}</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
text: String,
|
||||
id: String,
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.checkbox-wrapper-43 input[type="checkbox"] {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.checkbox-wrapper-43 label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox-wrapper-43 .check {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.checkbox-wrapper-43 .check:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: rgba(34,50,84,0.03);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.checkbox-wrapper-43 .check svg {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke: #F1F5F5;
|
||||
stroke-width: 1.5;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.checkbox-wrapper-43 .check svg path {
|
||||
stroke-dasharray: 60;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
.checkbox-wrapper-43 .check svg polyline {
|
||||
stroke-dasharray: 22;
|
||||
stroke-dashoffset: 66;
|
||||
}
|
||||
.checkbox-wrapper-43 .check:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.checkbox-wrapper-43 .check:hover svg {
|
||||
stroke: #F0CF61;
|
||||
}
|
||||
.checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg {
|
||||
stroke: #F0CF61;
|
||||
}
|
||||
.checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg path {
|
||||
stroke-dashoffset: 60;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
.checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg polyline {
|
||||
stroke-dashoffset: 42;
|
||||
transition: all 0.2s linear;
|
||||
transition-delay: 0.15s;
|
||||
}
|
||||
.checkbox-text{
|
||||
margin-left:10px;
|
||||
font-size:16px;
|
||||
color:#F1F5F5;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
import AddClient from './vue/AddClient.vue'
|
||||
import Dashboard from './vue/Dashboard.vue'
|
||||
import Ticket from './vue/ticket.vue'
|
||||
import Page404 from './vue/Page404.vue'
|
||||
|
||||
export const routes = [
|
||||
{path: '/', component: Dashboard},
|
||||
{path: '/ticket', component: Ticket},
|
||||
{path: '/ticket/:id', component: Ticket},
|
||||
{path: '/addclient', component: AddClient},
|
||||
{path: '/:pathMatch(.*)*', component: Page404}
|
||||
]
|
||||
87
front-end/src/vue/AddClient.vue
Normal file
87
front-end/src/vue/AddClient.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="container-add-client">
|
||||
<div class="container-form-add-client">
|
||||
<form action="" method="">
|
||||
<div class="container-form-input">
|
||||
<div class="left-form-client">
|
||||
<div class="container-form-add-client-entry">
|
||||
<Entry height="3" width="15" type="text" placeholder="Nom du client" required="true"></Entry>
|
||||
</div>
|
||||
<div class="container-form-add-client-entry">
|
||||
<Entry height="3" width="15" type="email" placeholder="Adresse mail" required="true"></Entry>
|
||||
</div>
|
||||
<div class="container-form-add-client-entry">
|
||||
<Entry height="3" width="15" type="text" placeholder="téléphone" required="true"></Entry>
|
||||
</div>
|
||||
<div class="container-form-add-client-entry">
|
||||
<Checkbox text="Client VIP" id="vip"></Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-form-client">
|
||||
<div class="container-form-add-client-entry">
|
||||
<Entry height="3" width="15" type="text" placeholder="Adresse" required="true"></Entry>
|
||||
</div>
|
||||
<div class="container-form-add-client-entry">
|
||||
<Entry height="3" width="15" type="text" placeholder="Ville" required="true"></Entry>
|
||||
</div>
|
||||
<div class="container-form-add-client-entry">
|
||||
<Entry height="3" width="15" type="text" placeholder="Code postal" required="true"></Entry>
|
||||
</div>
|
||||
<div class="container-form-add-client-entry">
|
||||
<Checkbox text="Prospect" id="prospect"></Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ButtonCustom class="btn" text="AJOUTER"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Entry from '@/components/Entry.vue';
|
||||
import ButtonCustom from '@/components/ButtonCustom.vue';
|
||||
import Checkbox from '@/components/checkbox.vue';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container-add-client {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.container-form-add-client {
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
z-index: 0;
|
||||
background-color: #2D4570;
|
||||
border: 2px solid #2D4570;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: -3px 10px 11px -4px rgba(0,0,0,0.42);
|
||||
box-shadow: -3px 10px 11px -4px rgba(0,0,0,0.42);
|
||||
}
|
||||
.container-form-input {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
.container-form-add-client-entry{
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
form > .btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
</style>
|
||||
13
front-end/src/vue/Page404.vue
Normal file
13
front-end/src/vue/Page404.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="container-404">
|
||||
404 not found
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user