diff --git a/app/components/campaigns/area/map.tsx b/app/components/campaigns/area/map.tsx
new file mode 100644
index 00000000..f17debe7
--- /dev/null
+++ b/app/components/campaigns/area/map.tsx
@@ -0,0 +1,215 @@
+import { TrashIcon } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { MapLayerMouseEvent, PopupProps } from "react-map-gl";
+import { MapProvider, Source, Layer, Popup } from "react-map-gl";
+import { Map } from "~/components/map";
+import DrawControl from "~/components/Map/draw-control";
+import GeocoderControl from "~/components/Map/geocoder-control";
+import { Button } from "~/components/ui/button";
+import {
+ Popover,
+ PopoverAnchor,
+ PopoverArrow,
+ PopoverContent,
+} from "~/components/ui/popover";
+import normalize from "@mapbox/geojson-normalize";
+import flatten from "geojson-flatten";
+import type { FeatureCollection, GeoJsonProperties, Geometry } from "geojson";
+
+type MapProps = {
+ mapRef: any;
+ // handleMapClick: (e: MapLayerMouseEvent) => void
+ drawPopoverOpen: boolean;
+ setDrawPopoverOpen: Dispatch
>;
+ // onUpdate: (e: any) => void
+ // onDelete: (e: any) => void
+ geojsonUploadData: FeatureCollection | null;
+ setGeojsonUploadData: Dispatch<
+ SetStateAction | null>
+ >;
+ // popup: PopupProps | false
+ // setPopup: Dispatch>
+ setFeatures: (features: any) => void;
+};
+
+export default function DefineAreaMap({
+ setFeatures,
+ drawPopoverOpen,
+ setDrawPopoverOpen,
+ mapRef,
+ geojsonUploadData,
+ setGeojsonUploadData,
+}: MapProps) {
+ const { t } = useTranslation("campaign-area");
+ const [popup, setPopup] = useState();
+
+ const onUpdate = useCallback(
+ (e: any) => {
+ setGeojsonUploadData(null);
+ // if (e.features[0].properties.radius) {
+ // const coordinates = [
+ // e.features[0].geometry.coordinates[0],
+ // e.features[0].geometry.coordinates[1],
+ // ]; //[lon, lat]
+ // const radius = parseInt(e.features[0].properties.radius); // in meters
+ // const options = { numberOfEdges: 32 }; //optional, defaults to { numberOfEdges: 32 }
+
+ // const polygon = circleToPolygon(coordinates, radius, options);
+ // const updatedFeatures = {
+ // type: "Feature",
+ // geometry: {
+ // type: "Polygon",
+ // coordinates: polygon.coordinates[0].map((c) => {
+ // return [c[0], c[1]];
+ // }),
+ // },
+ // properties: {
+ // radius: radius,
+ // centerpoint: e.features[0].geometry.coordinates,
+ // },
+ // };
+ // console.log(updatedFeatures);
+ // setFeatures(updatedFeatures);
+ // } else {
+ setFeatures((currFeatures: any) => {
+ const updatedFeatures = e.features.map((f: any) => {
+ return { ...f };
+ });
+ const normalizedFeatures = normalize(updatedFeatures[0]);
+ const flattenedFeatures = flatten(normalizedFeatures);
+ return flattenedFeatures;
+ });
+ },
+ // },
+ [setFeatures, setGeojsonUploadData]
+ );
+
+ const onDelete = useCallback(
+ (e: any) => {
+ setFeatures((currFeatures: any) => {
+ const newFeatures = { ...currFeatures };
+
+ for (const feature of e.features) {
+ if (feature.id) {
+ // Filter out the feature with the matching 'id'
+ newFeatures.features = newFeatures.features.filter(
+ (f: any) => f.id !== feature.id
+ );
+ }
+ }
+ return newFeatures;
+ });
+ },
+ [setFeatures]
+ );
+
+ const handleMapClick = useCallback(
+ (e: MapLayerMouseEvent) => {
+ if (geojsonUploadData != null) {
+ const { lngLat } = e;
+ setPopup({
+ latitude: lngLat.lat,
+ longitude: lngLat.lng,
+ className: "p-4",
+ children: (
+
+ {geojsonUploadData.features.map((f: any, index: number) => (
+
+ {Object.entries(f.properties).map(([key, value]) => (
+
+ {key}: {value as string}
+
+ ))}
+
+ ))}
+
+
+ {comments.map((c: Comment, i: number) => {
+ return (
+
+
+
+
+
+
+
+ CN
+
+ {/* @ts-ignore */}
+ {c.owner.name}
+
+
+
+
+ )}
+
+
+
+ {commentEditMode ? (
+
+ {() => (
+
+
+
+
+ Bild hinzufügen
+
+
+ Markdown unterstützt
+
+
+
+
+
+ );
+ })}
+
+
+
+ Bild hinzufügen
+
+ Markdown unterstützt
+
+
+
+
+
+
+ Bild hinzufügen
+
+ Markdown unterstützt
+
+
+
+
+
+ Noch keine Events für diese Kampagne.{" "}
+ {" "}
+
+
+ {events.map((e: any, i: number) => (
+
+
+
+
+
+ {eventEditMode ? (
+
setEditEventTitle(e.target.value)}
+ placeholder="Enter new title"
+ />
+ ) : (
+
{e.title}
+ )}
+
+
+
+
+ )}
+
+
+
+ Beschreibung:
+ {eventEditMode ? (
+
+ {() => (
+ <>
+
+
+
+ Bild hinzufügen
+
+
+ Markdown unterstützt
+
+
+
+ )}
+
+ ) : (
+ {e.description}
+ )}
+ Beginn:
+ {eventEditMode ? (
+ setEditEventStartDate}
+ />
+ ) : (
+ {e.startDate}
+ )}
+ Abschluss:
+ {e.endDate}
+
+ {userId === e.ownerId && eventEditMode && (
+
+
+
+ )}
+
+
+ ))}
+
+ {userId === campaign.ownerId && !editMode && (
+
+ )}
+ {!editMode ? (
+ <>
+
+
Contributors
+
+
+
+
+
+ JR
+
+
+
+
+
+
+
+
+
+
Instructions
+ {instructions}
+
+
+
+
+ Attribut
+ Wert
+
+
+
+
+ Beschreibung
+
+ {campaign.description}
+
+
+
+ Priorität
+ {campaign.priority}
+
+
+ Teilnehmer
+
+ {/* {campaign.participants.length} /{" "} */}
+ {campaign.minimumParticipants}
+
+
+
+ Erstellt am
+ {JSON.stringify(campaign.createdAt)}
+
+
+ Bearbeitet am
+ {JSON.stringify(campaign.updatedAt)}
+
+
+ Location
+
+
+ {campaign.countries && campaign.countries.map((country: string, index: number) => {
+ const flagIcon = CountryFlagIcon({
+ country: String(country).toUpperCase(),
+ });
+ if (!flagIcon) return null;
+
+ return {flagIcon}
;
+ })}
+
+
+
+ Phänomene
+ {campaign.phenomena}
+
+
+ Exposure
+ {campaign.exposure}
+
+
+ Hardware verfügbar
+
+ {campaign.hardwareAvailable ? "Ja" : "Nein"}
+
+
+
+
+
+ ) : (
+
+ )}
+
+
+ {t("add image")}
+
+
+ {t("markdown supported")}
+
+
+
+ )}
+
+
+ );
+}
diff --git a/app/components/campaigns/campaignId/table/edit-components/phenomena.tsx b/app/components/campaigns/campaignId/table/edit-components/phenomena.tsx
new file mode 100644
index 00000000..333d445a
--- /dev/null
+++ b/app/components/campaigns/campaignId/table/edit-components/phenomena.tsx
@@ -0,0 +1,68 @@
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { t } from "i18next";
+import { ChevronDown } from "lucide-react";
+import { Button } from "~/components/ui/button";
+
+type Props = {
+ phenomenaState: any;
+ setPhenomenaState: any;
+ openDropdown: any;
+ setDropdownOpen: any;
+ phenomena: any;
+};
+
+export default function PhenomenaDropdown({
+ phenomenaState,
+ setPhenomenaState,
+ openDropdown,
+ setDropdownOpen,
+ phenomena,
+}: Props) {
+ return (
+
+
+
+
+
+ {phenomena.map((p: any) => {
+ return (
+ {
+ setPhenomenaState({
+ ...phenomenaState,
+ [p]: !phenomenaState[p],
+ });
+ }}
+ onSelect={(event) => event.preventDefault()}
+ >
+ {p}
+
+ );
+ })}
+
+
+ );
+}
diff --git a/app/components/campaigns/campaignId/table/index.tsx b/app/components/campaigns/campaignId/table/index.tsx
new file mode 100644
index 00000000..4ed46195
--- /dev/null
+++ b/app/components/campaigns/campaignId/table/index.tsx
@@ -0,0 +1,280 @@
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import type { Campaign } from "~/schema";
+// import type { Campaign } from "@prisma/client";
+import { Form } from "@remix-run/react";
+import { Switch } from "@/components/ui/switch";
+import Markdown from "markdown-to-jsx";
+import { priorityEnum, exposureEnum } from "~/schema";
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { useState, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { CountryDropdown } from "../../overview/country-dropdown";
+import PhenomenaDropdown from "./edit-components/phenomena";
+import { EditButton, CancelButton, SaveButton } from "./buttons";
+import { EditDescription } from "./edit-components/description";
+
+type EditTableProps = {
+ owner: boolean;
+ campaign: any;
+ phenomena: string[];
+};
+
+export default function CampaignTable({
+ owner,
+ campaign,
+ phenomena,
+}: EditTableProps) {
+ const descriptionRef = useRef();
+ const [editMode, setEditMode] = useState(false);
+ const [title, setTitle] = useState(campaign.title);
+ const [editDescription, setEditDescription] = useState(
+ campaign.description
+ );
+ const [priority, setPriority] = useState(campaign.priority);
+ const [startDate, setStartDate] = useState(campaign.startDate);
+ const [endDate, setEndDate] = useState(campaign.endDate);
+ const [minimumParticipants, setMinimumParticipants] = useState(
+ campaign.minimumParticipants
+ );
+ const [openDropdown, setDropdownOpen] = useState(false);
+ const [phenomenaState, setPhenomenaState] = useState(
+ Object.fromEntries(phenomena.map((p: string) => [p, false]))
+ );
+ const [exposure, setExposure] = useState(campaign.exposure);
+ const [country, setCountry] = useState(campaign.country);
+ const { t } = useTranslation("edit-campaign-table");
+
+ return (
+
+ );
+}
diff --git a/app/components/campaigns/overview/all-countries-object.ts b/app/components/campaigns/overview/all-countries-object.ts
new file mode 100644
index 00000000..6aa6c496
--- /dev/null
+++ b/app/components/campaigns/overview/all-countries-object.ts
@@ -0,0 +1,251 @@
+export const countryListAlpha2 = {
+ AF: "Afghanistan",
+ AL: "Albania",
+ DZ: "Algeria",
+ AS: "American Samoa",
+ AD: "Andorra",
+ AO: "Angola",
+ AI: "Anguilla",
+ AQ: "Antarctica",
+ AG: "Antigua and Barbuda",
+ AR: "Argentina",
+ AM: "Armenia",
+ AW: "Aruba",
+ AU: "Australia",
+ AT: "Austria",
+ AZ: "Azerbaijan",
+ BS: "Bahamas (the)",
+ BH: "Bahrain",
+ BD: "Bangladesh",
+ BB: "Barbados",
+ BY: "Belarus",
+ BE: "Belgium",
+ BZ: "Belize",
+ BJ: "Benin",
+ BM: "Bermuda",
+ BT: "Bhutan",
+ BO: "Bolivia (Plurinational State of)",
+ BQ: "Bonaire, Sint Eustatius and Saba",
+ BA: "Bosnia and Herzegovina",
+ BW: "Botswana",
+ BV: "Bouvet Island",
+ BR: "Brazil",
+ IO: "British Indian Ocean Territory (the)",
+ BN: "Brunei Darussalam",
+ BG: "Bulgaria",
+ BF: "Burkina Faso",
+ BI: "Burundi",
+ CV: "Cabo Verde",
+ KH: "Cambodia",
+ CM: "Cameroon",
+ CA: "Canada",
+ KY: "Cayman Islands (the)",
+ CF: "Central African Republic (the)",
+ TD: "Chad",
+ CL: "Chile",
+ CN: "China",
+ CX: "Christmas Island",
+ CC: "Cocos (Keeling) Islands (the)",
+ CO: "Colombia",
+ KM: "Comoros (the)",
+ CD: "Congo (the Democratic Republic of the)",
+ CG: "Congo (the)",
+ CK: "Cook Islands (the)",
+ CR: "Costa Rica",
+ HR: "Croatia",
+ CU: "Cuba",
+ CW: "Curaçao",
+ CY: "Cyprus",
+ CZ: "Czechia",
+ CI: "Côte d'Ivoire",
+ DK: "Denmark",
+ DJ: "Djibouti",
+ DM: "Dominica",
+ DO: "Dominican Republic (the)",
+ EC: "Ecuador",
+ EG: "Egypt",
+ SV: "El Salvador",
+ GQ: "Equatorial Guinea",
+ ER: "Eritrea",
+ EE: "Estonia",
+ SZ: "Eswatini",
+ ET: "Ethiopia",
+ FK: "Falkland Islands (the) [Malvinas]",
+ FO: "Faroe Islands (the)",
+ FJ: "Fiji",
+ FI: "Finland",
+ FR: "France",
+ GF: "French Guiana",
+ PF: "French Polynesia",
+ TF: "French Southern Territories (the)",
+ GA: "Gabon",
+ GM: "Gambia (the)",
+ GE: "Georgia",
+ DE: "Germany",
+ GH: "Ghana",
+ GI: "Gibraltar",
+ GR: "Greece",
+ GL: "Greenland",
+ GD: "Grenada",
+ GP: "Guadeloupe",
+ GU: "Guam",
+ GT: "Guatemala",
+ GG: "Guernsey",
+ GN: "Guinea",
+ GW: "Guinea-Bissau",
+ GY: "Guyana",
+ HT: "Haiti",
+ HM: "Heard Island and McDonald Islands",
+ VA: "Holy See (the)",
+ HN: "Honduras",
+ HK: "Hong Kong",
+ HU: "Hungary",
+ IS: "Iceland",
+ IN: "India",
+ ID: "Indonesia",
+ IR: "Iran (Islamic Republic of)",
+ IQ: "Iraq",
+ IE: "Ireland",
+ IM: "Isle of Man",
+ IL: "Israel",
+ IT: "Italy",
+ JM: "Jamaica",
+ JP: "Japan",
+ JE: "Jersey",
+ JO: "Jordan",
+ KZ: "Kazakhstan",
+ KE: "Kenya",
+ KI: "Kiribati",
+ KP: "Korea (the Democratic People's Republic of)",
+ KR: "Korea (the Republic of)",
+ KW: "Kuwait",
+ KG: "Kyrgyzstan",
+ LA: "Lao People's Democratic Republic (the)",
+ LV: "Latvia",
+ LB: "Lebanon",
+ LS: "Lesotho",
+ LR: "Liberia",
+ LY: "Libya",
+ LI: "Liechtenstein",
+ LT: "Lithuania",
+ LU: "Luxembourg",
+ MO: "Macao",
+ MG: "Madagascar",
+ MW: "Malawi",
+ MY: "Malaysia",
+ MV: "Maldives",
+ ML: "Mali",
+ MT: "Malta",
+ MH: "Marshall Islands (the)",
+ MQ: "Martinique",
+ MR: "Mauritania",
+ MU: "Mauritius",
+ YT: "Mayotte",
+ MX: "Mexico",
+ FM: "Micronesia (Federated States of)",
+ MD: "Moldova (the Republic of)",
+ MC: "Monaco",
+ MN: "Mongolia",
+ ME: "Montenegro",
+ MS: "Montserrat",
+ MA: "Morocco",
+ MZ: "Mozambique",
+ MM: "Myanmar",
+ NA: "Namibia",
+ NR: "Nauru",
+ NP: "Nepal",
+ NL: "Netherlands (the)",
+ NC: "New Caledonia",
+ NZ: "New Zealand",
+ NI: "Nicaragua",
+ NE: "Niger (the)",
+ NG: "Nigeria",
+ NU: "Niue",
+ NF: "Norfolk Island",
+ MP: "Northern Mariana Islands (the)",
+ NO: "Norway",
+ OM: "Oman",
+ PK: "Pakistan",
+ PW: "Palau",
+ PS: "Palestine, State of",
+ PA: "Panama",
+ PG: "Papua New Guinea",
+ PY: "Paraguay",
+ PE: "Peru",
+ PH: "Philippines (the)",
+ PN: "Pitcairn",
+ PL: "Poland",
+ PT: "Portugal",
+ PR: "Puerto Rico",
+ QA: "Qatar",
+ MK: "Republic of North Macedonia",
+ RO: "Romania",
+ RU: "Russian Federation (the)",
+ RW: "Rwanda",
+ RE: "Réunion",
+ BL: "Saint Barthélemy",
+ SH: "Saint Helena, Ascension and Tristan da Cunha",
+ KN: "Saint Kitts and Nevis",
+ LC: "Saint Lucia",
+ MF: "Saint Martin (French part)",
+ PM: "Saint Pierre and Miquelon",
+ VC: "Saint Vincent and the Grenadines",
+ WS: "Samoa",
+ SM: "San Marino",
+ ST: "Sao Tome and Principe",
+ SA: "Saudi Arabia",
+ SN: "Senegal",
+ RS: "Serbia",
+ SC: "Seychelles",
+ SL: "Sierra Leone",
+ SG: "Singapore",
+ SX: "Sint Maarten (Dutch part)",
+ SK: "Slovakia",
+ SI: "Slovenia",
+ SB: "Solomon Islands",
+ SO: "Somalia",
+ ZA: "South Africa",
+ GS: "South Georgia and the South Sandwich Islands",
+ SS: "South Sudan",
+ ES: "Spain",
+ LK: "Sri Lanka",
+ SD: "Sudan (the)",
+ SR: "Suriname",
+ SJ: "Svalbard and Jan Mayen",
+ SE: "Sweden",
+ CH: "Switzerland",
+ SY: "Syrian Arab Republic",
+ TW: "Taiwan",
+ TJ: "Tajikistan",
+ TZ: "Tanzania, United Republic of",
+ TH: "Thailand",
+ TL: "Timor-Leste",
+ TG: "Togo",
+ TK: "Tokelau",
+ TO: "Tonga",
+ TT: "Trinidad and Tobago",
+ TN: "Tunisia",
+ TR: "Turkey",
+ TM: "Turkmenistan",
+ TC: "Turks and Caicos Islands (the)",
+ TV: "Tuvalu",
+ UG: "Uganda",
+ UA: "Ukraine",
+ AE: "United Arab Emirates (the)",
+ GB: "United Kingdom of Great Britain and Northern Ireland (the)",
+ UM: "United States Minor Outlying Islands (the)",
+ US: "United States of America (the)",
+ UY: "Uruguay",
+ UZ: "Uzbekistan",
+ VU: "Vanuatu",
+ VE: "Venezuela (Bolivarian Republic of)",
+ VN: "Viet Nam",
+ VG: "Virgin Islands (British)",
+ VI: "Virgin Islands (U.S.)",
+ WF: "Wallis and Futuna",
+ EH: "Western Sahara",
+ YE: "Yemen",
+ ZM: "Zambia",
+ ZW: "Zimbabwe",
+ AX: "Åland Islands",
+};
diff --git a/app/components/campaigns/overview/campaign-badges.tsx b/app/components/campaigns/overview/campaign-badges.tsx
new file mode 100644
index 00000000..ec81813d
--- /dev/null
+++ b/app/components/campaigns/overview/campaign-badges.tsx
@@ -0,0 +1,51 @@
+// import type { Exposure, Priority } from "@prisma/client";
+import { priorityEnum, exposureEnum } from "~/schema";
+import clsx from "clsx";
+import { ClockIcon } from "lucide-react";
+import { Badge } from "~/components/ui/badge";
+
+type PriorityBadgeProps = {
+ priority: keyof typeof priorityEnum;
+};
+
+type ExposureBadgeProps = {
+ exposure: keyof typeof exposureEnum;
+};
+
+export function PriorityBadge({ priority }: PriorityBadgeProps) {
+ const prio = priority.toString().toLowerCase();
+ return (
+
+ {" "}
+ {prio}
+
+ );
+}
+
+export function ExposureBadge({ exposure }: ExposureBadgeProps) {
+ const exposed = exposure.toString().toLowerCase();
+ if (exposed === "unknown") {
+ return null;
+ }
+ return (
+
+ {exposed}
+
+ );
+}
diff --git a/app/components/campaigns/overview/campaign-filter.tsx b/app/components/campaigns/overview/campaign-filter.tsx
new file mode 100644
index 00000000..9ee22469
--- /dev/null
+++ b/app/components/campaigns/overview/campaign-filter.tsx
@@ -0,0 +1,288 @@
+import { Form, useSearchParams } from "@remix-run/react";
+import { Button } from "~/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Switch } from "~/components/ui/switch";
+import {
+ AlertCircleIcon,
+ ArrowDownAZIcon,
+ ChevronDown,
+ ChevronUp,
+ FilterXIcon,
+} from "lucide-react";
+// import { Priority } from "@prisma/client";
+import { priorityEnum } from "~/schema";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import clsx from "clsx";
+import FiltersModal from "./filters-modal";
+import { Label } from "~/components/ui/label";
+
+type FilterProps = {
+ switchDisabled: boolean;
+ showMap: boolean;
+ setShowMap: (e: boolean) => void;
+ phenomena: string[];
+};
+
+export default function Filter({
+ switchDisabled,
+ showMap,
+ setShowMap,
+ phenomena,
+}: FilterProps) {
+ const { t } = useTranslation("explore-campaigns");
+ const [searchParams] = useSearchParams();
+ const [phenomenaState, setPhenomenaState] = useState(
+ Object.fromEntries(phenomena.map((p: string) => [p, false]))
+ );
+ const [filterObject, setFilterObject] = useState({
+ searchTerm: "",
+ priority: "",
+ country: "",
+ exposure: "",
+ phenomena: [] as string[],
+ time_range: {
+ startDate: "",
+ endDate: "",
+ },
+ });
+
+ const [sortBy, setSortBy] = useState("updatedAt");
+ const [showMobileFilters, setShowMobileFilters] = useState(false);
+ return (
+ <>
+
+
+ setShowMap(!showMap)}
+ />
+
+
+
+ {!showMap && (
+
+ )}
+
+ );
+}
diff --git a/app/components/campaigns/overview/country-dropdown.tsx b/app/components/campaigns/overview/country-dropdown.tsx
new file mode 100644
index 00000000..9854676e
--- /dev/null
+++ b/app/components/campaigns/overview/country-dropdown.tsx
@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { countryListAlpha2 } from "./all-countries-object";
+import { CountryFlagIcon } from "~/components/ui/country-flag";
+
+import { Button } from "@/components/ui/button";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+} from "@/components/ui/command";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "~/components/ui/scroll-area";
+
+type CountryDropdownProps = {
+ setCountry?: (country: string) => void;
+};
+
+export function CountryDropdown({ setCountry }: CountryDropdownProps) {
+ const [open, setOpen] = useState(false);
+ const [value, setValue] = useState("");
+
+ const countries = Object.values(countryListAlpha2);
+
+ return (
+
+
+
+
+
+
+
+ No country found.
+
+
+ {Object.entries(countryListAlpha2).map(
+ ([countryCode, countryName], index: number) => {
+ const flagIcon = CountryFlagIcon({
+ country: String(countryCode).toUpperCase(),
+ });
+
+ return (
+ {
+ setValue(countryName);
+ if (setCountry) {
+ setCountry(countryCode);
+ }
+ setOpen(false);
+ }}
+ >
+ {flagIcon !== undefined ? (
+ <>
+ {flagIcon}
+ {countryName}
+
+ ) : (
+ <>Flag not available for {countryName}
+ )}
+
+ );
+ }
+ )}
+
+
+
+
+
+ );
+}
diff --git a/app/components/campaigns/overview/filters-bar.tsx b/app/components/campaigns/overview/filters-bar.tsx
new file mode 100644
index 00000000..df91f7b9
--- /dev/null
+++ b/app/components/campaigns/overview/filters-bar.tsx
@@ -0,0 +1,169 @@
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "~/components/ui/button";
+import FiltersModal from "./filters-modal";
+import { Switch } from "~/components/ui/switch";
+import {
+ AlertCircleIcon,
+ ArrowDownAZIcon,
+ ChevronDown,
+ FilterXIcon,
+} from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+import { useTranslation } from "react-i18next";
+// import { Priority } from "@prisma/client";
+import { priorityEnum, zodPriorityEnum } from "~/schema";
+import clsx from "clsx";
+
+type FiltersBarProps = {
+ phenomena: string[];
+ phenomenaState: {
+ [k: string]: any;
+ };
+ setPhenomenaState: Dispatch<
+ SetStateAction<{
+ [k: string]: any;
+ }>
+ >;
+ filterObject: {
+ searchTerm: string;
+ priority: string;
+ country: string;
+ exposure: string;
+ phenomena: string[];
+ time_range: {
+ startDate: string;
+ endDate: string;
+ };
+ };
+ setFilterObject: Dispatch<
+ SetStateAction<{
+ searchTerm: string;
+ priority: string;
+ country: string;
+ exposure: string;
+ phenomena: string[];
+ time_range: {
+ startDate: string;
+ endDate: string;
+ };
+ }>
+ >;
+ sortBy: string;
+ setSortBy: Dispatch>;
+ switchDisabled: boolean;
+ showMap: boolean;
+ setShowMap: Dispatch>;
+ resetFilters: () => void;
+};
+
+export default function FiltersBar({
+ phenomena,
+ phenomenaState,
+ setPhenomenaState,
+ filterObject,
+ setFilterObject,
+ sortBy,
+ setSortBy,
+ switchDisabled,
+ showMap,
+ setShowMap,
+ resetFilters,
+}: FiltersBarProps) {
+ const { t } = useTranslation("explore-campaigns");
+ return (
+
+
+
+
+
+
+
+ setFilterObject({ ...filterObject, priority: e })
+ }
+ >
+ {Object.values(priorityEnum.enumValues).map((priority: zodPriorityEnum, index: number) => {
+ return (
+
+ {priority}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ {t("priority")}
+
+
+ {t("creation date")}
+
+
+
+
+
+
+
+ {t("show map")}
+ setShowMap(!showMap)}
+ />
+
+
+
{t("no campaigns yet")}. {" "}
+
+ {t("click")}{" "}
+
+ {t("here")}
+ {" "}
+ {t("to create a campaign")}
+
+
+
+ {campaigns.map((item: Campaign, index: number) => {
+ // const isBookmarked =
+ // userId &&
+ // bookmarks.find(
+ // (bookmark: CampaignBookmark) =>
+ // bookmark.userId === userId && bookmark.campaignId === item.id
+ // );
+ return (
+
+
+
+
+
+
+
+
{item.title}
+
+ {item.countries && item.countries.map(
+ (country: string, index: number) => {
+ if (index === 2) {
+ return (
+
+ );
+ }
+ const flagIcon = CountryFlagIcon({
+ country: String(country).toUpperCase(),
+ });
+ if (!flagIcon) return null;
+ return (
+
+ );
+ }
+ )}
+
+
+
+
+ );
+ })}
+ {totalPages > 1 && (
+ <>
+
+
+
+
+ )}
+
+
+
+
+
+ More Filters
+
+
+
+ Filter by Priority
+
+ {
+ setFilterObject({ ...filterObject, priority: e });
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setFilterObject({ ...filterObject, country: e })
+ }
+ />
+
+
+ Filter by Exposure
+
+
+ setFilterObject({ ...filterObject, exposure: e })
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setFilterObject({
+ ...filterObject,
+ time_range: {
+ from: e?.from,
+ to: e?.to,
+ },
+ });
+ }}
+ numberOfMonths={2}
+ />
+
+
+
+
+
+ {visibleCampaigns.map((campaign: Campaign) => {
+ return (
+
+ {campaign.title}
+
+ );
+ })}
+
+
handleClusterClick(cluster)}
+ >
+ {pointCount}
+
+
+ );
+ }
+
+ // we have a single device to render
+ return (
+ <>
+
+ handleMarkerClick(cluster.properties.id, latitude, longitude)
+ }
+ >
+ {selectedMarker === cluster.properties.id && (
+ setSelectedMarker("")}
+ anchor="bottom"
+ maxWidth="400px"
+ style={{
+ maxHeight: "208px",
+ overflowY: "scroll",
+ }}
+ >
+
+
+ {selectedCampaign?.title}
+
+
+
+ Description
+ {selectedCampaign?.description}
+
+
+ Priority
+ {selectedCampaign?.priority}
+
+
+ Exposure
+ {selectedCampaign?.exposure}
+ {" "}
+
+ StartDate
+
+ {selectedCampaign?.startDate &&
+ new Date(selectedCampaign?.startDate)
+ .toISOString()
+ .split("T")[0]}
+
+
+
+ Phenomena
+
+ {selectedCampaign?.phenomena.map((p, i) => (
+ {p}
+ ))}
+
+
+
+
+
+ )}
+
+ {cluster.properties.title}
+
+
+ );
+ });
+ }, [
+ clusters,
+ handleClusterClick,
+ handleMarkerClick,
+ points.length,
+ selectedMarker,
+ ]);
+
+ return <>{clusterMarker};
+}
diff --git a/app/components/campaigns/overview/map/sidebar.tsx b/app/components/campaigns/overview/map/sidebar.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/campaigns/overview/pagination.tsx b/app/components/campaigns/overview/pagination.tsx
new file mode 100644
index 00000000..4a8a09ec
--- /dev/null
+++ b/app/components/campaigns/overview/pagination.tsx
@@ -0,0 +1,67 @@
+// code from https://github.com/AustinGil/npm/blob/main/app/components/Pagination.jsx
+
+import React from "react";
+import { Link, useSearchParams } from "@remix-run/react";
+import { Button } from "~/components/ui/button";
+import { listPageOptions } from "./list-page-options";
+
+const Pagination = ({
+ totalPages = Number.MAX_SAFE_INTEGER,
+ pageParam = "page",
+ className = "",
+ ...attrs
+}) => {
+ const [queryParams] = useSearchParams();
+ const currentPage = Number(queryParams.get(pageParam) || 1);
+ totalPages = Number(totalPages);
+
+ const previousQuery = new URLSearchParams(queryParams);
+ previousQuery.set(pageParam, (currentPage - 1).toString());
+ const nextQuery = new URLSearchParams(queryParams);
+ nextQuery.set(pageParam, (currentPage + 1).toString());
+
+ const pageOptions = listPageOptions(currentPage, totalPages);
+
+ return (
+
+ );
+};
+
+export default Pagination;
diff --git a/app/components/campaigns/overview/where-query.ts b/app/components/campaigns/overview/where-query.ts
new file mode 100644
index 00000000..1c7e9ab1
--- /dev/null
+++ b/app/components/campaigns/overview/where-query.ts
@@ -0,0 +1,75 @@
+export const generateWhereObject = (query: URLSearchParams) => {
+ const where: {
+ title?: {
+ contains: string;
+ mode: "insensitive";
+ };
+ priority?: string;
+ country?: {
+ contains: string;
+ mode: "insensitive";
+ };
+ exposure?: string;
+ startDate?: {
+ gte: Date;
+ };
+ endDate?: {
+ lte: Date;
+ };
+ phenomena?: any;
+ } = {};
+
+ if (query.get("search")) {
+ where.title = {
+ contains: query.get("search") || "",
+ mode: "insensitive",
+ };
+ }
+
+ if (query.get("priority")) {
+ const priority = query.get("priority") || "";
+ where.priority = priority;
+ }
+
+ if (query.get("country")) {
+ where.country = {
+ contains: query.get("country") || "",
+ mode: "insensitive",
+ };
+ }
+
+ if (query.get("exposure")) {
+ const exposure = query.get("exposure") || "UNKNOWN";
+ where.exposure = exposure;
+ }
+ if (query.get("phenomena")) {
+ const phenomenaString = query.get("phenomena") || "";
+ try {
+ const phenomena = JSON.parse(phenomenaString);
+
+ if (Array.isArray(phenomena) && phenomena.length > 0) {
+ where.phenomena = {
+ hasSome: phenomena,
+ };
+ }
+ } catch (error) {
+ console.error("Error parsing JSON:", error);
+ }
+ }
+
+ if (query.get("startDate")) {
+ const startDate = new Date(query.get("startDate") || "");
+ where.startDate = {
+ gte: startDate,
+ };
+ }
+
+ if (query.get("endDate")) {
+ const endDate = new Date(query.get("endDate") || "");
+ where.endDate = {
+ lte: endDate,
+ };
+ }
+
+ return where;
+};
diff --git a/app/components/campaigns/phenomena-select.tsx b/app/components/campaigns/phenomena-select.tsx
new file mode 100644
index 00000000..70167fc0
--- /dev/null
+++ b/app/components/campaigns/phenomena-select.tsx
@@ -0,0 +1,49 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { DataItem } from "../ui/multi-select";
+import { MultiSelect } from "../ui/multi-select";
+
+type PhenomenaSelectProps = {
+ phenomena: string[];
+ setSelected: React.Dispatch>;
+ localFilterObject?: {
+ country: string;
+ exposure: string;
+ phenomena: string[];
+ time_range: {
+ startDate: string;
+ endDate: string;
+ };
+ };
+ setLocalFilterObject?: Dispatch<
+ SetStateAction<{
+ country: string;
+ exposure: string;
+ phenomena: string[];
+ time_range: {
+ startDate: string;
+ endDate: string;
+ };
+ }>
+ >;
+ setSelectedPhenomena?: any;
+};
+
+export default function PhenomenaSelect({
+ phenomena,
+ setSelected,
+}: PhenomenaSelectProps) {
+ const data = phenomena.map((str) => {
+ return {
+ value: str,
+ label: str,
+ };
+ });
+ return (
+
+ );
+}
diff --git a/app/components/campaigns/select-countries.tsx b/app/components/campaigns/select-countries.tsx
new file mode 100644
index 00000000..ce156761
--- /dev/null
+++ b/app/components/campaigns/select-countries.tsx
@@ -0,0 +1,28 @@
+import { MultiSelect } from "../ui/multi-select";
+import { countryListAlpha2 } from "./overview/all-countries-object";
+import type { DataItem } from "../ui/multi-select";
+
+type Props = {
+ selectedCountry?: DataItem;
+ setSelected: React.Dispatch>;
+};
+export default function SelectCountries({
+ selectedCountry,
+ setSelected,
+}: Props) {
+ const data = Object.entries(countryListAlpha2).map((entry) => {
+ return {
+ value: entry[0],
+ label: entry[1],
+ };
+ });
+ const preselected = selectedCountry;
+ return (
+
+ );
+}
diff --git a/app/components/campaigns/tutorial/contribute/steps.tsx b/app/components/campaigns/tutorial/contribute/steps.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/campaigns/tutorial/create/steps.tsx b/app/components/campaigns/tutorial/create/steps.tsx
new file mode 100644
index 00000000..71fe74c6
--- /dev/null
+++ b/app/components/campaigns/tutorial/create/steps.tsx
@@ -0,0 +1,8 @@
+// export default function CreateSteps(){
+// const steps = [
+// {
+// message: '',
+// img: string }
+
+// ]
+// }
\ No newline at end of file
diff --git a/app/components/device-card.tsx b/app/components/device-card.tsx
new file mode 100644
index 00000000..68344276
--- /dev/null
+++ b/app/components/device-card.tsx
@@ -0,0 +1,35 @@
+import { Circle } from "lucide-react";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "./ui/card";
+import type { Device } from "~/schema";
+
+interface DeviceCardProps {
+ device: Device;
+}
+
+export default function DeviceCard({ device }: DeviceCardProps) {
+ return (
+
+
+
+ {device.name}
+ {device.description}
+
+
+
+
+
+
+ {device.model}
+
+
Updated {device.updatedAt.toString()}
+
+ {error.status} {error.data}
+
+ ),
+ statusHandlers,
+ unexpectedErrorHandler = (error) => {getErrorMessage(error)}
,
+}: {
+ defaultStatusHandler?: StatusHandler;
+ statusHandlers?: Record;
+ unexpectedErrorHandler?: (error: unknown) => JSX.Element | null;
+}) {
+ const error = useRouteError();
+ const params = useParams();
+
+ if (typeof document !== "undefined") {
+ console.error(error);
+ }
+
+ return (
+
+ {isRouteErrorResponse(error)
+ ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
+ error,
+ params,
+ })
+ : unexpectedErrorHandler(error)}
+
+ );
+}
diff --git a/app/components/error-message.tsx b/app/components/error-message.tsx
new file mode 100644
index 00000000..79ba0be3
--- /dev/null
+++ b/app/components/error-message.tsx
@@ -0,0 +1,29 @@
+// import { X } from "lucide-react";
+// import { Alert, AlertDescription } from "./ui/alert";
+// import { useNavigate } from "@remix-run/react";
+
+// export default function ErrorMessage() {
+// let navigate = useNavigate();
+// const goBack = () => navigate(-1);
+
+// return (
+//
+//
+// {
+// goBack();
+// }}
+// />
+//
+//
+// Oh no, this shouldn't happen, but don't worry, our team is on the case!
+//
+//
+//
+// Add some info here.
+//
+//
+//
+// );
+// }
\ No newline at end of file
diff --git a/app/components/header/menu/index.tsx b/app/components/header/menu/index.tsx
index f5f6550d..c8bfaf34 100644
--- a/app/components/header/menu/index.tsx
+++ b/app/components/header/menu/index.tsx
@@ -145,16 +145,17 @@ export default function Menu() {
)}
{data.profile && (
-
+
+ Profile
)}
- {t("settings_label")}
+ {t("settings_label")}
- {t("my_devices_label")}
+ {t("my_devices_label")}
diff --git a/app/components/header/nav-bar/nav-bar.tsx b/app/components/header/nav-bar/nav-bar.tsx
index e0e3970a..4430df74 100644
--- a/app/components/header/nav-bar/nav-bar.tsx
+++ b/app/components/header/nav-bar/nav-bar.tsx
@@ -1,204 +1,204 @@
-import React, { useEffect, useRef } from "react";
-import Search from "~/components/search";
-import { SunIcon, CalendarDaysIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { TimeFilter } from "~/components/header/navBar/time-filter/time-filter";
-import type { DateRange } from "react-day-picker";
-import getUserLocale from "get-user-locale";
-import { format } from "date-fns";
-import { useTranslation } from "react-i18next";
-import type { Device } from "@prisma/client";
-
-interface NavBarProps {
- devices: Device[];
-}
-
-type ValuePiece = Date | string | null;
-
-type Value = ValuePiece
-
-
-export default function NavBar(props: NavBarProps) {
- let { t } = useTranslation("navbar");
-
- const [timeState, setTimeState] = React.useState("live");
- const [isDialogOpen, setIsDialogOpen] = React.useState(false);
- const [isHovered, setIsHovered] = React.useState(false);
- const [showSearch, setShowSearch] = React.useState(false);
- const searchRef = useRef(null);
-
- const [value, onChange] = React.useState(null);
- const [dateRange, setDateRange] = React.useState(undefined);
- const [singleDate, setSingleDate] = React.useState(undefined)
- const userLocaleString = getUserLocale();
-
- /**
- * Focus the search input
- */
- const focusSearchInput = () => {
- searchRef.current?.focus();
- };
-
- /**
- * Display the search
- */
- const displaySearch = () => {
- setShowSearch(true);
- setTimeout(() => {
- focusSearchInput();
- }, 100);
- };
-
- /**
- * Close the search when the escape key is pressed
- *
- * @param event event object
- */
- const closeSearch = (event: any) => {
- if (event.key === "Escape") {
- setShowSearch(false);
- }
- };
-
- /**
- * useEffect hook to attach and remove the event listener
- */
- useEffect(() => {
- // attach the event listener
- document.addEventListener("keydown", closeSearch);
-
- // remove the event listener
- return () => {
- document.removeEventListener("keydown", closeSearch);
- };
- });
-
- // useEffect(() => {
- // console.log("dateRange", dateRange);
- // console.log("time", value);
- // console.log("singleDate", singleDate);
- // }, [dateRange, value, singleDate]);
-
- return (
-
- {!isHovered && !showSearch ? (
-
{
- setIsHovered(true);
- }}
- >
-
-
-
- {t("temperature_label")}
-
-
-
-
- Suche
-
- Ctrl + K
-
-
-
-
-
- {timeState === "live" ? (
- {t("live_label")}
- ) : timeState === "pointintime" ? (
- singleDate ? (
- <>
- {format(
- singleDate,
- userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
- )}
-
- ) : (
- t("date_picker_label")
- )
- ) : timeState === "timeperiod" ? (
- dateRange?.from ? (
- dateRange.to ? (
- <>
- {format(
- dateRange.from,
- userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
- )}{" "}
- -{" "}
- {format(
- dateRange.to,
- userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
- )}
-
- ) : (
- format(
- dateRange.from,
- userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
- )
- )
- ) : (
- t("date_range_picker_label")
- )
- ) : null}
-
-
-
- ) : isHovered && !showSearch ? (
-
{
- if (!isDialogOpen) {
- setIsHovered(false);
- }
- }}
- >
-
-
-
-
-
-
- ) : (
-
{
- setIsHovered(false);
- }}
- onMouseEnter={() => {
- setIsHovered(true);
- }}
- >
- {
- setShowSearch(false);
- setIsHovered(false);
- }}
- />
-
- )}
-
+ {!isHovered && !showSearch ? (
+
{
+ setIsHovered(true);
+ }}
+ >
+
+
+
+ {t("temperature_label")}
+
+
+
+
+ Suche
+
+ Ctrl + K
+
+
+
+
+
+ {timeState === "live" ? (
+ {t("live_label")}
+ ) : timeState === "pointintime" ? (
+ singleDate ? (
+ <>
+ {format(
+ singleDate,
+ userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
+ )}
+
+ ) : (
+ t("date_picker_label")
+ )
+ ) : timeState === "timeperiod" ? (
+ dateRange?.from ? (
+ dateRange.to ? (
+ <>
+ {format(
+ dateRange.from,
+ userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
+ )}{" "}
+ -{" "}
+ {format(
+ dateRange.to,
+ userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
+ )}
+
+ ) : (
+ format(
+ dateRange.from,
+ userLocaleString === "de" ? "dd/MM/yyyy" : "MM/dd/yyyy"
+ )
+ )
+ ) : (
+ t("date_range_picker_label")
+ )
+ ) : null}
+
+
+
+ ) : isHovered && !showSearch ? (
+
{
+ if (!isDialogOpen) {
+ setIsHovered(false);
+ }
+ }}
+ >
+
+
+
+
+
+
+ ) : (
+
{
+ setIsHovered(false);
+ }}
+ onMouseEnter={() => {
+ setIsHovered(true);
+ }}
+ >
+ {
+ setShowSearch(false);
+ setIsHovered(false);
+ }}
+ />
+
+ )}
+
-
- {
- //header content here
- return ;
- }}
- footer={() => {
- //footer content here
- return ;
- }}
- >
- {({ unseenCount }) => }
-
-
-
+ {sensors.map((sensor) => (
+
+ ))}
+
+ );
+}
+
+function SensorView({ sensor }: { sensor: Sensor }) {
+ const [minColor, setMinColor] = useState(LOW_COLOR);
+ const [maxColor, setMaxColor] = useState(HIGH_COLOR);
+
+ return (
+ <>
+
-)
-DialogPortal.displayName = DialogPrimitive.Portal.displayName
+);
+DialogPortal.displayName = DialogPrimitive.Portal.displayName;
const DialogOverlay = React.forwardRef<
React.ElementRef