Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
361dd01165 | ||
|
|
9ef94762dd | ||
|
|
f759e92698 | ||
|
|
fe0a833de9 | ||
|
|
e4b2cd2291 | ||
|
|
7b7086cc1e | ||
|
|
6d1f34f19f |
@@ -3,11 +3,15 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link href='https://fonts.googleapis.com/css?family=Fira Sans' rel='stylesheet'>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<body style="min-width: 100vw;min-height: 100vh; padding: 0px;margin: 0px; ">
|
||||
<div id="app" style="min-width: 100vw;min-height: 100vh; padding: 0px;margin: 0px;"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
31
front-end/package-lock.json
generated
31
front-end/package-lock.json
generated
@@ -8,7 +8,8 @@
|
||||
"name": "front-end",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"vue": "^3.5.22"
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node22": "^22.0.2",
|
||||
@@ -102,6 +103,7 @@
|
||||
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.28.5",
|
||||
@@ -654,6 +656,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
@@ -697,6 +700,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
@@ -1897,6 +1901,12 @@
|
||||
"@vue/shared": "3.5.22"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.4",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
|
||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vue/devtools-core": {
|
||||
"version": "8.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-8.0.3.tgz",
|
||||
@@ -2204,6 +2214,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.8.19",
|
||||
"caniuse-lite": "^1.0.30001751",
|
||||
@@ -3921,6 +3932,7 @@
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -3990,6 +4002,7 @@
|
||||
"integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.5.0",
|
||||
@@ -4271,6 +4284,7 @@
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
|
||||
"integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.5.22",
|
||||
"@vue/compiler-sfc": "3.5.22",
|
||||
@@ -4294,6 +4308,21 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.6.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz",
|
||||
"integrity": "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.6.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-tsc": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.1.3.tgz",
|
||||
|
||||
@@ -15,7 +15,8 @@
|
||||
"type-check": "vue-tsc --build"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.22"
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node22": "^22.0.2",
|
||||
|
||||
3
front-end/public/add.svg
Normal file
3
front-end/public/add.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z" fill="#2D4570"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 163 B |
3
front-end/public/addUser.svg
Normal file
3
front-end/public/addUser.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 8C16.21 8 18 6.21 18 4C18 1.79 16.21 0 14 0C11.79 0 10 1.79 10 4C10 6.21 11.79 8 14 8ZM5 6V3H3V6H0V8H3V11H5V8H8V6H5ZM14 10C11.33 10 6 11.34 6 14V16H22V14C22 11.34 16.67 10 14 10Z" fill="#2D4570"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 313 B |
3
front-end/public/arrow.svg
Normal file
3
front-end/public/arrow.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0L5 5L10 0H0Z" fill="#2D4570"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 145 B |
3
front-end/public/calandar.svg
Normal file
3
front-end/public/calandar.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 2H15V0H13V2H5V0H3V2H2C0.89 2 0.00999999 2.9 0.00999999 4L0 18C0 19.1 0.89 20 2 20H16C17.1 20 18 19.1 18 18V4C18 2.9 17.1 2 16 2ZM16 18H2V8H16V18ZM6 12H4V10H6V12ZM10 12H8V10H10V12ZM14 12H12V10H14V12ZM6 16H4V14H6V16ZM10 16H8V14H10V16ZM14 16H12V14H14V16Z" fill="#2D4570"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 386 B |
3
front-end/public/client.svg
Normal file
3
front-end/public/client.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z" fill="#2D4570"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 272 B |
3
front-end/public/dashboard.svg
Normal file
3
front-end/public/dashboard.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 10H8V0H0V10ZM0 18H8V12H0V18ZM10 18H18V8H10V18ZM10 0V6H18V0H10Z" fill="#2D4570"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 196 B |
11
front-end/public/inter.svg
Normal file
11
front-end/public/inter.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5_7)">
|
||||
<path d="M18 16H16V15H8V16H6V15H2V20H22V15H18V16Z" fill="#2D4570"/>
|
||||
<path d="M20 8H17V6C17 4.9 16.1 4 15 4H9C7.9 4 7 4.9 7 6V8H4C2.9 8 2 8.9 2 10V14H6V12H8V14H16V12H18V14H22V10C22 8.9 21.1 8 20 8ZM15 8H9V6H15V8Z" fill="#2D4570"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5_7">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 467 B |
3
front-end/public/list.svg
Normal file
3
front-end/public/list.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 6H2V4H0V6ZM0 10H2V8H0V10ZM0 2H2V0H0V2ZM4 6H18V4H4V6ZM4 10H18V8H4V10ZM4 0V2H18V0H4Z" fill="#2D4570"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 216 B |
4
front-end/public/logologoWsl.svg
Normal file
4
front-end/public/logologoWsl.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="121" height="38" viewBox="0 0 121 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.3549 4.88391L43.2753 4.88399C42.1549 9.13938 39.6596 12.0841 37.4326 13.8241L39.7129 14.1325L39.6925 14.0862C41.4173 13.3252 45.0572 10.4271 45.4687 5.01362L45.3549 4.88391ZM47.2069 6.99609C46.4698 10.5692 44.4941 13.0522 42.6803 14.5338L45.7747 14.9523C46.8122 14.483 49.0382 12.7019 49.2842 9.36528L47.2069 6.99609ZM50.9794 11.2987C50.5048 13.0654 49.577 14.403 48.6223 15.3374L55.3142 16.2425L50.9794 11.2987ZM56.6673 14.7521L52.5258 10.0286C53.7981 9.8853 55.267 9.43746 56.6673 8.44231L56.6673 14.7521ZM50.7723 8.0288L48.5609 5.50666C49.7046 5.4968 51.025 5.32551 52.4037 4.88366L56.6673 4.88351L56.6673 5.79172C54.5976 8.01649 52.0613 8.22202 50.7723 8.0288ZM63.4446 4.88327C64.5214 5.22969 65.7177 5.46045 67.0255 5.50932L64.8206 8.03906C61.5001 8.42002 59.3375 6.57651 58.6673 5.63224L58.6673 4.88344L63.4446 4.88327ZM58.6673 8.39128C59.7461 9.17877 61.2308 9.88022 63.0666 10.0516L58.6673 15.0991L58.6673 8.39128ZM60.1755 16.4127L66.934 15.4477C65.6087 14.1845 64.8766 12.7323 64.5106 11.4387L60.1755 16.4127ZM66.993 17.4596L60.7911 18.3451L66.3489 21.7438C66.1882 20.0821 66.506 18.6226 66.993 17.4596ZM55.1722 27.2699L57.475 20.6606L59.7764 27.1113C58.4965 26.8121 56.8929 26.7437 55.1722 27.2699ZM48.215 24.6746C50.8847 25.5501 52.1433 27.5745 52.5433 28.7363L51.7504 31.0122L50.7651 31.0122C49.5646 29.3511 47.749 27.6631 45.1556 26.574L48.215 24.6746ZM44.1252 24.8596L46.8391 23.1746C47.2674 22.1425 47.6664 19.5038 45.8421 16.9796L42.5221 16.5306C44.2443 19.5661 44.4477 22.6094 44.1252 24.8596ZM49.1765 21.7235C49.2695 20.4476 49.0984 18.8971 48.3574 17.3198L54.8541 18.1985L49.1765 21.7235ZM39.3854 27.8024C39.9422 24.6931 39.7412 20.1815 36.9128 15.772L39.8992 16.1759C42.9582 20.2297 42.4102 24.5328 41.6999 26.3654L39.3854 27.8024ZM36.9119 29.3381C37.8824 26.7777 38.5727 20.8669 34.1867 15.4033L31.3458 15.0191C35.2356 20.9335 35.264 27.021 34.3894 30.9042L36.9119 29.3381ZM41.1961 4.88406C39.7562 9.66742 36.373 12.4296 34.3912 13.4127L31.4509 13.0151C33.731 11.4132 36.3956 8.7305 38.1727 4.88417L41.1961 4.88406ZM28.2944 12.5413L28.3164 12.5912L23.3156 11.9148C22.7683 11.841 22.2646 12.2246 22.1906 12.7718C22.1166 13.319 22.5004 13.8226 23.0475 13.8968L28.6158 14.6499C33.4537 20.7983 33.2767 27.3684 32.3054 31.0123L0.367403 31.0124L0.363661 22.0103C0.363661 22.0103 10.8599 21.6809 15.244 14.8544C17.3764 11.5341 18.4753 4.88486 18.4753 4.88486L35.9421 4.88424C33.6983 9.17013 30.2897 11.661 28.2944 12.5413ZM42.9767 27.9268L40.3319 29.5689C41.4227 29.9769 42.4126 30.4664 43.3082 31.0123L48.1676 31.0122C46.9602 29.7527 45.2688 28.5807 42.9767 27.9268ZM38.007 31.0123L38.1027 30.9529C38.175 30.9723 38.2469 30.9921 38.3183 31.0123L38.007 31.0123ZM50.29 23.3863C51.7172 24.1369 52.7414 25.1624 53.4392 26.1652L55.5439 20.1243L50.29 23.3863ZM54.2859 29.8136L53.8683 31.0122L61.1682 31.0122L60.6387 29.5282C59.4965 28.9389 56.9829 28.3102 54.2859 29.8136ZM63.2917 31.0122L62.5972 29.0657L62.6643 29.0933C63.8609 26.1836 66.2273 25.1066 67.5782 24.8399L70.892 26.8663C69.0592 27.5551 66.9499 28.8366 65.2311 31.0122L63.2917 31.0122ZM61.7239 26.6178L59.2788 19.7646L65.3642 23.486C64.1176 24.0661 62.77 25.0498 61.7239 26.6178ZM67.9428 31.0122C69.7696 29.3029 71.8239 28.5318 73.2082 28.2827L75.8077 29.8724C74.9311 30.1344 73.9779 30.5063 73.0013 31.0122L67.9428 31.0122ZM74.3574 26.6412L76.4569 27.925C75.4397 22.786 76.8925 18.5211 78.5601 15.808L75.9024 16.1875C74.5089 17.9994 72.8034 21.8286 74.4269 26.6175L74.3574 26.6412ZM78.9072 29.4235L80.656 30.4929L80.7283 16.1498C78.9443 18.6542 76.9993 23.4695 78.9072 29.4235ZM68.6787 23.1685L71.9924 25.1949C71.3376 21.6518 72.183 18.6496 73.2998 16.5591L69.4386 17.1104C68.6486 18.2731 67.806 20.4616 68.6787 23.1685ZM73.2403 14.5473L69.5975 15.0674L69.6341 15.0072C66.9542 13.3748 66.2569 10.8774 66.2013 9.49891L68.667 6.66979C69.072 9.05059 70.3161 12.1034 73.2403 14.5473ZM78.189 13.8407L76.0598 14.1447L76.074 14.1212C71.5648 11.3747 70.5107 7.10042 70.5053 4.88302L72.3638 4.88296C73.1064 7.74929 74.801 11.1107 78.189 13.8407ZM80.743 13.2311C77.0717 10.8097 75.2505 7.60776 74.4379 4.88288L77.5795 4.88277C78.3384 6.52842 79.3736 8.20779 80.7603 9.80665L80.743 13.2311ZM80.7769 6.52338L80.7851 4.88266L79.8086 4.88269C80.0948 5.429 80.4164 5.97763 80.7769 6.52338Z" fill="#2D4570"/>
|
||||
<path d="M86.7841 31L85.0401 5.4H87.1841L87.7441 15.032L88.4321 29.08H89.1361L89.8081 15.032L90.6721 5.56H94.3361L95.2321 15.032L95.8401 29.08H96.5441L97.2641 15.032L97.8561 5.4H99.9681L98.1921 31H94.3361L93.6161 22.6L92.8961 7.432H92.0961L91.3601 22.6L90.6401 31H86.7841ZM106.52 31.224C105.048 31.224 103.987 30.8987 103.336 30.248C102.696 29.5867 102.344 28.504 102.28 27C102.269 26.3387 102.264 25.736 102.264 25.192C102.264 24.648 102.269 24.104 102.28 23.56C102.291 23.0053 102.307 22.3973 102.328 21.736H104.36C104.317 22.6853 104.296 23.6293 104.296 24.568C104.296 25.5067 104.317 26.424 104.36 27.32C104.392 28.0453 104.573 28.5733 104.904 28.904C105.235 29.2347 105.768 29.4 106.504 29.4C107.208 29.4 107.715 29.2347 108.024 28.904C108.333 28.5733 108.509 28.0453 108.552 27.32C108.584 26.7227 108.605 26.1893 108.616 25.72C108.627 25.24 108.627 24.7547 108.616 24.264C108.605 23.7627 108.584 23.176 108.552 22.504C108.531 21.7147 108.419 21.0533 108.216 20.52C108.024 19.976 107.619 19.624 107 19.464L105.336 19.032C104.515 18.8293 103.885 18.5253 103.448 18.12C103.011 17.704 102.707 17.16 102.536 16.488C102.376 15.816 102.28 14.9893 102.248 14.008C102.237 13.3147 102.232 12.5573 102.232 11.736C102.243 10.9147 102.253 10.12 102.264 9.352C102.296 8.36 102.451 7.56 102.728 6.952C103.005 6.33333 103.448 5.88533 104.056 5.608C104.675 5.32 105.491 5.176 106.504 5.176C107.912 5.176 108.931 5.50133 109.56 6.152C110.189 6.80267 110.531 7.88 110.584 9.384C110.605 9.97067 110.611 10.696 110.6 11.56C110.6 12.4133 110.584 13.32 110.552 14.28H108.504C108.536 13.4053 108.552 12.536 108.552 11.672C108.563 10.7973 108.552 9.928 108.52 9.064C108.499 8.33867 108.323 7.81067 107.992 7.48C107.672 7.14933 107.165 6.984 106.472 6.984C105.747 6.984 105.229 7.14933 104.92 7.48C104.611 7.81067 104.435 8.33867 104.392 9.064C104.349 9.87467 104.328 10.696 104.328 11.528C104.339 12.3493 104.36 13.176 104.392 14.008C104.413 14.9573 104.525 15.672 104.728 16.152C104.931 16.632 105.352 16.9467 105.992 17.096L107.56 17.48C108.403 17.672 109.043 17.9813 109.48 18.408C109.928 18.8347 110.237 19.3893 110.408 20.072C110.579 20.744 110.675 21.5547 110.696 22.504C110.717 23.1653 110.728 23.7253 110.728 24.184C110.728 24.632 110.723 25.0693 110.712 25.496C110.712 25.9227 110.701 26.424 110.68 27C110.627 28.504 110.28 29.5867 109.64 30.248C109 30.8987 107.96 31.224 106.52 31.224ZM115.362 31V7.32H112.098V5.4H120.738V7.32H117.49V31H115.362Z" fill="#2D4570"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
10
front-end/public/ticket.svg
Normal file
10
front-end/public/ticket.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5_15)">
|
||||
<path d="M21.41 11.41L12.58 2.58C12.21 2.21 11.7 2 11.17 2H4C2.9 2 2 2.9 2 4V11.17C2 11.7 2.21 12.21 2.59 12.58L11.42 21.41C12.2 22.19 13.47 22.19 14.25 21.41L21.42 14.24C22.2 13.46 22.2 12.2 21.41 11.41ZM6.5 8C5.67 8 5 7.33 5 6.5C5 5.67 5.67 5 6.5 5C7.33 5 8 5.67 8 6.5C8 7.33 7.33 8 6.5 8Z" fill="#2D4570"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5_15">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 549 B |
@@ -1,11 +1,44 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
|
||||
import NavBar from "./components/NavBar.vue";
|
||||
import Header from "./components/Header.vue"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>You did it!</h1>
|
||||
<p>
|
||||
Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
|
||||
documentation
|
||||
</p>
|
||||
<div class="parent">
|
||||
<nav>
|
||||
<NavBar/>
|
||||
</nav>
|
||||
<header>
|
||||
<Header/>
|
||||
</header>
|
||||
<main>
|
||||
<router-view/>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.parent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
grid-template-rows: repeat(14, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
min-width:100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
nav {grid-area: 1 / 1 / 15 / 2;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #F0CF61;
|
||||
}
|
||||
header { grid-area: 1 / 2 / 2 / 11;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #2D4570;
|
||||
}
|
||||
main { grid-area: 2 / 2 / 15 / 10; }
|
||||
|
||||
</style>
|
||||
|
||||
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 #2D4570;
|
||||
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: #F0CF61;
|
||||
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' + placeholder" id="name" :required="required" />
|
||||
<label :for="'name' + placeholder" 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 #2D4570;
|
||||
outline: 0;
|
||||
font-size: 1.3rem;
|
||||
color: #2D4570;
|
||||
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: #2D4570;
|
||||
}
|
||||
|
||||
.form__field:focus {
|
||||
~ .form__label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
font-size: 1rem;
|
||||
color: #2D4570;
|
||||
font-weight:700;
|
||||
}
|
||||
padding-bottom: 6px;
|
||||
font-weight: 700;
|
||||
border-width: 3px;
|
||||
border-image: linear-gradient(to right, #2D4570,#2D4570);
|
||||
border-image-slice: 1;
|
||||
}
|
||||
/* reset input */
|
||||
.form__field{
|
||||
&:required,&:invalid { box-shadow:none; }
|
||||
}
|
||||
</style>
|
||||
15
front-end/src/components/Header.vue
Normal file
15
front-end/src/components/Header.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="container-header">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container-header{
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
209
front-end/src/components/NavBar.vue
Normal file
209
front-end/src/components/NavBar.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div class="container-nav">
|
||||
<div class="nav-logo">
|
||||
<img src="/logologoWsl.svg" alt="Logo" />
|
||||
</div>
|
||||
|
||||
<ul class="ul-nav">
|
||||
<li>
|
||||
<RouterLink class="li-solo" to="/">
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">space_dashboard</span>
|
||||
<span>DASHBOARD</span>
|
||||
</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="ul-nav">
|
||||
<li class="li-nav-list" @click="toggleCLient">
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">person</span>
|
||||
<span>CLIENT</span>
|
||||
</span>
|
||||
<span class="material-icons">arrow_drop_down</span>
|
||||
</li>
|
||||
<transition name="slide">
|
||||
<ul v-show="showClient" class="ul-nav submenu">
|
||||
<li>
|
||||
<RouterLink class="li-solo" to="/addclient">
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">person_add</span>
|
||||
<span>Nouveau</span>
|
||||
</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">list</span>
|
||||
<span>Liste</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</transition>
|
||||
</ul>
|
||||
|
||||
<ul class="ul-nav">
|
||||
<li class="li-nav-list" @click="toggleTicket">
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">sell</span>
|
||||
<span>TICKET</span>
|
||||
</span>
|
||||
<span class="material-icons">arrow_drop_down</span>
|
||||
</li>
|
||||
<transition name="slide">
|
||||
<ul v-show="showTicket" class="ul-nav submenu">
|
||||
|
||||
<li>
|
||||
<RouterLink class="li-solo" to="/ticket">
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">add</span>
|
||||
<span>Nouveau</span>
|
||||
</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">list</span>
|
||||
<span>Liste</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</transition>
|
||||
</ul>
|
||||
|
||||
<ul class="ul-nav">
|
||||
<li class="li-nav-list" @click="toggleIntervention">
|
||||
<span class="nav-left">
|
||||
<span class="material-icons">work</span>
|
||||
<span>INTERVENTION</span>
|
||||
</span>
|
||||
<span class="material-icons">arrow_drop_down</span>
|
||||
</li>
|
||||
<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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// chaque menu a sa propre variable
|
||||
const showTicket = ref(false)
|
||||
const showIntervention = ref(false)
|
||||
const showClient = ref(false)
|
||||
|
||||
const toggleTicket = () => {
|
||||
showTicket.value = !showTicket.value
|
||||
}
|
||||
|
||||
const toggleIntervention = () => {
|
||||
showIntervention.value = !showIntervention.value
|
||||
}
|
||||
|
||||
const toggleCLient = () => {
|
||||
showClient.value = !showClient.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container-nav {
|
||||
user-select: none;
|
||||
font-family: 'Fira Sans';
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #2D4570;
|
||||
}
|
||||
|
||||
/* Make list items take full width so a border-bottom can span the entire line */
|
||||
.ul-nav {
|
||||
padding-left: 1rem;
|
||||
padding-top: 0.01rem;
|
||||
}
|
||||
.ul-nav > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: 1rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.ul-nav > li > span {
|
||||
padding-right: 1vw;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.li-solo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.li-solo:visited{
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
.li-nav-list {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-logo{
|
||||
margin-left:1vw;
|
||||
margin-top:2vh;
|
||||
}
|
||||
.nav-left > .material-icons{
|
||||
margin-right:0.3vw;
|
||||
}
|
||||
.nav-left{display:inline-flex;align-items:end;position:relative}
|
||||
.nav-left::after{
|
||||
content:'';
|
||||
position:absolute;
|
||||
left:0;right:0;bottom:-4px;
|
||||
height:2px;
|
||||
background:#2D4570;
|
||||
transform-origin:0 50%;
|
||||
transform:scaleX(0);
|
||||
transition:transform .22s ease;
|
||||
}
|
||||
.ul-nav > li:hover .nav-left::after{transform:scaleX(1)}
|
||||
|
||||
.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; }
|
||||
*/
|
||||
|
||||
</style>
|
||||
164
front-end/src/components/Tableau.vue
Normal file
164
front-end/src/components/Tableau.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="data-table">
|
||||
<div class="dt-toolbar">
|
||||
<input v-model="search" placeholder="Rechercher..." class="dt-search" />
|
||||
<div class="dt-controls">
|
||||
<label>Afficher
|
||||
<select v-model.number="perPage">
|
||||
<option v-for="n in [5,10,20,50]" :key="n" :value="n">{{n}}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="dt-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="col in columns" :key="col.key" @click="toggleSort(col.key)" class="dt-th">
|
||||
<span>{{ col.label }}</span>
|
||||
<span class="dt-sort" v-if="sortKey === col.key">{{ sortDir === 'asc' ? '▲' : '▼' }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in pagedData" :key="row.id" class="dt-row">
|
||||
<td v-for="col in columns" :key="col.key">{{ get(row, col.key) }}</td>
|
||||
</tr>
|
||||
<tr v-if="pagedData.length === 0">
|
||||
<td :colspan="columns.length" class="dt-empty">Aucun résultat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="dt-footer">
|
||||
<div class="dt-info">Affichage {{ startItem }} - {{ endItem }} sur {{ filteredData.length }}</div>
|
||||
<div class="dt-pager">
|
||||
<button @click="prevPage" :disabled="page === 1">Préc</button>
|
||||
<button v-for="p in pages" :key="p" @click="page = p" :class="{active: page === p}">{{ p }}</button>
|
||||
<button @click="nextPage" :disabled="page === totalPages">Suiv</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
// Accept columns and rows as props so the table is reusable.
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
const defaultColumns = [
|
||||
{ key: 'id', label: 'ID' },
|
||||
{ key: 'name', label: 'Nom' },
|
||||
{ key: 'email', label: 'Email' },
|
||||
{ key: 'phone', label: 'Téléphone' },
|
||||
{ key: 'role', label: 'Role' },
|
||||
]
|
||||
|
||||
const defaultRows = [
|
||||
{ id: 1, name: 'Alice Dupont', email: 'alice@example.com', phone: '0612345678', role: 'Client' },
|
||||
{ id: 2, name: 'Bob Martin', email: 'bob@example.com', phone: '0623456789', role: 'Support' },
|
||||
{ id: 3, name: 'Claire Durand', email: 'claire@example.com', phone: '0634567890', role: 'Client' },
|
||||
{ id: 4, name: 'David Roche', email: 'david@example.com', phone: '0645678901', role: 'Technicien' },
|
||||
{ id: 5, name: 'Emma Petit', email: 'emma@example.com', phone: '0656789012', role: 'Client' },
|
||||
{ id: 6, name: 'Franck Noel', email: 'franck@example.com', phone: '0667890123', role: 'Support' },
|
||||
{ id: 7, name: 'Gisele Moreau', email: 'gisele@example.com', phone: '0678901234', role: 'Client' },
|
||||
{ id: 8, name: 'Hugo Leroy', email: 'hugo@example.com', phone: '0689012345', role: 'Technicien' },
|
||||
{ id: 9, name: 'Isabelle Faure', email: 'isa@example.com', phone: '0690123456', role: 'Client' },
|
||||
{ id: 10, name: 'Julien Blanc', email: 'julien@example.com', phone: '0701234567', role: 'Support' },
|
||||
]
|
||||
|
||||
// define props without default functions (defineProps is hoisted and must not reference local vars)
|
||||
const props = defineProps<{ columns?: { key: string; label: string }[]; rows?: Record<string, any>[] }>()
|
||||
|
||||
const columns = computed(() => props.columns ?? defaultColumns)
|
||||
const rows = ref(props.rows ?? defaultRows)
|
||||
|
||||
// keep rows reactive to prop changes
|
||||
watch(() => props.rows, (v) => { rows.value = v ?? defaultRows })
|
||||
|
||||
// reactive UI state
|
||||
const search = ref('')
|
||||
const sortKey = ref<string | null>(null)
|
||||
const sortDir = ref<'asc' | 'desc'>('asc')
|
||||
const page = ref(1)
|
||||
const perPage = ref(5)
|
||||
|
||||
// computed filtered rows
|
||||
const filteredData = computed(() => {
|
||||
const q = search.value.trim().toLowerCase()
|
||||
if (!q) return rows.value
|
||||
return rows.value.filter(r =>
|
||||
columns.value.some((c: { key: string; label: string }) => String((r as any)[c.key]).toLowerCase().includes(q))
|
||||
)
|
||||
})
|
||||
|
||||
// sorted
|
||||
const sortedData = computed(() => {
|
||||
if (!sortKey.value) return filteredData.value
|
||||
const key = sortKey.value
|
||||
const dir = sortDir.value === 'asc' ? 1 : -1
|
||||
return [...filteredData.value].sort((a, b) => {
|
||||
const A = (a as any)[key]
|
||||
const B = (b as any)[key]
|
||||
if (A == null) return -1 * dir
|
||||
if (B == null) return 1 * dir
|
||||
if (typeof A === 'number' && typeof B === 'number') return (A - B) * dir
|
||||
return String(A).localeCompare(String(B)) * dir
|
||||
})
|
||||
})
|
||||
|
||||
// pagination
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(sortedData.value.length / perPage.value)))
|
||||
const pages = computed(() => Array.from({ length: totalPages.value }, (_, i) => i + 1))
|
||||
const pagedData = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
return sortedData.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
const startItem = computed(() => (sortedData.value.length === 0 ? 0 : (page.value - 1) * perPage.value + 1))
|
||||
const endItem = computed(() => Math.min(sortedData.value.length, page.value * perPage.value))
|
||||
|
||||
function toggleSort(key: string) {
|
||||
if (sortKey.value === key) {
|
||||
sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
|
||||
} else {
|
||||
sortKey.value = key
|
||||
sortDir.value = 'asc'
|
||||
}
|
||||
}
|
||||
|
||||
function prevPage() {
|
||||
if (page.value > 1) page.value--
|
||||
}
|
||||
function nextPage() {
|
||||
if (page.value < totalPages.value) page.value++
|
||||
}
|
||||
|
||||
// reset page when filters change
|
||||
watch([search, perPage, () => sortedData.value.length], () => {
|
||||
page.value = 1
|
||||
})
|
||||
|
||||
function get(row: any, key: string) {
|
||||
return (row as any)[key]
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.data-table{font-family:Inter, sans-serif;color:#16324F}
|
||||
.dt-toolbar{display:flex;justify-content:space-between;gap:1rem;margin-bottom:0.5rem}
|
||||
.dt-search{padding:6px 8px;border-radius:6px;border:1px solid #cbd5e1}
|
||||
.dt-table{width:100%;border-collapse:collapse;background:#fff}
|
||||
.dt-table th,.dt-table td{padding:10px 12px;border-bottom:1px solid #e6eef6;text-align:left}
|
||||
.dt-table thead th{background:#f3f7fb;cursor:pointer}
|
||||
.dt-row:hover{background:#f9fbfd}
|
||||
.dt-empty{padding:20px;text-align:center;color:#6b7a8a}
|
||||
.dt-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
|
||||
.dt-pager button{margin:0 3px;padding:6px 8px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;cursor:pointer}
|
||||
.dt-pager button.active{background:#2D4570;color:#fff}
|
||||
.dt-info{font-size:13px;color:#556b7a}
|
||||
|
||||
</style>
|
||||
|
||||
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: -7px;
|
||||
left: -7px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #2d447034;
|
||||
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: #2D4570;
|
||||
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: #2D4570;
|
||||
}
|
||||
.checkbox-wrapper-43 input[type="checkbox"]:checked + .check svg {
|
||||
stroke: #2D4570;
|
||||
}
|
||||
.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:#2D4570;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,4 +1,11 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
import {routes} from "./routes.ts"
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
const app = createApp(App)
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
app.use(router)
|
||||
app.mount("#app")
|
||||
|
||||
12
front-end/src/routes.ts
Normal file
12
front-end/src/routes.ts
Normal file
@@ -0,0 +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}
|
||||
]
|
||||
93
front-end/src/vue/AddClient.vue
Normal file
93
front-end/src/vue/AddClient.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<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="sperator-form-add-client">
|
||||
|
||||
</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>
|
||||
.sperator-form-add-client{
|
||||
border-right: 2px solid #2D4570;
|
||||
}
|
||||
.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: #FFFFFF;
|
||||
border: 2px solid #FFFFFF;
|
||||
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/Dashboard.vue
Normal file
13
front-end/src/vue/Dashboard.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="container-ticket">
|
||||
Dashboard
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</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>
|
||||
17
front-end/src/vue/Ticket.vue
Normal file
17
front-end/src/vue/Ticket.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="container-ticket">
|
||||
Ticket
|
||||
<div class="tableau-ticket">
|
||||
<Tableau></Tableau>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Tableau from '@/components/Tableau.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user