dashboard views more sexy

client/src/components/building/customViews/rosenstrasse/ApartmentOne.jsx

@@ -0,0 +1,26 @@
+import { Box } from '@material-ui/core'
+import React from 'react'
+import LockCell from '../../../dashboard/LockCell'
+
+const ApartmentOne = (props) => {
+    /*  */
+    return (
+        <Box bgcolor="red" display="flex" margin={2}>
+            <Box id="links" display="flex" flexDirection="column">
+                <LockCell/>
+                <LockCell/>
+            </Box>
+            <Box id="eingang" bgcolor="blue" padding={2} flexDirection="column">
+                Eingang
+            </Box>
+            <Box id="rechts" display="flex" justifyContent="stretch" flexDirection="column">
+            <LockCell/>
+                <LockCell/>
+                <LockCell/>
+                <LockCell/>
+            </Box>
+        </Box>
+    )
+}
+
+export default ApartmentOne

client/src/components/apartment/customViews/ApartmentThree.jsx → client/src/components/building/customViews/rosenstrasse/ApartmentThree.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-const ApartmentOne = (props) => {
+const ApartmentThree = (props) => {
     return (
         <div>
 
         </div>
     )
 }
 
-export default ApartmentOne
+export default ApartmentThree

client/src/components/building/customViews/rosenstrasse/BuildingRosenstrasse.jsx

@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react'
+import { Box, Typography } from '@material-ui/core'
+import React from 'react'
+import ApartmentOne from './ApartmentOne'
+
+
+
+const BuildingRosenstrasse = (props) => {
+    const [modalOpen, setOpen]=useState(false);
+    const [building, setBuilding]=useState({});
+    /* get data for building rosenstrasse */
+    useEffect(() => {
+        fetch(`https://localhost:5000/api/building/1`)
+            .then(data=>data.json())
+            .then(json=>setBuilding(json))
+            .catch(error=>console.log(error))
+
+    }, [])
+
+    console.log(building)
+    return (
+        <Box display="inline-block">
+            <Typography>
+                Gebäude Rosenstraße
+            </Typography>
+            <Box position="relative" /* bgcolor="blue" */ display="flex" flexDirection="column">
+                <Box paddingY={4} paddingX={2} marginX="auto" marginY={0} bgcolor="red" display="inline-block">
+                    Haupteingang
+                </Box>
+                <Box display="flex" justifyContent="space-between" paddingTop={4} bgcolor="orange"> {/* Apartments */}
+                    <ApartmentOne />
+                    <ApartmentOne />
+                    <ApartmentOne />
+                </Box>
+            </Box>
+        </Box>
+    )
+}
+
+export default BuildingRosenstrasse

client/src/components/dashboard/LockCell.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import Box from '@material-ui/core/Box'
+import { styled } from '@material-ui/core';
+
+const Cell=styled(Box)({
+    transition: "0.2s",
+    cursor: "pointer",
+    '&:hover': {
+        transform: "scale(1.08)"
+    }
+})
+
+const LockCell = ({
+    lock={}, 
+    style={}, 
+    colors={
+        open: "green",
+        closed: "red",
+        taken: "orange",
+        free: "grey"
+    },
+    onClick, 
+    ...props}
+    ) => {
+    const lockNumber=props.lockNumber || 0;
+    return (
+        <Cell 
+            padding={2} 
+            border="1px solid black"
+            bgcolor={lock.open? colors.open : colors.closed} 
+            flex={1}
+            style={style}
+            onClick={onClick}
+        >
+            {lockNumber}
+        </Cell>
+    )
+}
+
+export default LockCell

client/src/components/dashboard/index.js

@@ -1,15 +1,14 @@
 import { Card, CardContent, CardHeader, Typography } from '@material-ui/core'
 import React from 'react'
+import BuildingRosenstrasse from '../building/customViews/rosenstrasse/BuildingRosenstrasse'
 
 const Dashboard = (props) => {
     console.log(props)
     return (
         <Card>
             <CardHeader title="Dashboard"/>
             <CardContent>
-                <Typography>
-
-                </Typography>
+                <BuildingRosenstrasse/>
             </CardContent>
         </Card>
     )

package.json

@@ -5,10 +5,12 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "concurrently \"npm run start\" \"npm run client\"",
+    "dev": "concurrently \"npm run start\" \"npm run client-start\"",
     "start": "tsnd --respawn ./src/app.ts",
-    "client": "npm start --prefix client",
-    "client-build": "npm run build --prefix client"
+    "client-start": "npm start --prefix client",
+    "client-install": "npm install --prefix client",
+    "client-build": "npm run build --prefix client",
+    "build": "npm install && npm run client-install && npm run client-build"
   },
   "author": "",
   "license": "ISC",

src/controllers/buildingController.ts

@@ -22,7 +22,7 @@ export async function getBuildings(req: Request, res: Response) {
 export async function getBuilding(req: Request, res: Response){
     try {
         const {id}=req.params;
-        const result = await getRepository(Building).findOne(id, {relations: ["locks"]})
+        const result = await getRepository(Building).findOne(id, {relations: ["apartments", "apartments.locks"]})
 
         if(!result){
             return res.status(404).send({message: `could not find building with the provided id ${id}`})

src/entity/Apartment.ts

@@ -11,6 +11,8 @@ export class Apartment {
     @Column("varchar", { length: 100, nullable: false, default: "unbekannte Wohnung" })
     name: string;
 
+
+
     @Column("varchar", { nullable: true })
     info: string;
 

src/entity/Building.ts

@@ -1,4 +1,4 @@
-import { Entity, Column, PrimaryGeneratedColumn, OneToMany } from "typeorm";
+import { Entity, Column, PrimaryGeneratedColumn, OneToMany, ManyToOne, JoinColumn } from "typeorm";
 import { Apartment } from "./Apartment";
 import { Lock } from "./Lock";
 
@@ -13,6 +13,13 @@ export class Building {
     @Column("varchar", { unique: true, length: 100, nullable: true })
     thumbnailSrc: string;
 
+    @Column({ type: "int", nullable: true })
+    buildingLockId: number;
+
+    @ManyToOne(()=> Lock)
+    @JoinColumn({name: "buildingLockId"})
+    public buildingLock: Lock;
+
     @OneToMany(()=>Lock, lock=>lock.building, { onDelete: 'CASCADE', onUpdate: 'CASCADE' })
     locks: Lock[];
 

src/entity/Lock.ts

@@ -13,6 +13,9 @@ export class Lock {
     @Column("varchar", { length: 100, nullable: false, default: "unbekanntes Schloss" })
     name: string;
 
+    @Column("int", { nullable: true })
+    number: string;
+
     @Column("varchar", { length: 100, nullable: false, default: "room" })
     type: string;
 

src/util/getList.ts

@@ -1,10 +1,10 @@
 import { Request, Response } from "express"
-import { Repository, FindManyOptions } from "typeorm";
+import { Repository, FindManyOptions, In } from "typeorm";
 
 
 export async function getList<T>(repo: Repository<T>, req: Request, res: Response, extraOptions?: FindManyOptions){
     try {
-        const options:any={}
+        const options:FindManyOptions={}
         if(req.query.sort){
             const [sortField="id", sortDirection="DESC"]=JSON.parse(req.query.sort as string);
             options.order={[sortField]: sortDirection}
@@ -16,8 +16,19 @@ export async function getList<T>(repo: Repository<T>, req: Request, res: Respons
         }
         if(req.query.filter && req.query.filter!=="{}"){
             try {
+                /* TODO: fix this cancer inside Dataprovider */
                 const parsedFilter=JSON.parse(req.query.filter as string);
-                options.where=parsedFilter;
+                if(parsedFilter.id && parsedFilter.id.length){
+                    if(parsedFilter.id.length>1){
+                        options.where={
+                            id: In(parsedFilter.id)
+                        };
+                    }else {
+                        options.where={
+                            id: parsedFilter.id[0]
+                        };
+                    }
+                }
                 //console.log("filter applied to getList");
             } catch (_error) {
                 //console.log(error)
@@ -29,7 +40,7 @@ export async function getList<T>(repo: Repository<T>, req: Request, res: Respons
         const [result, total] = await repo.findAndCount(extraOptions? {...options, ...extraOptions} : options)
 
         const first=options.skip || 0;
-        const last=options.first + options.take;
+        const last=first + options.take;
 
         const resultCount=result.length;
         const realLastIndex = options.take ? Math.min(resultCount - 1 + first, last) : (resultCount - 1);