pySatellite · pySatellite · Nov 14, 2023 · Nov 14, 2023 · Nov 14, 2023 · Nov 14, 2023
diff --git a/.env b/.env
@@ -1,4 +1,4 @@
 VITE_JSON_SERVER_URL=https://jsonplaceholder.typicode.com
 VITE_API_FLY=https://fcrud.fly.dev
 VITE_API_LOCAL=http://localhost:8000
-VITE_SLI_VERSION=0.4.0
+VITE_SLI_VERSION=0.5.1
diff --git a/README.md b/README.md
@@ -23,10 +23,5 @@ Build the application in production mode by running:
 ```sh
 npm run build
 ```
-
-## DataProvider
-
-The included data provider use [ra-data-json-server](https://github.com/marmelab/react-admin/tree/master/packages/ra-data-json-server). It fits REST APIs powered by [JSON Server](https://github.com/typicode/json-server), such as [JSONPlaceholder](https://jsonplaceholder.typicode.com/).
-
-You'll find an `.env` file at the project root that includes a `VITE_JSON_SERVER_URL` variable. Set it to the URL of your backend. By default, we set it to targets [JSONPlaceholder](https://jsonplaceholder.typicode.com/).
-
+### Ref
+- https://stackoverflow.com/questions/66863200/changing-the-input-and-output-directory-in-vite
diff --git a/docs/assets/index-caecf4c0.js b/docs/assets/index-caecf4c0.js
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/images/satellite.jpeg b/docs/images/satellite.jpeg
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+        />
+        <meta name="theme-color" content="#000000" />
+        <link rel="manifest" href="./manifest.json" />
+        <link rel="shortcut icon" href="./favicon.ico" />
+        <title>sli</title>
+        <style>
+            body {
+                margin: 0;
+                padding: 0;
+                font-family: sans-serif;
+            }
+
+            .loader-container {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                background-color: #fafafa;
+            }
+
+            /* CSS Spinner from https://projects.lukehaas.me/css-loaders/ */
+
+            .loader,
+            .loader:before,
+            .loader:after {
+                border-radius: 50%;
+            }
+
+            .loader {
+                color: #283593;
+                font-size: 11px;
+                text-indent: -99999em;
+                margin: 55px auto;
+                position: relative;
+                width: 10em;
+                height: 10em;
+                box-shadow: inset 0 0 0 1em;
+                -webkit-transform: translateZ(0);
+                -ms-transform: translateZ(0);
+                transform: translateZ(0);
+            }
+
+            .loader:before,
+            .loader:after {
+                position: absolute;
+                content: '';
+            }
+
+            .loader:before {
+                width: 5.2em;
+                height: 10.2em;
+                background: #fafafa;
+                border-radius: 10.2em 0 0 10.2em;
+                top: -0.1em;
+                left: -0.1em;
+                -webkit-transform-origin: 5.2em 5.1em;
+                transform-origin: 5.2em 5.1em;
+                -webkit-animation: load2 2s infinite ease 1.5s;
+                animation: load2 2s infinite ease 1.5s;
+            }
+
+            .loader:after {
+                width: 5.2em;
+                height: 10.2em;
+                background: #fafafa;
+                border-radius: 0 10.2em 10.2em 0;
+                top: -0.1em;
+                left: 5.1em;
+                -webkit-transform-origin: 0px 5.1em;
+                transform-origin: 0px 5.1em;
+                -webkit-animation: load2 2s infinite ease;
+                animation: load2 2s infinite ease;
+            }
+
+            @-webkit-keyframes load2 {
+                0% {
+                    -webkit-transform: rotate(0deg);
+                    transform: rotate(0deg);
+                }
+                100% {
+                    -webkit-transform: rotate(360deg);
+                    transform: rotate(360deg);
+                }
+            }
+
+            @keyframes load2 {
+                0% {
+                    -webkit-transform: rotate(0deg);
+                    transform: rotate(0deg);
+                }
+                100% {
+                    -webkit-transform: rotate(360deg);
+                    transform: rotate(360deg);
+                }
+            }
+        </style>
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+            rel="stylesheet"
+        />
+      <script type="module" crossorigin src="./assets/index-caecf4c0.js"></script>
+    </head>
+
+    <body>
+        <noscript> You need to enable JavaScript to run this app. </noscript>
+        <div id="root">
+            <div class="loader-container">
+                <div class="loader">Loading...</div>
+            </div>
+        </div>
+    </body>
+
+
+</html>
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -0,0 +1,15 @@
+{
+    "short_name": "sli",
+    "name": "{{name}}",
+    "icons": [
+        {
+            "src": "favicon.ico",
+            "sizes": "64x64 32x32 24x24 16x16",
+            "type": "image/x-icon"
+        }
+    ],
+    "start_url": "./index.html",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+}
diff --git a/firebase.json b/firebase.json
@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "public": "dist",
+    "public": "docs",
     "ignore": [
       "firebase.json",
       "**/.*",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,19 +2,45 @@ import {
   Admin,
   Resource,
   ShowGuesser,
+  EditGuesser
 } from "react-admin";
 import { fcrudDataProvider } from "./fcrudDataProvider";
-import ChecklistIcon from '@mui/icons-material/Checklist';
-import AccountTreeIcon from '@mui/icons-material/AccountTree';
 import { Dashboard } from './Dashboard';
-import { authProvider } from './authProvider';
-import { AlarmList, AlarmEdit, AlarmCreate } from './alarms'
-import { AirflowList, AirflowEdit, AirflowCreate } from "./airflows";
+import { SatelliteList, SatelliteEdit, SatelliteCreate } from './satellites'
+import { RocketList, RocketEdit, RocketCreate } from './rockets'
+import { OwnerList } from './owners'
+
+import SatelliteAltIcon from '@mui/icons-material/SatelliteAlt';
+import RocketIcon from '@mui/icons-material/Rocket';
+import Face5Icon from '@mui/icons-material/Face5';
 
 
 export const App = () => (
-  <Admin dataProvider={fcrudDataProvider} dashboard={Dashboard} authProvider={authProvider} >
-    <Resource name="alarms" icon={ChecklistIcon} list={AlarmList} show={ShowGuesser} edit={AlarmEdit} create={AlarmCreate} />
-    <Resource name="airflows" icon={AccountTreeIcon} list={AirflowList} show={ShowGuesser} edit={AirflowEdit} create={AirflowCreate} recordRepresentation="name" />
+  <Admin dataProvider={fcrudDataProvider} dashboard={Dashboard} >
+    <Resource 
+      name="satellites" 
+      icon={SatelliteAltIcon} 
+      list={SatelliteList} 
+      show={ShowGuesser} 
+      edit={SatelliteEdit}
+      create={SatelliteCreate}
+    />
+    <Resource 
+      name="rockets" 
+      icon={RocketIcon} 
+      list={RocketList}  
+      recordRepresentation="name" 
+      show={ShowGuesser}
+      edit={RocketEdit}
+      create={RocketCreate}
+    />
+    <Resource 
+      name="owners" 
+      icon={Face5Icon} 
+      list={OwnerList} 
+      recordRepresentation="name" 
+      show={ShowGuesser}
+      edit={EditGuesser} 
+    />
   </Admin>
 );
diff --git a/src/airflows.tsx b/src/airflows.tsx
diff --git a/src/alarms.tsx b/src/alarms.tsx
diff --git a/src/fcrudDataProvider.ts b/src/fcrudDataProvider.ts
@@ -1,7 +1,7 @@
 import { DataProvider, fetchUtils } from "react-admin";
 import { stringify } from "query-string";
 
-const apiUrl = import.meta.env.VITE_API_LOCAL;
+const apiUrl = import.meta.env.VITE_API_FLY;
 const httpClient = fetchUtils.fetchJson;
 
 export const fcrudDataProvider: DataProvider = {

diff --git a/src/owners.tsx b/src/owners.tsx
@@ -0,0 +1,31 @@
+import { Datagrid, List, TextField, NumberField, SimpleList} from 'react-admin';
+import { Edit, SimpleForm, TextInput } from 'react-admin';
+import { useMediaQuery, Theme } from "@mui/material";
+
+export const OwnerList = () => {
+    const isSmall = useMediaQuery<Theme>((theme) => theme.breakpoints.down("sm"));
+    return (
+    <List>
+        {isSmall ? (
+                <SimpleList
+                    primaryText={(record) => record.name}
+                />
+        ) : (
+        <Datagrid rowClick="show">
+            <NumberField source="id" />
+            <TextField source="name" />
+        </Datagrid>
+        )}
+    </List>
+    );
+}
+
+
+export const OwnerEdit = () => (
+    <Edit>
+        <SimpleForm>
+            <TextInput source="id" />
+            <TextInput source="name" />
+        </SimpleForm>
+    </Edit>
+);