(Landlord) : finish plan landlord client

Olili2017 · Dec 5, 2019 · 3d64ae7 · 3d64ae7
1 parent 3ef5be5
commit 3d64ae7
Show file tree

Hide file tree

Showing 36 changed files with 15,167 additions and 0 deletions.
diff --git a/client/Dockerfile b/client/Dockerfile
@@ -0,0 +1,5 @@
+FROM node:12
+
+COPY . /usr/src/app
+
+WORKDIR /usr/src/app
diff --git a/client/docker-compose.yml b/client/docker-compose.yml
@@ -0,0 +1,9 @@
+version: '3'
+
+services:
+  olili2017.github.io:
+    build:
+      context: ./usr/src/app
+      dockerfile: ./Dockerfile
+    ports:
+      - 3000:80
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "olili2017.github.io",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-brands-svg-icons": "^5.11.2",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/react-fontawesome": "^0.1.7",
+    "@material-ui/core": "^4.6.1",
+    "bootstrap": "^4.3.1",
+    "react": "^16.12.0",
+    "react-bootstrap": "^1.0.0-beta.15",
+    "react-dom": "^16.12.0",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.2.0",
+    "react-scroll": "^1.7.14",
+    "react-spinners-kit": "^1.9.0",
+    "styled-components": "^4.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/client/public/logo192.png b/client/public/logo192.png
diff --git a/client/public/logo512.png b/client/public/logo512.png
diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/client/public/project-screenshot.png b/client/public/project-screenshot.png
diff --git a/client/public/robots.txt b/client/public/robots.txt
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
diff --git a/client/src/App.css b/client/src/App.css
diff --git a/client/src/App.js b/client/src/App.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
+import Home from './components/Home'
+import LandlordHome from './components/landlord/'
+import LandlordSignin from './components/landlord/signin.js'
+import LandlordRegister from './components/landlord/register.js'
+import TenantHome from './components/tenant/'
+import TenantSignin from './components/tenant/signin.js'
+import TenantRegister from './components/tenant/register'
+import NotFound from './components/NotFound'
+
+function App () {
+
+    return (
+      <Router>
+        <Switch>
+          <Route path="/" exact component={Home} />
+          <Route path="/tenant" exact component={TenantHome} />
+          <Route path="/landlord" exact component={LandlordHome} />
+          <Route path="/landlord/property/:id" exact component={LandlordHome} />
+          <Route path="/login/landlord" exact component={LandlordSignin} />
+          <Route path="/login/tenant" exact component={TenantSignin} />
+          <Route path="/register/landlord" exact component={LandlordRegister} />
+          <Route path="/register/tenant" exact component={TenantRegister} />
+          <Route path="/*" component={NotFound} />
+        </Switch>
+      </Router>
+    );
+}
+export default App;
diff --git a/client/src/components/Home.js b/client/src/components/Home.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { Container } from 'react-bootstrap'
+import Topmenu from './utils/Topmenu.js'
+import './css/home.css'
+
+function Home (props) {
+
+    return (
+      <header className="main-header container-fluid">
+          <Container>
+            <Topmenu />
+            <div>
+              <p>Login as : </p>
+              <ul>
+                <li><Link to="/login/tenant" >Tenant</Link></li>
+                <li><Link to="/login/landlord" >Landlord</Link></li>
+              </ul>
+            </div>
+          </Container>
+        </header>
+    );
+}
+export default Home;
diff --git a/client/src/components/NotFound.js b/client/src/components/NotFound.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+function NotFound () {
+
+    return (
+      <div>
+        not found
+      </div>
+    );
+}
+export default NotFound;
diff --git a/client/src/components/css/home.css b/client/src/components/css/home.css
@@ -0,0 +1,13 @@
+.main-header {
+    background-color: #02203c;
+    color: aliceblue;
+    min-height: 100%;
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: cover;
+    position: relative;
+    margin-bottom: 40px;
+    padding: 3em;
+    background-image: linear-gradient(122deg,rgba(245,33,33,0) 82%,hsla(0,0%,100%,.08) 0),linear-gradient(108deg,rgba(27,0,255,0) 80%,hsla(0,0%,100%,.08) 0),linear-gradient(101deg,rgba(255,33,33,0) 79%,hsla(0,0%,100%,.08) 0),radial-gradient(circle,#02203c 0,#02203c 100%);
+    font-family: 'Roboto Mono',monospace;
+  }
diff --git a/client/src/components/landlord/css/landlord.css b/client/src/components/landlord/css/landlord.css
@@ -0,0 +1,119 @@
+.window-main {
+    height: calc(100% - 50px);
+    max-width: 101%;
+    min-width: 101%;
+    overflow: hidden;
+    margin-top: 0px;
+    /* background-color: yellow; */
+}
+
+.properties-container {
+    border-left: 1px solid #eaeaea;
+    border-right: 1px solid #eaeaea;
+    /* overflow-y: scroll; */
+    /* max-height: calc(70%); */
+    height: 100%;
+}
+
+.properties-container > div {
+    overflow-y: scroll;
+    height: 100%;
+}
+
+.property-container {
+    margin-top: 1em;
+    border: 1px solid #eaeaea;
+    padding: 1em;
+    border-radius: .3em;
+    box-shadow: 0px 0px 1px #919191;
+}
+
+.property-container:hover {
+    cursor: pointer;
+}
+
+.property-image {
+    height: 120px;
+    width: 260px;
+}
+
+.property-details-container {
+    border-left: 1px solid #eeeeee;
+    padding-left: 2em;
+}
+
+.property-details-container div:first-child {
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+.property-details-container div:nth-child(2) {
+    text-transform: capitalize;
+    font-size: small;
+}
+
+.property-details-footer {
+    position: absolute;
+    bottom: 0px;
+    color: grey;
+    border-top: 1px solid #eaeaea;
+    width: 95%;
+    font-size: x-small;
+}
+
+.property-details-header, .property-details-body {
+    color: black;
+}
+
+.menu-col {
+    background-color: rgb(27, 21, 21);
+    width: 60px;
+    /* height: max-content; */
+    transition: cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s;
+    transition-property: width;
+    padding-left: 15px;
+    text-align: justify;
+    border-right: 1px solid #414141;
+    box-shadow: 1px 0px 2px black;
+}
+
+.menu-col > * {
+    width: 100%;
+    border: 0px;
+    height: 40px;
+    background-color: transparent;
+    color: #eaeaea;
+}
+
+.menu-col > button:hover,
+.menu-col > button:after,
+.menu-col > button:active,
+.menu-col > button:focus,
+.menu-col > button:checked,
+.menu-col > button.active {
+    background-image:
+        linear-gradient(-122deg,rgba(245,33,33,0) 82%,hsla(0,0%,100%,.08) 0),
+        linear-gradient(-108deg,rgba(27,0,255,0) 80%,hsla(0,0%,100%,.08) 0),
+        linear-gradient(-101deg,rgba(255,33,33,0) 79%,hsla(0,0%,100%,.08) 0),
+        radial-gradient(circle,rgb(12, 9, 9) 0,rgb(12, 9, 9) 100%);
+    border: 0px;
+}
+
+/**********************************************
+ad space
+*********************************************/
+.ad-space {
+    height: 100%;
+    width: 100%;
+    background-image:
+        radial-gradient(circle, rgba(7, 2, 75, 0.246) 10%, transparent 0),
+        linear-gradient(30deg, rgba(8, 4, 66, 0.13) 40%, rgba(0,0,0,0) 50%),
+        linear-gradient(-30deg, rgba(7, 2, 75, 0.246) 40%, rgba(0,0,0,0) 50%),
+        linear-gradient(30deg, rgba(8, 4, 66, 0.13) 40%, rgba(0,0,0,0) 0%),
+        linear-gradient(-30deg, rgba(8, 4, 66, 0.13) 40%, rgba(0,0,0,0) 0%),
+
+        linear-gradient(30deg, rgba(8, 4, 66, 0) 60%, rgba(8, 4, 66, 0.13) 70%),
+        linear-gradient(-30deg, rgba(7, 2, 75, 0) 60%, rgba(7, 2, 75, 0.246) 70%),
+        linear-gradient(30deg, rgba(8, 4, 66, 0) 60%, rgba(8, 4, 66, 0.13) 0%),
+        linear-gradient(-30deg, rgba(8, 4, 66, 0) 60%, rgba(8, 4, 66, 0.13) 0%);;
+}
diff --git a/client/src/components/landlord/index.js b/client/src/components/landlord/index.js
@@ -0,0 +1,61 @@
+import React, { useRef, useState } from 'react';
+import TopBar from '../utils/TopBar.js'
+
+import './css/landlord.css'
+import { Container, Row, Col, Image, CardGroup } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBars, faUserCog, faHome, faSignOutAlt, faHouseDamage, faWarehouse, faUsers, faPlus } from '@fortawesome/free-solid-svg-icons'
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
+import Properties from './properties.js';
+import Property from './property.js';
+import NotificationPanel from '../utils/NotifictionPanel.js';
+function LandlordHome () {
+
+  let windowHeight = window.innerHeight;
+  const menuLeft = useRef()
+  const [expanded, expand] = useState(false)
+
+  const toggleMenu = () => {
+    expand(!expanded)
+    if (!expanded){
+      menuLeft.current.style.width = '200px'
+    }else {
+      menuLeft.current.style.width = '60px'
+    }
+  }
+
+    return (
+      <div style={{width: '100%', height: windowHeight }}>
+        <TopBar />
+        <Row className="window-main" >
+          <div ref={menuLeft} className="menu-col">
+            <button onClick={toggleMenu}><FontAwesomeIcon icon={faBars} /></button>
+            <button className="active"><FontAwesomeIcon icon={faHome} /></button>
+            <button><FontAwesomeIcon icon={faWarehouse} /></button>
+            <button><FontAwesomeIcon icon={faUsers} /></button>
+            <button><FontAwesomeIcon icon={faPlus} /></button>
+            <button><FontAwesomeIcon icon={faUserCog} /></button>
+            <button><FontAwesomeIcon icon={faSignOutAlt} /></button>
+          </div>
+          <Col lg={8} className="properties-container" >
+
+            <Router>
+              <Switch>
+                <Route path="/landlord" exact component={Properties} />
+                <Route path="/landlord/property/:id" exact component={Property} />
+              </Switch>
+            </Router>
+          </Col>
+          <Col lg={2}>
+            <NotificationPanel />
+          </Col>
+          <Col lg={2} >
+            <div className="ad-space">
+
+            </div>
+          </Col>
+        </Row>
+      </div>
+    );
+}
+export default LandlordHome;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# https://www.robotstxt.org/robotstxt.html
		User-agent: *