From 31158ce9eb95366181c81bccba4a1531c971715a Mon Sep 17 00:00:00 2001 From: MathewFrancis Date: Fri, 6 Jun 2025 17:32:51 +0530 Subject: [PATCH] Extension points and listing UI done --- .../test1/mariadb_data/aria_log.00000001 | Bin 4898816 -> 4898816 bytes .../test1/mariadb_data/aria_log_control | Bin 52 -> 52 bytes .../src/components/landing-page/homePage.jsx | 1 - .../components/landing-page/navStyleImpl.css | 1 + .../src/components/operations/endPoint.jsx | 110 +++++++++++++- .../src/components/operations/end_points.css | 137 +++++++++++++++++- 6 files changed, 242 insertions(+), 7 deletions(-) diff --git a/MySQL_conf_pbx/test1/mariadb_data/aria_log.00000001 b/MySQL_conf_pbx/test1/mariadb_data/aria_log.00000001 index 6ab4a0c71ab6b5b0d58cd11aa2c94d2f4fe06c7d..4e14826be4bed0ca81534830859760164a3eba00 100644 GIT binary patch delta 221 zcmYkxH&Oxt06@_d1A?%oRm@<{IV&n=-J@7}ge~3;C@8^-!pa$IJ%HD-*HIh)%&%UO zJg1VMwMc2zrd@}$P8nHUa`Hmmdi3hkFEU_I!H{7iMvWOap{QiilxZ_&&6&4g(UN5= zR;^jLVbhjvJ9h2aci_;GV`V2!ovAo?;nJ0BH*Vdze~s(S+Iu6;g!N_|1i{x|x!Ti1 bI;y=j;%xZwAEIBVK9(}oY&ri@`7C?``6^T7 delta 168 zcmWl|%ThrB007WQqLR>q+fyh+(L0rNd!k)`bQk9zEG;csnekyhq3O(=DEf^>|1F4F z6t^THY1xWZDQnW!Wn|@S*tBI^UO`~Tu08t>94b0eQdV*7L{&}QsfMOA=UUn>T)J}Y n#;rT|IvzZF()Fz8Md;O=cOO1|=^Gf%zQ>c%e4Nit!=K;}18q6> diff --git a/MySQL_conf_pbx/test1/mariadb_data/aria_log_control b/MySQL_conf_pbx/test1/mariadb_data/aria_log_control index c2cfc5591726949316b71d66b5642e6c18d0f743..32990a0eab14af4a7fe571fc2bbc8637de342a4a 100644 GIT binary patch delta 27 gcmXppnII?jSgQXQBLl2K>Ei8Mh1rB

Welcome to the landing page !

- ); } diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css index 1103ca6..6e9de08 100755 --- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css +++ b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css @@ -8,6 +8,7 @@ gap: 2rem; justify-content: space-between; border-radius: 2rem; + margin-bottom: 5rem; } .navigation span { diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx index 1f732bb..b6fc37d 100644 --- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx +++ b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx @@ -1,14 +1,44 @@ import "./end_points.css"; import phoneSvgLogo from "../../assets/phone.svg"; +import { useState } from "react"; export default function EndPoints() { + const [endpointEditStatus, endpointEditFunction] = useState(false); + + function toggleEndpointOrEditEndpoint() { + endpointEditFunction((prev) => { + return (prev = !prev); + }); + } + return ( <> -
-

End point setup

-
{/* phone container */}
+
+
+ + {endpointEditStatus && ( +
+
+ + +
+ +
+ )} + {/*

+ End point setup +

*/} +
+
@@ -128,10 +158,82 @@ export default function EndPoints() {

- + {endpointEditStatus ? ( + + ) : ( + + )}
+ {/* List of all the extensions */} +
+

List of All the extensions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Extension NumberCaller IdMail BoxDelete Extension
1001Mathewmat@gmail.com + +
1002SbinMexico@gmail.com + +
1003SbinMexico@gmail.com + +
1004SbinMexico@gmail.com + +
1005SbinMexico@gmail.com + +
1006SbinMexico@gmail.com + +
1007SbinMexico@gmail.com + +
+
); } diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/end_points.css b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/end_points.css index 0d19a4c..b2cf528 100644 --- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/end_points.css +++ b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/end_points.css @@ -12,7 +12,6 @@ .phones_spacing { grid-template-columns: repeat(4, 1fr); - margin-top: 4rem; } .phones_spacing > div { @@ -39,7 +38,7 @@ .pills p { color: #00898488; - transition: all 1s; + transition: all 0.33s; } .pills:hover p { @@ -125,3 +124,137 @@ font-size: 1.6rem; max-width: 14rem; } + +.setup_edit_toggle { + display: flex; + flex-direction: row; + border-radius: 1rem; + margin-top: 2rem; + margin-bottom: 0rem; +} + +.setup_edit_toggle > button { + border-radius: 5px; + padding: 1rem; + max-height: 5rem; + font-size: 2rem; + font-weight: 900; + transition: all 0.33s; + margin-bottom: 2.69rem; +} + +.orange { + border: solid #ff7b00 1px; + background-color: #ff7b0017; + color: #ff7b00; +} + +.blue { + border: solid #008984 1px; + background-color: #00898415; + color: #008984; +} + +.setup_edit_toggle > button:hover { + cursor: pointer; +} + +.setup_edit_toggle form { + display: flex; + margin: 1rem; + margin-left: 2rem; +} + +.setup_edit_toggle form div label { + font-size: 1.6rem; + margin-bottom: 0.5rem; +} +.setup_edit_toggle form div input { + padding: 0.5rem; + font-size: 1.8rem; + background-color: #0089843b; + border: none; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.setup_edit_toggle form button { + all: revert; + align-self: flex-end; + padding: 0.8rem 1rem; + border: none; + background-color: #008984; + color: #ffffff; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +.setup_edit_toggle form button:hover { + cursor: pointer; +} + +.extension_number_enter { + display: flex; + flex-direction: column; + margin-left: 2rem; +} + +.endpoint_heading { + font-size: 2rem; +} + +.extension_table { + margin-top: 5rem; + text-transform: capitalize; + display: flex; + flex-direction: column; +} + +.extension_table table { + margin-bottom: 2rem; + border-spacing: 0px; +} + +.extension_table h2 { + text-align: center; + font-size: 3rem; + margin-bottom: 2rem; + color: #193d54; +} + +.extension_table tr th { + background-color: #03045e; + color: #caf0f8; + text-align: center; + font-size: 1.6rem; + padding: 2rem; +} + +th:first-child { + border-top-left-radius: 10px; +} +th:last-child { + border-top-right-radius: 10px; +} + +.extension_table tr:nth-child(odd) { + background-color: #caf0f8; +} + +.extension_table tr td { + padding: 1.4rem; + font-size: 1.4rem; + text-align: center; +} + +.delete_button { + padding: 0.6rem; + background-color: red; + color: rgb(255, 228, 228); + border: none; +} + +.delete_button:hover { + background-color: rgb(255, 49, 49); + cursor: pointer; +}