Untitled

avatar
unknown
plain_text
2 years ago
6.8 kB
10
Indexable
// Dashboard.jsx

import React, { useState, useEffect } from 'react';
import { useNavigate,Link } from 'react-router-dom';
import Button from '@mui/material/Button';
import './Dashboard.css';

const api = {
  key: "95d7fb89913501eb128ba6c87da49a8e",
  base: "https://api.openweathermap.org/data/2.5/",
};

const Dashboard = () => {
  const navi = useNavigate();
  const [isHamburgerOpen, setHamburgerOpen] = useState(false);
  const [isLoggedIn,setIsLoggedIn] = useState(sessionStorage.getItem('isLoggedIn'));
  const [search, setSearch] = useState("");
  const [weather, setWeather] = useState({});

  
  const handleLogout = () => {
    navi('/');
    
    sessionStorage.removeItem('isLoggedIn');
    sessionStorage.removeItem('uploadedImages');
    
  };

  const toggleHamburger = () => {
    setHamburgerOpen(!isHamburgerOpen);
  };

  const clearStorage=()=>{
    const confirmdelete=window.confirm("Are you sure to delete?");
    if(confirmdelete)
    {
      sessionStorage.removeItem('uploadedImages');
    }
    
  };


 
  useEffect(() => {
    if (!isLoggedIn) {
      navi('/');
    }
    else{
      navi('/Dashboard');
    }
  }, [isLoggedIn, navi]);

  const searchPressed = () => {
    fetch(`${api.base}weather?q=${search}&units=metric&APPID=${api.key}`)
      .then((res) => res.json())
      .then((result) => {
        setWeather(result);
      });

      
  };

  return (
    <>
      <header className="dashboard-header">
        <div className="dashboard-hamburger" onClick={toggleHamburger}>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <nav className={`dashboard-nav ${isHamburgerOpen ? 'open' : ''}`}>
          <div className="dashboard-nav-left">
            <ul>
              <li>
                <Link to="/Dashboard">Home</Link>
              </li>
              <li>
                <Link to="/ImageUpload">ImageUpload</Link>
              </li>
              <li>
                <Link to="/FetchImage">Images</Link>
              </li>
              <li>
                 {/* <Link to="//clearStorage">Clear Storage</Link> */}
                 <a href="#" onClick={clearStorage}>clear storage</a>
              </li>
              <li>
              <a href="#" onClick={handleLogout}>Logout</a>
              </li>
            </ul>
           
            {/* <br />
            <Button className='bbnow' variant="contained" onClick={() => navi('/ImageUpload')}>
              ImageUpload
            </Button>

            <br />
            <br />
            <Button className='bbnow' variant="contained" onClick={() => navi('/FetchImage')}>
              Images
            </Button>
            <br />
            <br />

            <Button className='bbnow' variant="contained" onClick={clearStorage}>
              Clear Storage
            </Button>
            <br />
            <br />
            <Button className='bbnow'  variant="contained" onClick={handleLogout}>

            
              Logout
            </Button>
            <br />
            <br />
            <br /> */}
          </div>
          <div className="dashboard-nav-right">
            <p className="dashboard-welcome-message">Welcome !!!!! {sessionStorage.getItem('name')}</p>
            <br />
          </div>
        </nav>
      </header>

      <body className="dashbody">
        <img src=""/> 
        <br/>
        <br/>
        {/* Weather Search Box - Input + Button */}
        <div>
        <h1>Weather App</h1>
         <br/>
       
          <input
            type="text"
            placeholder="Enter city/town..."
            onChange={(e) => setSearch(e.target.value)}
          />
          <br />
          <br />
          <button onClick={searchPressed}>Search</button>

          <br/>

          {/* If weather is not undefined display results from API */}
        {typeof weather.main !== "undefined" ? (
          <div >
            {/* Location */}
            <p>{weather.name}</p>

            {/* Temperature Celsius */}
            <p>{weather.main.temp}°C</p>

            {/* Condition (Sunny ) */}
            <p>({weather.weather[0].description})</p>
          </div>
        ) : (
          ""
        )}
        </div>

        
      </body>
    </>
  );
};

export default Dashboard;







.dashboard-header {
  background-color: #2c3e50;
  color: white;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-hamburger {
  cursor: pointer;
  padding: 5px;
  margin-left: 10px;
}

.dashboard-hamburger div {
  width: 30px;
  height: 3px;
  background-color: white;
  margin: 15px 0;
  transition: 0.4s;
}

/* .dashboard-hamburger:hover div:nth-child(1) { */
  /* transform: rotate(-45deg) translate(-5px, 6px); */
/* } */

/* .dashboard-hamburger:hover div:nth-child(2) {
  opacity: 0;
} */

/* .dashboard-hamburger:hover div:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
} */
.dashboard-nav-left {
  display: none;
  flex-direction: column;
  background: rgb(0,0,0);
  background: linear-gradient(50deg, rgba(0,0,0,1) 0%, rgba(0,236,255,0.24693627450980393) 100%);
  background-color:black;
 
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 131px;
  left: 0px;
  z-index: 1;
  gap:13px;
}


.dashboard-nav.open .dashboard-nav-left {
  display: flex;
}

.dashboard-nav-left a {
  color: white;
  padding: 10px;
  text-decoration: none;
  display: block;
  text-align: left;
  width: 150px;
}

.dashboard-nav-left a:hover {
  background-color: #45a049;
}

.dashboard-welcome-message {
  margin-right: 20px;
  color: orange;
}

.dashboard-content {
  padding-top: 80px;
  text-align: center;
}

.app-name {
  color: aliceblue;
  margin-bottom: 20px;
}



.dashbody {
  padding-top: 40px;
  text-align: center;
  color:rgb(233, 229, 236);
  color:black;
  
}

body{
  background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(78,192,165,1) 20%, rgba(128,190,131,1) 43%, rgba(163,189,107,1) 64%, rgba(196,188,84,1) 83%, rgba(253,187,45,1) 100%);
}

div > p:nth-child(1) {
  font-size: 24px;
  font-weight: bold;
  
}

div > p:nth-child(2) {
  font-size: 36px;
  color: rgb(76, 52, 139);
}

div > p:nth-child(3),
div > p:nth-child(4) {
  font-style: italic;
  color:rgb(94, 13, 17);
  font-weight: bold;
} 
button{
  background-color:rgb(139, 73, 73);
}
ul,li{
  list-style-type: none;
}
Editor is loading...
Leave a Comment