Add cultivations

fdm-app/.env.example

@@ -0,0 +1,31 @@
+# NodeJS Configuration
+# Sets the environment for the application (development, production).
+# Example: development, production
+NODE_ENV=
+
+# Secret key used to sign session cookies.
+# Must be a strong, randomly generated string.  Do not hardcode or commit this value to version control.  Use a secure secret management system.
+# Rotate this key periodically. Compromising this secret can allow attackers to hijack user sessions.
+FDM_SESSION_SECRET=
+
+# DB configuration
+# The hostname or IP address of the PostgreSQL database server.
+POSTGRES_HOST=
+
+# The port number on which the PostgreSQL database server is listening.  Defaults to 5432 if not specified.
+POSTGRES_PORT=
+
+# The name of the PostgreSQL database to connect to.
+POSTGRES_DB=
+
+# The username used to authenticate with the PostgreSQL database server.
+POSTGRES_USER=
+
+# The password used to authenticate with the PostgreSQL database server.  Ensure this is stored securely and not exposed in version control.
+POSTGRES_PASSWORD=
+
+# Mapbox configuration
+# API token for Mapbox services.  Required to use Mapbox features.
+# Obtain your token from the Mapbox website.  Keep this token secure and do not expose it in version control.
+MAPBOX_TOKEN=
+

fdm-app/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog fdm-app
 
-## v.0.1.0
+## 0.2.0
 
-A first prototype of an application for fdm with minimal functions
+### Minor Changes
+
+- e1aa0ee: Rename an app to `Nutriëntenbalans`
+
+### Patch Changes
+
+- bfa7927: Increase width of sidebar on desktop to `18rem`
+- 35c55e1: Add example configuration file as `.env.example`
+- Updated dependencies [d39b097]
+- Updated dependencies [35c55e1]
+- Updated dependencies [6694029]
+- Updated dependencies [c316d5c]
+- Updated dependencies [b1dea77]
+- Updated dependencies [d39b097]
+- Updated dependencies [49aa60c]
+  - @svenvw/fdm-data@1.0.0
+  - @svenvw/fdm-core@0.6.0
+
+## 0.1.0
+
+A first prototype of an application for fdm with minimal functions

fdm-app/app/components/app-sidebar.tsx

@@ -119,7 +119,7 @@ export function AppSidebar(props: SideBarType) {
                                 <SidebarMenuButton asChild>
                                     <a href="#">
                                         <ArrowRightLeft />
-                                        <span>MINAS2</span>
+                                        <span>Nutriëntenbalans</span>
                                     </a>
                                 </SidebarMenuButton>
                                 <SidebarMenuBadge>

fdm-app/app/components/blocks/cultivation-plan.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import { Form, useLocation, useNavigation } from "@remix-run/react";
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { buttonVariants } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+// import { nl } from "react-day-picker/locale" // Could not be found somehow
+
+interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+    items: {
+        href: string
+        title: string
+    }[]
+}
+
+export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
+    const { pathname } = useLocation();
+
+    return (
+        <nav
+            className={cn(
+                "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1 truncate",
+                className
+            )}
+            {...props}
+        >
+            {items.map((item) => (
+                <a
+                    key={item.href}
+                    href={item.href}
+                    className={cn(
+                        buttonVariants({ variant: "ghost" }),
+                        pathname === item.href
+                            ? "bg-muted hover:bg-muted"
+                            : "hover:bg-transparent hover:underline",
+                        "justify-start"
+                    )}
+                >
+                    {item.title}
+                </a>
+            ))}
+        </nav>
+    )
+}
+
+export default function Cultivation(props: { action: string | undefined; }) {
+    const navigation = useNavigation();
+
+    // Get sowing and harvesting dates
+    const [dateSowing, setDateSowing] = useState<Date | undefined>(new Date('2024-03-01'))
+    const [dateHarvesting, setDateHarvesting] = useState<Date | undefined>(new Date('2024-10-01'))
+
+
+    return (
+        <div className="space-y-6">            
+            <div>
+                <p className="text-sm text-muted-foreground">
+                    Werk de opbrengst, stikstofgehalte en zaai- en oogstdatum bij voor dit gewas.
+                </p>
+            </div>       
+            <Form method="post" action={props.action}>
+                <fieldset
+                    disabled={navigation.state === "submitting"}
+                >
+                </fieldset>
+                <div className="grid w-full items-center gap-4">
+                    <div className="flex flex-col space-y-1.5">
+                        <Label htmlFor="b_name_farm">Opbrengst (ton ds/ ha) <span className="text-red-500">*</span></Label>
+                        <Input id="b_name_farm" type="number" name="b_name_farm" placeholder="37 ton ds / ha" aria-required="true" />
+                    </div>
+                    <div className="flex flex-col space-y-1.5">
+                        <Label htmlFor="b_name_farm">Stikstofgehalte gewas (kg N / ton DS) <span className="text-red-500">*</span></Label>
+                        <Input id="b_name_farm" type="number" name="b_name_farm" placeholder="4 kg N / ton DS" aria-required="true" />
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div className="flex flex-col space-y-1.5">
+                            <Label htmlFor="b_name_farm">Zaaidatum</Label>
+                            <Calendar
+                                // locale={nl} TODO: library has installation issues somehow                                
+                                mode="single"
+                                selected={dateSowing}
+                                onSelect={setDateSowing}
+                                className="rounded-md border"
+                                weekStartsOn={1}
+                                month={dateSowing}
+                            />
+                        </div>
+                        <div className="flex flex-col space-y-1.5">
+                            <Label htmlFor="b_name_farm">Oogstdatum</Label>
+                            <Calendar
+                                // locale={nl} TODO: library has installation issues somehow                                                           
+                                mode="single"
+                                selected={dateHarvesting}
+                                onSelect={setDateHarvesting}
+                                className="rounded-md border"
+                                weekStartsOn={1}
+                                month={dateHarvesting}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Form>
+        </div>
+    )
+}

fdm-app/app/components/blocks/fields-map.tsx

@@ -140,7 +140,7 @@ export function FieldsMap(props: FieldsMapType) {
           latitude: 52,
           zoom: 10,
         }}
-        style={{ height: "calc(100vh - 64px)" }}
+        style={{ height: "calc(100vh - 64px - 123px)" }}
         mapStyle="mapbox://styles/mapbox/satellite-streets-v12"
         mapboxAccessToken={mapboxToken}
         onZoomEnd={async evt => await loadBrpFields(evt)}