Photos d'accueil #26 - frontend

benjaminpochat · Sep 15, 2024 · 245e3fb · 245e3fb
1 parent 1f60630
commit 245e3fb
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 7 deletions.
diff --git a/frontend/app/package-lock.json b/frontend/app/package-lock.json
diff --git a/frontend/app/src/api/mock/MockApi.ts b/frontend/app/src/api/mock/MockApi.ts
@@ -36,6 +36,11 @@ export class MockApi {
         return this.mockApiProductions.getProductionProducerPublicData()
     }
 
+    getRandomProducerPublicData(args) {
+        this.log('getRandomProducerPublicData', args)
+        return this.mockApiProducers.getRandomProducerPublicData()
+    }
+
     getBeefProduction(args) {
         this.log('getBeefProduction', args)
         return this.mockApiProductions.getBeefProduction()

diff --git a/frontend/app/src/api/mock/MockApiProducers.ts b/frontend/app/src/api/mock/MockApiProducers.ts
@@ -4,6 +4,14 @@ import {Producer} from "@viandeendirect/api/dist/models/Producer"
 import {Sale} from "@viandeendirect/api/dist/models/Sale"
 
 export class MockApiProducers {
+    getRandomProducerPublicData() {
+        return {
+            id: 1,
+            slideShowUrl: 'https://docs.google.com/presentation/d/1sqDR1v9AZLQYVJo2iT1gAVZ4UX25RamEBXeTmiUWRa4/embed?start=true&loop=true&delayms=3000',
+            websiteUrl: 'https://docs.google.com/presentation/d/1sqDR1v9AZLQYVJo2iT1gAVZ4UX25RamEBXeTmiUWRa4/embed?start=true&loop=true&delayms=3000',
+            farmName: 'La ferme des Marronniers'
+        }
+    }
     getStripeAccount(): StripeAccount {
         return {
             id: 1,

diff --git a/frontend/app/src/api/mock/MockApiProductions.ts b/frontend/app/src/api/mock/MockApiProductions.ts
@@ -108,8 +108,8 @@ export class MockApiProductions {
     getProductionProducerPublicData() {
         return {
             id: 1,
-            slideShowUrl: 'https://docs.google.com/presentation/d/1sqDR1v9AZLQYVJo2iT1gAVZ4UX25RamEBXeTmiUWRa4/edit?usp=sharing',
-            websiteUrl: 'https://www.lemonde.fr',
+            slideShowUrl: 'https://docs.google.com/presentation/d/1sqDR1v9AZLQYVJo2iT1gAVZ4UX25RamEBXeTmiUWRa4/embed?start=true&loop=true&delayms=3000',
+            websiteUrl: 'https://docs.google.com/presentation/d/1sqDR1v9AZLQYVJo2iT1gAVZ4UX25RamEBXeTmiUWRa4/embed?start=true&loop=true&delayms=3000',
             farmName: 'La ferme des Marronniers'
         }
     }

diff --git a/frontend/app/src/domains/welcome/Welcome.tsx b/frontend/app/src/domains/welcome/Welcome.tsx
@@ -8,20 +8,59 @@ import { Sale } from '@viandeendirect/api/dist/models/Sale.js'
 
 import SaleCustomerCard from '../../domains/sale/components/SaleCustomerCard.tsx'
 import { ApiBuilder } from '../../api/ApiBuilder.ts'
+import { Producer } from '@viandeendirect/api/dist/models/Producer';
 
 
 export default function Welcome() {
 
-    const sales: Array<Sale> = useLoaderData()
+    const loadedData = useLoaderData();
+    //const sales: Array<Sale> = loadedData.sales
+    const sales: Array<Sale> = []
+    const randomProducer: Producer = loadedData.randomProducer
 
     return <Box
         component="main"
         sx={{ flexGrow: 1, p: 3 }}>
         <Toolbar />
-        <Typography>Bienvenu dans l'espace client de ViandeEnDirect.eu</Typography>
+        {getWelcomeMessage()}
+        <br/>
         {sales.map(getSaleCard)}
+        {getRandomProducerSlideshow()}
     </Box>
 
+    function getWelcomeMessage() {
+        if (sales.length > 0) {
+            return <Typography>Nos prochaines ventes :</Typography>
+        }
+        return <>
+            <Box sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center'
+            }}>
+                <Typography variant='h5'>Aucune vente n'est planifiée pour l'instant...</Typography>
+                <Typography variant='h6'>Pour patienter, on vous fait visiter la ferme de l'un de nos producteurs partenaires.</Typography>
+            </Box>
+        </>
+    }
+
+    function getRandomProducerSlideshow() {
+        if (sales.length === 0) {
+        return <div style={{width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+                <div style={{width: '-webkit-fill-available', maxWidth: '60rem', aspectRatio: '165/100'}}>
+                    <iframe title="randomProducerSlideshow"
+                        src={randomProducer.slideShowUrl}
+                        allowfullscreen="true"
+                        mozallowfullscreen="true"
+                        webkitallowfullscreen="true"
+                        width="100%"
+                        height="100%" />
+                    </div>
+            </div>
+        }
+        return <></>
+    }
+
     function getSaleCard(sale: Sale) {
         return <SaleCustomerCard key={`sale-card-${sale.id}`} sale={sale}></SaleCustomerCard>
     }
@@ -32,5 +71,6 @@ export async function loadWelcomeData(): Promise<Array<Sale>> {
     const apiBuilder = new ApiBuilder()
     const api = await apiBuilder.getAnonymousApi()
     const sales = await api.getSales()
-    return sales
+    const randomProducer = await api.getRandomProducerPublicData()
+    return {sales: sales, randomProducer: randomProducer}
 }
diff --git a/openapi/openapi.yml b/openapi/openapi.yml
@@ -138,6 +138,20 @@ paths:
       operationId: getProducerPaymentsSummary
       summary: Get the payments summary for a producer
 
+  /producers/random/publicData:
+    get:
+      security:
+        - oAuth2ForViandeEnDirect: [read]
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Producer'
+          description: "public data of the producer"
+      operationId: getRandomProducerPublicData
+      summary: Get the public data for a random producer
+
   /sales:
     summary: Path used to manage the list of all public sales.
     get: