WIP frontend

l7ssha · Jul 26, 2023 · 3c6eada · 3c6eada
1 parent bd2a9e1
commit 3c6eada
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 34 deletions.
diff --git a/assets/component/appbar/AppBar.tsx b/assets/component/appbar/AppBar.tsx
@@ -45,26 +45,7 @@ function ResponsiveAppBar() {
                             textDecoration: 'none',
                         }}
                     >
-                        LOGO
-                    </Typography>
-                    <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
-                    <Typography
-                        variant="h5"
-                        noWrap
-                        component="a"
-                        href=""
-                        sx={{
-                            mr: 2,
-                            display: { xs: 'flex', md: 'none' },
-                            flexGrow: 1,
-                            fontFamily: 'monospace',
-                            fontWeight: 700,
-                            letterSpacing: '.3rem',
-                            color: 'inherit',
-                            textDecoration: 'none',
-                        }}
-                    >
-                        LOGO
+                        EMPR
                     </Typography>
                     <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
                         <MenuItem key='development' onClick={() => navigate("/development")}>

diff --git a/assets/page/FilmsPage.tsx b/assets/page/FilmsPage.tsx
@@ -1,7 +1,8 @@
-import {Container} from "@mui/material";
+import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
 import {BasePage} from "./BasePage";
 import apiService, {FilmResponse} from "../services/ApiService";
 import {useEffect, useState} from "react";
+import {mapFilmType} from "../services/ReadableStringMapper";
 
 export const FilmsPage = () => {
     const [films, setFilms] = useState<FilmResponse[]>([]);
@@ -12,11 +13,31 @@ export const FilmsPage = () => {
 
     return (
         <BasePage>
-            <Container>
-                <ol>
-                    {films.map((film) => <li key={film.id}>{film.name}</li>)}
-                </ol>
-            </Container>
+            <Paper elevation={0} variant="outlined" square sx={{marginTop: '10px', padding: '5px'}}>
+                <TableContainer component={Paper}>
+                    <Table sx={{ minWidth: 650 }} aria-label="simple table">
+                        <TableHead>
+                            <TableRow>
+                                <TableCell align="left">Name</TableCell>
+                                <TableCell align="left">Type</TableCell>
+                                <TableCell align="left">Speed (ISO/ASA)</TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {films.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                                >
+                                    <TableCell align="left">{row.name}</TableCell>
+                                    <TableCell align="left">{mapFilmType(row.type)}</TableCell>
+                                    <TableCell align="left">{row.speed}</TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+            </Paper>
         </BasePage>
     );
 }
diff --git a/assets/page/MainPage.tsx b/assets/page/MainPage.tsx
@@ -6,9 +6,7 @@ export const MainPage = () => {
         <BasePage>
             <Container>
                 <Paper elevation={0} variant="outlined" square sx={{marginTop: '10px', padding: '5px'}}>
-                    <Paper elevation={0} variant="outlined" square sx={{marginTop: '10px', padding: '5px'}}>
-                        TEST
-                    </Paper>
+                    TEST
                 </Paper>
             </Container>
         </BasePage>

diff --git a/assets/services/ApiService.ts b/assets/services/ApiService.ts
@@ -1,16 +1,20 @@
 import axios from './axios';
 import {AxiosError, AxiosResponse} from "axios";
-import {Method} from "axios/index";
+import {Method} from "axios";
 import {useUser} from "./auth/useUser";
 
 export interface LoginResponse {
     token: string,
     refreshToken: string,
 }
 
+export type FilmType = 'bw' | 'color_negative' | 'color_positive';
+
 export interface FilmResponse {
     id: string,
     name: string,
+    type: FilmType,
+    speed: number,
 }
 
 export class ApiService {

diff --git a/assets/services/ReadableStringMapper.ts b/assets/services/ReadableStringMapper.ts
@@ -0,0 +1,11 @@
+import {FilmType} from "./ApiService";
+
+export function mapFilmType(type: FilmType): string {
+    switch (type) {
+        case "bw": return 'Black and white';
+        case "color_negative": return 'Color Negative';
+        case "color_positive": return 'Diapositive';
+    }
+
+    throw new Error("Unknown film type");
+}
diff --git a/assets/services/auth/useAuth.ts b/assets/services/auth/useAuth.ts
@@ -9,9 +9,11 @@ export const useAuth = () => {
         setUser({username: username, token: token, refreshToken: refreshToken});
     };
 
-    const refreshToken = async () => {
+    const refreshToken = async (): Promise<string> => {
         const {token, refreshToken} = await api.refreshToken(getUser().refreshToken);
         updateUser({token: token, refreshToken: refreshToken});
+
+        return token;
     }
 
     const logout = async () => {

diff --git a/assets/services/axios.ts b/assets/services/axios.ts
@@ -1,6 +1,5 @@
 import Axios from "axios";
 import { API_SERVER } from "./constants";
-import {useUser} from "./auth/useUser";
 import {useAuth} from "./auth/useAuth";
 
 const axios = Axios.create({
@@ -25,8 +24,9 @@ axios.interceptors.response.use(
 
             try {
                 const {refreshToken} = useAuth();
-                await refreshToken();
+                const newToken = await refreshToken();
 
+                config.headers['Authorization'] = 'Bearer ' + newToken;
                 return axios(config);
             } catch (e) {
                 return Promise.reject(error);

diff --git a/src/Entity/Film/Film.php b/src/Entity/Film/Film.php
@@ -27,7 +27,8 @@
         new GetCollection(provider: FilmCollectionProvider::class),
         new Post(security: "is_granted('ROLE_CREATE_FILMS')", input: FilmCreateDto::class, processor: CreateFilmProcessor::class),
     ],
-    output: FilmOutputDto::class
+    output: FilmOutputDto::class,
+    order: ['name' => 'ASC'],
 )]
 #[UniqueEntity(fields: ['name'])]
 class Film