MathewFrancis/cezenGIT
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extension points and listing UI done

Browse Source
This commit is contained in:
MathewFrancis 2025-06-06 17:32:51 +05:30
parent 3cd8096aca
commit 31158ce9eb
6 changed files with 242 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
MySQL_conf_pbx/test1/mariadb_data/aria_log.00000001
View File

Binary file not shown.

BIN
MySQL_conf_pbx/test1/mariadb_data/aria_log_control
View File

Binary file not shown.

1
MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/homePage.jsx
View File

@ -12,7 +12,6 @@ export default function LandingPage() {
<article className="landing_screen">
<p>Welcome to the landing page !</p>
</article>
<EndPoints />
</>
);
}

1
MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css
View File

@ -8,6 +8,7 @@
gap: 2rem;
justify-content: space-between;
border-radius: 2rem;
margin-bottom: 5rem;
}
.navigation span {

108
MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx
View File

@ -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 (
<>
<div className="heading">
<h1>End point setup</h1>
</div>
{/* phone container */}
<div className="containment">
<div className="heading">
<section className="setup_edit_toggle">
<button
className={endpointEditStatus ? "orange" : "blue"}
onClick={toggleEndpointOrEditEndpoint}
>
{endpointEditStatus
? "Edit End Point Mode "
: "Set Up Endpoint Mode"}
</button>
{endpointEditStatus && (
<form>
<div className="extension_number_enter">
<label for="ext_num">Extension number</label>
<input type="text" id="ext_num" name="ext_num"></input>
</div>
<button> Search</button>
</form>
)}
{/* <h1 className="endpoint_heading">
End point <span>setup</span>
</h1> */}
</section>
</div>
<form className="phone_container phones_spacing">
<div className="extension_number rowSpacing_1to3 pills">
<label for="extension">Extension Number</label>
@ -128,10 +158,82 @@ export default function EndPoints() {
</p>
</div>
<div className="extension_button">
{endpointEditStatus ? (
<button>Update Extension</button>
) : (
<button>Create Extension</button>
)}
</div>
</form>
</div>
{/* List of all the extensions */}
<div className="extension_table">
<h2>List of All the extensions</h2>
<table>
<tr>
<th>Extension Number</th>
<th>Caller Id</th>
<th>Mail Box</th>
<th>Delete Extension</th>
</tr>
<tr>
<td>1001</td>
<td>Mathew</td>
<td>mat@gmail.com</td>
<td>
<button className="delete_button">Delete</button>
</td>
</tr>
<tr>
<td>1002</td>
<td>Sbin</td>
<td>Mexico@gmail.com</td>
<td>
<button className="delete_button">Delete</button>
</td>
</tr>
<tr>
<td>1003</td>
<td>Sbin</td>
<td>Mexico@gmail.com</td>
<td>
<button className="delete_button">Delete</button>
</td>
</tr>
<tr>
<td>1004</td>
<td>Sbin</td>
<td>Mexico@gmail.com</td>
<td>
<button className="delete_button">Delete</button>
</td>
</tr>
<tr>
<td>1005</td>
<td>Sbin</td>
<td>Mexico@gmail.com</td>
<td>
<button className="delete_button">Delete</button>
</td>
</tr>
<tr>
<td>1006</td>
<td>Sbin</td>
<td>Mexico@gmail.com</td>
<td>
<button className="delete_button">Delete</button>
</td>
</tr>
<tr>
<td>1007</td>
<td>Sbin</td>
<td>Mexico@gmail.com</td>
<td>
<button className="delete_button">Delete</button>
</td>
</tr>
</table>
</div>
</>
);
}

137
MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/end_points.css
View File

@ -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;
}