Skip to content

Commit

Permalink
fully functional
Browse files Browse the repository at this point in the history
  • Loading branch information
Fraju-pc committed Jul 28, 2023
1 parent 808e08f commit f6ed555
Show file tree
Hide file tree
Showing 23 changed files with 465 additions and 54 deletions.
1 change: 1 addition & 0 deletions Week-16-React_Router_and_React_Bootstrap/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>House Chores App</title>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
<div id="root"></div>
Expand Down
Empty file.
5 changes: 3 additions & 2 deletions Week-16-React_Router_and_React_Bootstrap/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import ChildD from './pages/ChildD/ChildD'
import Users from './pages/Users/Users'
import Footer from "./components/Footer";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import './index.css'


function App() {
//Api URL
Expand All @@ -24,7 +25,7 @@ function App() {
async function getChores() {
const response = await fetch(Chores_Api_URL)
const data = await response.json();
console.log(data);
//console.log(data);
setChores(data)
//console.log(chores);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const AdminNavbar = () => {
navigate('/');
};
return (
<Navbar className="p-3" bg="dark" data-bs-theme="dark" expand="lg">
<Navbar id="nav" className="p-3" data-bs-theme="dark" expand="lg">
<Navbar.Brand>
House Chores
</Navbar.Brand>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Atable({chores,
updatedTask
}) {
return (
<Table striped bordered hover variant="dark">
<Table id="table" striped bordered hover variant="dark">
<thead>
<tr>
<th>Ayla's Tasks</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Btable({chores,
updatedTask
}) {
return (
<Table striped bordered hover variant="dark">
<Table id="table" striped bordered hover variant="dark">
<thead>
<tr>
<th>Braiden's Tasks</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Ctable({chores,
updatedTask
}) {
return (
<Table striped bordered hover variant="dark">
<Table id="table" striped bordered hover variant="dark">
<thead>
<tr>
<th>Callan's Tasks</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function DisplayTableRow({ chore, deleteTask, uuser, utask, udate
<td>{chore.date}</td>
<td>{chore.task}</td>
<td>
<Button variant="warning" onClick={() => setModalShow(true)}>
<Button variant="success" onClick={() => setModalShow(true)}>
Update
</Button>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function Dtable({chores,
updatedTask
}) {
return (
<Table striped bordered hover variant="dark">
<Table id="table" striped bordered hover variant="dark">
<thead>
<tr>
<th>Delaney's Tasks</th>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@

export default function EmailAdmin({chore}){
//portion that sends the email
window.Email.send({
SecureToken : "8ecfb263-ab0a-4888-99c5-c2ab74f26991",
To : 'patrick.f.corcoran@gmail.com',
From : 'thenderman82@gmail.com',
Subject : "Completed Task",
Body : 'Person: ' + chore.name + ' Task: ' + chore.task
}).then(
message => alert(message)
//message => myModal.show((document.getElementById("message").innerHTML = message))
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { Button } from "react-bootstrap";
import { useState } from "react";
import Modal from 'react-bootstrap/Modal';
import Form from "react-bootstrap/Form";


export default function DisplayTableRow({ log, deleteUser, username, password,
setUsername, setPassword, updatedUser}) {


//Modal State
const [show, setShow] = useState(false);

const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (

<tr>
<td>{log.name}</td>
<td>{log.password}</td>

<td>
<Button variant="warning" onClick={handleShow}>
Update
</Button>
<Modal show={show} onHide={handleClose} animation={false}>
<Modal.Header closeButton>
<Modal.Title>Update User</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group className="mb-3" controlId="formBasicText">
<Form.Label>User Name</Form.Label>
<Form.Control
type="text"
placeholder={log.name}
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder={log.password}
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</Form.Group>

</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="warning" onClick={(e) => updatedUser(e, log.id)}>
Save Changes
</Button>
</Modal.Footer>
</Modal>

</td>
<td>
<Button variant="danger" onClick={(e) => deleteUser(e, log.id)}>Delete</Button>
</td>
</tr>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Link } from "react-router-dom";

const NavBar = () => {
return (
<Navbar className="p-3" bg="dark" data-bs-theme="dark" expand="lg">
<Navbar id="nav" className="p-3" data-bs-theme="dark" expand="lg">
<Navbar.Brand>
House Chores
</Navbar.Brand>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { Navbar, Nav } from "react-bootstrap";
import { Link } from "react-router-dom";
//import { Link } from "react-router-dom";
import { useUserContext } from "./UserContext";
import Button from 'react-bootstrap/Button';
import { useNavigate } from 'react-router-dom';
Expand All @@ -16,7 +16,7 @@ const AdminNavbar = () => {
navigate('/');
};
return (
<Navbar className="p-3" bg="dark" data-bs-theme="dark" expand="lg">
<Navbar id="nav" className="p-3" data-bs-theme="dark" expand="lg">
<Navbar.Brand>
House Chores
</Navbar.Brand>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Button } from "react-bootstrap";
import EmailAdmin from "./EmailAdmin";



export default function DisplayTableRow({ chore }) {


//Modal State


return (

<tr>
<td>{chore.name}</td>
<td>{chore.date}</td>
<td>{chore.task}</td>
<td>
<Button variant="warning" onClick={() => EmailAdmin(chore={chore})}>
Done
</Button>

</td>
</tr>
);
}
33 changes: 32 additions & 1 deletion Week-16-React_Router_and_React_Bootstrap/src/index.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
body {
background-color: #4b5b40;
background: radial-gradient(#895d8b, #4e545b);
padding: 0;
}

Expand All @@ -11,4 +11,35 @@ footer {
right: 0;
padding: 8px;
text-align: center;
}

#nav {
background-color: #1b2b1b;
border-radius: 10px;
box-shadow: 10px 5px 5px#4e545b;
}

.round-corners {
overflow: hidden;
margin: auto;
padding: auto;
border-radius: 10px;
box-shadow: 10px 5px 5px#1b2b1b;
}

#form-area {
background-color: #4e545b;
overflow: hidden;
margin: auto;
padding: auto;
border-radius: 10px;
box-shadow: 10px 5px 5px#1b2b1b;
}

#table{
margin-bottom: 0;
}

#text-header {
color: #ff8e51;
}
4 changes: 2 additions & 2 deletions Week-16-React_Router_and_React_Bootstrap/src/main.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

import './index.css'
import { UserProvider } from '../src/components/UserContext.jsx'



ReactDOM.createRoot(document.getElementById('root')).render(

<React.StrictMode>
Expand Down
24 changes: 16 additions & 8 deletions Week-16-React_Router_and_React_Bootstrap/src/pages/Admin/Admin.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,10 +97,10 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
<Container>
<Row className="m-4 p-4">
<Col></Col>
<Col className="border rounded m-4 p-4">
<h1>Add New Task:</h1>
<Col id="form-area" className="m-3 p-3">
<h1 id="text-header">Add New Task:</h1>
<Form>
<Form.Label>User Name:</Form.Label>
<Form.Label id="text-header">User Name:</Form.Label>
<Form.Select
className="mb-3"
aria-label="Select User"
Expand All @@ -114,15 +114,15 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
<option value="Delaney">Delaney</option>
</Form.Select>
<Form.Group className="mb-3" controlId="formBasicText">
<Form.Label>Task:</Form.Label>
<Form.Label id="text-header">Task:</Form.Label>
<Form.Control
type="text"
placeholder="Task"
value={task}
onChange={(e) => setTask(e.target.value)}
/>
</Form.Group>
<Form.Label>Date Assigned:</Form.Label>
<Form.Label id="text-header">Date Assigned:</Form.Label>
<Form.Group className="mb-3" controlId="formBasicText">
<Form.Control
type="date"
Expand All @@ -138,8 +138,9 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
</Col>
<Col></Col>
</Row>
<Row className="mt-4 p-2">
<Row className="m-4 p-3">
<Col>
<div className="round-corners">
<Atable
chores={chores}
deleteTask={deleteTask}
Expand All @@ -151,8 +152,10 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
setUdate={setUdate}
updatedTask={updatedTask}
/>
</div>
</Col>
<Col>
<Col >
<div className="round-corners">
<Btable
chores={chores}
deleteTask={deleteTask}
Expand All @@ -164,10 +167,12 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
setUdate={setUdate}
updatedTask={updatedTask}
/>
</div>
</Col>
</Row>
<Row className="mt-4 p-2">
<Row className="m-4 p-3">
<Col>
<div className="round-corners">
<Ctable
chores={chores}
deleteTask={deleteTask}
Expand All @@ -179,8 +184,10 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
setUdate={setUdate}
updatedTask={updatedTask}
/>
</div>
</Col>
<Col>
<div className="round-corners">
<Dtable
chores={chores}
deleteTask={deleteTask}
Expand All @@ -192,6 +199,7 @@ export default function Admin({ chores, getChores, Chores_Api_URL }) {
setUdate={setUdate}
updatedTask={updatedTask}
/>
</div>
</Col>
</Row>

Expand Down

0 comments on commit f6ed555

Please sign in to comment.