CCOM4030
/
AnCaJuLu
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

Admin web page changed

Luis Ortiz 2 jaren geleden
bovenliggende
dec40819f4
commit
9dc367d625
24 gewijzigde bestanden met toevoegingen van 656 en 472 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 328
    199
      package-lock.json
  2. 4
    2
      package.json
  3. 1
    16
      public/index.html
  4. BIN
      public/logo192.png
  5. BIN
      public/logo512.png
  6. 0
    3
      public/robots.txt
  7. 0
    64
      src/App.css
  8. 18
    49
      src/App.js
  9. 53
    0
      src/Components/Navbar/NavbarElements.js
  10. 31
    0
      src/Components/Navbar/index.js
  11. 0
    48
      src/Datos.css
  12. 0
    48
      src/Noticias.css
  13. 0
    22
      src/Noticias.js
  14. 48
    0
      src/Pages/Datos.css
  15. 6
    7
      src/Pages/Datos.js
  16. 43
    0
      src/Pages/Login.css
  17. 27
    0
      src/Pages/Login.js
  18. 43
    0
      src/Pages/Noticias.css
  19. 27
    0
      src/Pages/Noticias.js
  20. 4
    0
      src/Pages/index.css
  21. 15
    0
      src/Pages/index.js
  22. 8
    14
      src/index.js
  23. 0
    0
      src/login.css
  24. 0
    0
      src/login.js

+ 328
- 199
package-lock.json
Diff onderdrukt omdat het te groot bestand
Bestand weergeven


+ 4
- 2
package.json Bestand weergeven 

@@ -1,5 +1,5 @@
1 1 
 {
2 
-  "name": "website-example",
2 
+  "name": "admin-web",
3 3 
   "version": "0.1.0",
4 4 
   "private": true,
5 5 
   "dependencies": {
 
@@ -8,8 +8,10 @@
8 8 
     "@testing-library/user-event": "^13.5.0",
9 9 
     "react": "^18.2.0",
10 10 
     "react-dom": "^18.2.0",
11 
-    "react-router-dom": "^6.4.3",
11 
+    "react-icons": "^4.7.1",
12 
+    "react-router-dom": "^6.4.4",
12 13 
     "react-scripts": "5.0.1",
14 
+    "styled-components": "^5.3.6",
13 15 
     "web-vitals": "^2.1.4"
14 16 
   },
15 17 
   "scripts": {

+ 1
- 16
public/index.html Bestand weergeven 

@@ -9,22 +9,7 @@
9 9 
       name="description"
10 10 
       content="Web site created using create-react-app"
11 11 
     />
12 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 
-    <!--
14 
-      manifest.json provides metadata used when your web app is installed on a
15 
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 
-    -->
17 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 
-    <!--
19 
-      Notice the use of %PUBLIC_URL% in the tags above.
20 
-      It will be replaced with the URL of the `public` folder during the build.
21 
-      Only files inside the `public` folder can be referenced from the HTML.
22 
-
23 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 
-      work correctly both with client-side routing and a non-root public URL.
25 
-      Learn how to configure a non-root public URL by running `npm run build`.
26 
-    -->
27 
-    <title>React App</title>
12 
+    <title>AdminWeb App</title>
28 13 
   </head>
29 14 
   <body>
30 15 
     <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/logo192.png Bestand weergeven


BIN
public/logo512.png Bestand weergeven


+ 0
- 3
public/robots.txt Bestand weergeven 

@@ -1,3 +0,0 @@
1 
-# https://www.robotstxt.org/robotstxt.html
2 
-User-agent: *
3 
-Disallow:

+ 0
- 64
src/App.css Bestand weergeven 

@@ -1,65 +1 @@
1 
-.App {
2 
-  text-align: center;
3 
-  background-color: lightcyan;
4 
-  padding: 10%;
5 
-}
6 1
7 
-.App_button1 {
8 
-  width: 10%;
9 
-  border: none;
10 
-  background-color: lightgreen;
11 
-  padding: 14px 28px;
12 
-  font-size: 16px;
13 
-  cursor: pointer;
14 
-  text-align: center;
15 
-  display: inline-block;
16 
-  border-radius: 12px;
17 
-}
18 
-
19 
-.App_button::after {
20 
-  display: table;
21 
-  clear: both;
22 
-}
23 
-
24 
-.App_button {
25 
-  display: flex;
26 
-}
27 
-
28 
-.left {
29 
-  background-color: lightcyan;
30 
-  float: left;
31 
-  width: 50%;
32 
-  flex: 50%;
33 
-  padding: 6%;
34 
-}
35 
-
36 
-.App_button2 {
37 
-  width: 50%;
38 
-  border: none;
39 
-  background-color: lightblue;
40 
-  padding: 14px 28px;
41 
-  font-size: 16px;
42 
-  cursor: pointer;
43 
-  text-align: center;
44 
-  display: inline-block;
45 
-  border-radius: 12px;
46 
-}
47 
-
48 
-.right {
49 
-  background-color: lightcyan;
50 
-  float: left;
51 
-  width: 50%;
52 
-  padding: 6%;
53 
-}
54 
-
55 
-.App_button3 {
56 
-  width: 50%;
57 
-  border: none;
58 
-  background-color: lightcoral;
59 
-  padding: 14px 28px;
60 
-  font-size: 16px;
61 
-  cursor: pointer;
62 
-  text-align: center;
63 
-  display: inline-block;
64 
-  border-radius: 12px;
65 
-}

+ 18
- 49
src/App.js Bestand weergeven 

@@ -1,56 +1,25 @@
1 
+import React from 'react';
1 2 
 import './App.css';
2 
-import {Routes, Route, useNavigate} from 'react-router-dom';
3 
-import Noticias from './Noticias';
4 
-import Datos from './Datos';
3 
+import Navbar from './Components/Navbar';
4 
+import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
5 
+import Home from './Pages';
6 
+import Noticias from './Pages/Noticias';
7 
+import Datos from './Pages/Datos';
8 
+import Login from './Pages/Login';
5 9
6 10 
 function App() {
7 
-  const navigate = useNavigate();
8 
-
9 
-  const navigateToNoticias = () => {
10 
-    // navigate to /Datos.js
11 
-    navigate('./Noticias.js', {replace: true});
12 
-  };
13 
-
14 
-  const navigateToDatos = () => {
15 
-    // navigate to /Datos.js
16 
-    navigate('./Datos.js', {replace: true});
17 
-  };
18 
-
19 11 
   return (
20 
-    <>
21 
-      <div className="App">
22 
-        <button type="button" class="App_button1"> login </button>
23 
-
24 
-        <h1>Bienvenido a la pagina admin</h1>
25 
-
26 
-        <div className="App_button">
27 
-          <div className="left">
28 
-            <h1>Noticias:</h1>
29 
-
30 
-            <h3>Puedes darle add, editar y borrar noticias</h3>
31 
-
32 
-            <button type="button" onClick={navigateToNoticias} class="App_button2"> Click Me </button>
33 
-
34 
-            <Routes>
35 
-              <Route path="/Noticias.js" element={<Noticias />} />
36 
-            </Routes>
37 
-          </div>
38 
-
39 
-          <div className="right">
40 
-            <h1>Datos:</h1>
41 
-
42 
-            <h3>Puedes darle add, editar y borrar datos</h3>
43 
-
44 
-            <button type="button" onClick={navigateToDatos} class="App_button3"> Click Me </button>
45 
-
46 
-            <Routes>
47 
-              <Route path="/Datos.js" element={<Datos />} />
48 
-            </Routes>
49 
-          </div>
50 
-        </div>
51 
-      </div>
52 
-    </>
12 
+    <Router>
13 
+    <Navbar />
14 
+    <Routes>
15 
+        <Route exact path='/' exact element={<Home />} />
16 
+        <Route path='/index' element={<Home />} />
17 
+        <Route path='/Noticias' element={<Noticias/>} />
18 
+        <Route path='/Datos' element={<Datos/>} />
19 
+        <Route path='/Login' element={<Login/>} />
20 
+    </Routes>
21 
+    </Router>
53 22 
   );
54 23 
 }
55 24
56 
-export default App;
25 
+export default App;

+ 53
- 0
src/Components/Navbar/NavbarElements.js Bestand weergeven 

@@ -0,0 +1,53 @@
1 
+import { FaBars } from "react-icons/fa";
2 
+import { NavLink as Link } from "react-router-dom";
3 
+import styled from "styled-components";
4 
+
5 
+export const Nav = styled.nav`
6 
+  background: #add8e6;
7 
+  height: 85px;
8 
+  display: flex;
9 
+  justify-content: space-between;
10 
+  padding: 0.2rem calc((100vw - 1000px) / 2);
11 
+  z-index: 12;
12 
+`;
13 
+
14 
+export const NavLink = styled(Link)`
15 
+  color: #000000;
16 
+  display: flex;
17 
+  align-items: center;
18 
+  text-decoration: none;
19 
+  padding: 0 1rem;
20 
+  height: 100%;
21 
+  cursor: pointer;
22 
+  &.active {
23 
+    color: #4d4dff;
24 
+  }
25 
+`;
26 
+
27 
+export const Bars = styled(FaBars)`
28 
+  display: none;
29 
+  color: #808080;
30 
+  @media screen and (max-width: 768px) {
31 
+    display: block;
32 
+    position: absolute;
33 
+    top: 0;
34 
+    right: 0;
35 
+    transform: translate(-100%, 75%);
36 
+    font-size: 1.8rem;
37 
+    cursor: pointer;
38 
+  }
39 
+`;
40 
+
41 
+export const NavMenu = styled.div`
42 
+  display: flex;
43 
+  align-items: center;
44 
+  margin-right: -24px;
45 
+  /* Second Nav */
46 
+  /* margin-right: 24px; */
47 
+  /* Third Nav */
48 
+  /* width: 100vw;
49 
+white-space: nowrap; */
50 
+  @media screen and (max-width: 768px) {
51 
+    display: none;
52 
+  }
53 
+`;

+ 31
- 0
src/Components/Navbar/index.js Bestand weergeven 

@@ -0,0 +1,31 @@
1 
+import React from "react";
2 
+import { Nav, NavLink, NavMenu }
3 
+    from "./NavbarElements";
4 
+
5 
+const Navbar = () => {
6 
+  return (
7 
+    <>
8 
+      <Nav>
9 
+        <NavMenu>
10 
+          <NavLink to="/index" activeStyle>
11 
+            Home
12 
+          </NavLink>
13 
+          <NavLink to="/Noticias" activeStyle>
14 
+            Noticias
15 
+          </NavLink>
16 
+          <NavLink to="/Datos" activeStyle>
17 
+            Datos
18 
+          </NavLink>
19 
+        </NavMenu>
20 
+
21 
+        <NavMenu>
22 
+          <NavLink to="/Login" activeStyle>
23 
+            Login
24 
+          </NavLink>
25 
+        </NavMenu>
26 
+      </Nav>
27 
+    </>
28 
+  );
29 
+};
30 
+
31 
+export default Navbar;

+ 0
- 48
src/Datos.css Bestand weergeven 

@@ -1,48 +0,0 @@
1 
-.Datos {
2 
-  text-align: center;
3 
-}
4 
-
5 
-.Datos_button::after {
6 
-  display: table;
7 
-  clear: both;
8 
-}
9 
-
10 
-.Datos_button {
11 
-  display: flex;
12 
-}
13 
-
14 
-.Datos_button1 {
15 
-  width: 50%;
16 
-  border: none;
17 
-  background-color: lightcoral;
18 
-  padding: 14px 28px;
19 
-  font-size: 16px;
20 
-  cursor: pointer;
21 
-  text-align: center;
22 
-  display: inline-block;
23 
-  border-radius: 12px;
24 
-}
25 
-
26 
-.Datos_button2 {
27 
-  width: 50%;
28 
-  border: none;
29 
-  background-color: lightcoral;
30 
-  padding: 14px 28px;
31 
-  font-size: 16px;
32 
-  cursor: pointer;
33 
-  text-align: center;
34 
-  display: inline-block;
35 
-  border-radius: 12px;
36 
-}
37 
-
38 
-.Datos_button3 {
39 
-  width: 50%;
40 
-  border: none;
41 
-  background-color: lightcoral;
42 
-  padding: 14px 28px;
43 
-  font-size: 16px;
44 
-  cursor: pointer;
45 
-  text-align: center;
46 
-  display: inline-block;
47 
-  border-radius: 12px;
48 
-}

+ 0
- 48
src/Noticias.css Bestand weergeven 

@@ -1,48 +0,0 @@
1 
-.Noticias {
2 
-    text-align: center;
3 
-}
4 
-
5 
-.Noticias_button::after {
6 
-  display: table;
7 
-  clear: both;
8 
-}
9 
-
10 
-.Noticias_button {
11 
-  display: flex;
12 
-}
13 
-
14 
-.Noticias_button1 {
15 
-  width: 50%;
16 
-  border: none;
17 
-  background-color: lightblue;
18 
-  padding: 14px 28px;
19 
-  font-size: 16px;
20 
-  cursor: pointer;
21 
-  text-align: center;
22 
-  display: inline-block;
23 
-  border-radius: 12px;
24 
-}
25 
-
26 
-.Noticias_button2 {
27 
-  width: 50%;
28 
-  border: none;
29 
-  background-color: lightblue;
30 
-  padding: 14px 28px;
31 
-  font-size: 16px;
32 
-  cursor: pointer;
33 
-  text-align: center;
34 
-  display: inline-block;
35 
-  border-radius: 12px;
36 
-}
37 
-
38 
-.Noticias_button3 {
39 
-  width: 50%;
40 
-  border: none;
41 
-  background-color: lightblue;
42 
-  padding: 14px 28px;
43 
-  font-size: 16px;
44 
-  cursor: pointer;
45 
-  text-align: center;
46 
-  display: inline-block;
47 
-  border-radius: 12px;
48 
-}

+ 0
- 22
src/Noticias.js Bestand weergeven 

@@ -1,22 +0,0 @@
1 
-import './Noticias.css';
2 
-
3 
-function Noticias() {
4 
-  return (
5 
-    <>
6 
-      <div className="Noticias">
7 
-
8 
-        <h1>Noticias</h1>
9 
-
10 
-        <div className="Noticias_button">
11 
-          <button type="button" class="Noticias_button1"> Add </button>
12 
-
13 
-          <button type="button" class="Noticias_button2"> Modifie </button>
14 
-
15 
-          <button type="button" class="Noticias_button3"> Delete </button>
16 
-        </div>
17 
-      </div>
18 
-    </>
19 
-  );
20 
-}
21 
-
22 
-export default Noticias;

+ 48
- 0
src/Pages/Datos.css Bestand weergeven 

@@ -0,0 +1,48 @@
1 
+.Datos {
2 
+    text-align: center;
3 
+  }
4 
+
5 
+  .Datos_button::after {
6 
+    display: table;
7 
+    clear: both;
8 
+  }
9 
+
10 
+  .Datos_button {
11 
+    display: flex;
12 
+  }
13 
+
14 
+  .Datos_button1 {
15 
+    width: 50%;
16 
+    border: none;
17 
+    background-color: lightcoral;
18 
+    padding: 14px 28px;
19 
+    font-size: 16px;
20 
+    cursor: pointer;
21 
+    text-align: center;
22 
+    display: inline-block;
23 
+    border-radius: 12px;
24 
+  }
25 
+
26 
+  .Datos_button2 {
27 
+    width: 50%;
28 
+    border: none;
29 
+    background-color: lightcoral;
30 
+    padding: 14px 28px;
31 
+    font-size: 16px;
32 
+    cursor: pointer;
33 
+    text-align: center;
34 
+    display: inline-block;
35 
+    border-radius: 12px;
36 
+  }
37 
+
38 
+  .Datos_button3 {
39 
+    width: 50%;
40 
+    border: none;
41 
+    background-color: lightcoral;
42 
+    padding: 14px 28px;
43 
+    font-size: 16px;
44 
+    cursor: pointer;
45 
+    text-align: center;
46 
+    display: inline-block;
47 
+    border-radius: 12px;
48 
+  }

src/Datos.js → src/Pages/Datos.js Bestand weergeven 

@@ -1,9 +1,9 @@
1 
+import React from "react";
1 2 
 import './Datos.css';
2 3
3 
-function Datos() {
4 
+const Datos = () => {
4 5 
     return (
5 
-        <>
6 
-          <div className="Datos">
6 
+        <div className="Datos">
7 7
8 8 
             <h1>Datos</h1>
9 9 
     

@@ -14,9 +14,8 @@ function Datos() {
14 14
15 15 
               <button type="button" class="Datos_button3"> Delete </button>
16 16 
             </div>
17 
-          </div>
18 
-        </>
19 
-      );
20 
-}
17 
+        </div>
18 
+    );
19 
+};
21 20
22 21 
 export default Datos;

+ 43
- 0
src/Pages/Login.css Bestand weergeven 

@@ -0,0 +1,43 @@
1 
+.Login {
2 
+    max-width: 420px;
3 
+    margin: 0 auto;
4 
+}
5 
+
6 
+* {
7 
+    box-sizing: border-box;
8 
+}
9 
+
10 
+p {
11 
+     text-align: center;
12 
+     font-weight: 500;
13 
+}
14 
+
15 
+input[type=text], select {
16 
+    width: 100%;
17 
+    padding: 12px;
18 
+    border: 1px solid #ccc;
19 
+    border-radius: 4px;
20 
+    box-sizing: border-box;
21 
+    margin-top: 6px;
22 
+    margin-bottom: 16px;
23 
+    resize: vertical;
24 
+}
25 
+
26 
+input[type=submit] {
27 
+     background-color: #4CAF50;
28 
+     color: white;
29 
+     padding: 12px 20px;
30 
+     border: none;
31 
+     border-radius: 4px;
32 
+     cursor: pointer;
33 
+}
34 
+
35 
+input[type=submit]:hover {
36 
+     background-color: #45a049;
37 
+}
38 
+
39 
+.container {
40 
+     border-radius: 5px;
41 
+     background-color: #f2f2f2;
42 
+     padding: 20px;
43 
+}

+ 27
- 0
src/Pages/Login.js Bestand weergeven 

@@ -0,0 +1,27 @@
1 
+import React from "react";
2 
+import './Login.css';
3 
+
4 
+const Login = () => {
5 
+    return (
6 
+        <div className="Login">
7 
+
8 
+            <h1>Login</h1>
9 
+
10 
+            <form>
11 
+                <label>Username:</label>
12 
+                <input type="text" id="uname" name="Username" placeholder="Your name.." />
13 
+            </form>
14 
+
15 
+            <form>
16 
+                <label>Password:</label>
17 
+                <input type="text" id="password" name="Password" placeholder="Your secret word..." />
18 
+            </form>
19 
+
20 
+            <form>
21 
+                <input type="submit" value="Submit" />
22 
+            </form>
23 
+        </div>
24 
+    );
25 
+};
26 
+
27 
+export default Login;

+ 43
- 0
src/Pages/Noticias.css Bestand weergeven 

@@ -0,0 +1,43 @@
1 
+.Noticias {
2 
+  max-width: 420px;
3 
+  margin: 0 auto;
4 
+}
5 
+
6 
+* {
7 
+  box-sizing: border-box;
8 
+}
9 
+
10 
+p {
11 
+ text-align: center;
12 
+ font-weight: 500;
13 
+}
14 
+
15 
+input[type=text], select, textarea {
16 
+  width: 100%;
17 
+  padding: 12px;
18 
+  border: 1px solid #ccc;
19 
+  border-radius: 4px;
20 
+  box-sizing: border-box;
21 
+  margin-top: 6px;
22 
+  margin-bottom: 16px;
23 
+  resize: vertical;
24 
+}
25 
+
26 
+input[type=submit] {
27 
+ background-color: lightblue;
28 
+ color: white;
29 
+ padding: 12px 20px;
30 
+ border: none;
31 
+ border-radius: 4px;
32 
+ cursor: pointer;
33 
+}
34 
+
35 
+input[type=submit]:hover {
36 
+ background-color: lightblue;
37 
+}
38 
+
39 
+.container {
40 
+ border-radius: 5px;
41 
+ background-color: #f2f2f2;
42 
+ padding: 20px;
43 
+}

+ 27
- 0
src/Pages/Noticias.js Bestand weergeven 

@@ -0,0 +1,27 @@
1 
+import React from "react";
2 
+import './Noticias.css';
3 
+
4 
+const Noticias = () => {
5 
+    return (
6 
+        <div className="Noticias">
7 
+
8 
+            <h1>Noticias</h1>
9 
+
10 
+            <form>
11 
+                <label>Title:</label>
12 
+                <input type="text" id="uname" name="Title" placeholder="Title for the news.." />
13 
+            </form>
14 
+
15 
+            <form>
16 
+                <label>Subject:</label>
17 
+                <textarea id="subject" name="subject" placeholder="Write something.."></textarea>
18 
+            </form>
19 
+
20 
+            <form>
21 
+                <input type="submit" value="Submit" />
22 
+            </form>
23 
+        </div>
24 
+    );
25 
+};
26 
+
27 
+export default Noticias;

+ 4
- 0
src/Pages/index.css Bestand weergeven 

@@ -0,0 +1,4 @@
1 
+.Home {
2 
+    text-align: center;
3 
+    padding: 10%;
4 
+  }

+ 15
- 0
src/Pages/index.js Bestand weergeven 

@@ -0,0 +1,15 @@
1 
+import React from "react";
2 
+import './index.css';
3 
+
4 
+const Home = () => {
5 
+    return (
6 
+        <div className="Home">
7 
+            <h1>Bienvenido a la pagina admin</h1>
8 
+
9 
+            <h3>Tiene dos paginas donde puedes anadir, modificar o borrar informacion</h3>
10 
+            <h4>Antes the hacer cambio por favor hacer login</h4>
11 
+        </div>
12 
+    );
13 
+};
14 
+
15 
+export default Home;

+ 8
- 14
src/index.js Bestand weergeven 

@@ -1,17 +1,11 @@
1 
+
1 2 
 import React from 'react';
2 
-//import ReactDOM from 'react-dom/client';
3 
+import ReactDOM from 'react-dom';
3 4 
 import App from './App';
4 
-import {createRoot} from 'react-dom/client';
5 
-import {BrowserRouter as Router} from 'react-router-dom';
6 
-
7 
-//const root = ReactDOM.createRoot(document.getElementById('root'));
8 
-//root.render(<App />);
9 
-
10 
-const rootElement = document.getElementById('root');
11 
-const root = createRoot(rootElement);
12 
-
13 
-root.render(
14 
-  <Router>
15 
-    <App />
16 
-  </Router>
5 
+
6 
+ReactDOM.render(
7 
+    <React.StrictMode>
8 
+        <App />
9 
+    </React.StrictMode>,
10 
+    document.getElementById('root')
17 11 
 );

+ 0
- 0
src/login.css Bestand weergeven


+ 0
- 0
src/login.js Bestand weergeven