Alpha 0.1.9/554 preflight checklist

.vscode/settings.json

@@ -13,6 +13,7 @@
         "RSSI",
         "serialutil",
         "SITL",
-        "statustext"
+        "statustext",
+        "SUAS"
     ]
 }

gcs/package.json

@@ -27,14 +27,19 @@
   "dependencies": {
     "@headlessui/react": "2.1.4",
     "@mantine/code-highlight": "^7.17.1",
-    "@mantine/core": "^7.3.2",
-    "@mantine/hooks": "^7.3.2",
+    "@mantine/core": "^7.17.3",
+    "@mantine/hooks": "^7.17.3",
     "@mantine/notifications": "^7.4.0",
     "@mantine/spotlight": "^7.15.3",
+    "@mantine/tiptap": "^7.17.3",
     "@reduxjs/toolkit": "^2.2.7",
     "@robloche/chartjs-plugin-streaming": "^3.1.0",
     "@tabler/icons-react": "^2.44.0",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tiptap/extension-link": "^2.11.6",
+    "@tiptap/pm": "^2.11.6",
+    "@tiptap/react": "^2.11.6",
+    "@tiptap/starter-kit": "^2.11.6",
     "@tremor/react": "^3.12.1",
     "@turf/turf": "^7.2.0",
     "chart.js": "^4.4.2",

gcs/src/components/customMantineTheme.jsx

@@ -27,4 +27,5 @@ export const CustomMantineTheme = createTheme({
       tailwindColors.falcongrey[950],
     ],
   },
+  cursorType: "pointer",
 })

gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx

@@ -0,0 +1,203 @@
+/*
+  The Checklist area, this can be edited.
+*/
+
+// Native imports
+import { useEffect, useState } from "react"
+
+// 3rd Party Imports
+import { ActionIcon, Button, Checkbox, Modal, Tooltip } from "@mantine/core"
+
+// Local Imports
+import EditCheckList from "./checkListEdit.jsx"
+
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../../tailwind.config.js"
+import { IconCheckbox, IconEdit, IconTrashX } from "@tabler/icons-react"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
+export default function CheckListArea({
+  name,
+  items,
+  saveItems,
+  deleteChecklist,
+  setName,
+}) {
+  const [showDeleteModal, setDeleteModal] = useState(false)
+  const [editCheckListModal, setEditCheckListModal] = useState(false)
+  const [checkListName, setChecklistName] = useState(name)
+  const [checkBoxList, setCheckboxList] = useState(items)
+  const [checkBoxListString, setCheckboxListString] = useState(
+    generateCheckboxListString(),
+  )
+  const [mappedItems, setMappedItems] = useState(generateMappedItems())
+  const [lastToggleCheck, setLastToggleCheck] = useState(false) // false = uncheck, true = check
+
+  function generateCheckboxListString(set = false) {
+    // Go from list to string, returns0
+    var final = "<ul>"
+    checkBoxList.map((element) => {
+      final += "<li><p>" + element.name + "</p></li>"
+    })
+
+    final += "</ul>"
+    if (set) {
+      setCheckboxListString(final)
+    }
+
+    return final
+  }
+
+  function generateCheckboxList(defaultCheck = false) {
+    // Go from string to list, does not return
+    console.log(checkBoxListString)
+    var final = []
+    checkBoxListString
+      .split("<li><p>")
+      .splice(1)
+      .map((element) => {
+        var text = element.split("</p>")[0].trim()
+        if (text !== "") {
+          final.push({
+            checked: defaultCheck,
+            name: element.split("</p>")[0].trim(),
+          })
+        }
+      })
+    setCheckboxList(final)
+  }
+
+  function toggleCheck() {
+    generateCheckboxList(lastToggleCheck)
+    setLastToggleCheck(!lastToggleCheck)
+  }
+
+  function setChecked(name, value) {
+    var final = []
+    checkBoxListString
+      .split("<li><p>")
+      .splice(1)
+      .map((element) => {
+        var elementName = element.split("</p>")[0].trim()
+        final.push({
+          checked:
+            elementName == name
+              ? value
+              : checkBoxList.find((e) => e.name == elementName).checked,
+          name: elementName,
+        })
+      })
+    setCheckboxList(final)
+  }
+
+  function generateMappedItems() {
+    return checkBoxList.map((element) => {
+      return (
+        <Checkbox
+          checked={element.checked}
+          key={element.name}
+          label={element.name}
+          onChange={() => setChecked(element.name, !element.checked)}
+        />
+      )
+    })
+  }
+
+  useEffect(() => {
+    setMappedItems(generateMappedItems())
+    saveItems(checkBoxList)
+  }, [checkBoxList])
+
+  return (
+    <>
+      {/* Checkbox area */}
+      <div className="flex flex-col gap-2">
+        <div className="flex w-full justify-between pb-2">
+          <div className="flex gap-1">
+            <Tooltip label="Toggle all checked/unchecked">
+              <ActionIcon
+                variant="light"
+                radius="md"
+                onClick={() => toggleCheck()}
+              >
+                <IconCheckbox
+                  style={{ width: "70%", height: "70%" }}
+                  stroke={1.5}
+                />
+              </ActionIcon>
+            </Tooltip>
+            <Tooltip label="Edit list">
+              <ActionIcon
+                variant="light"
+                radius="md"
+                onClick={() => setEditCheckListModal(true)}
+              >
+                <IconEdit
+                  style={{ width: "70%", height: "70%" }}
+                  stroke={1.5}
+                />
+              </ActionIcon>
+            </Tooltip>
+          </div>
+
+          <Tooltip label="Delete list">
+            <ActionIcon
+              variant="light"
+              color="red"
+              radius="md"
+              onClick={() => setDeleteModal(true)}
+            >
+              <IconTrashX
+                style={{ width: "70%", height: "70%" }}
+                stroke={1.5}
+              />
+            </ActionIcon>
+          </Tooltip>
+        </div>
+
+        {mappedItems}
+      </div>
+
+      {/* Edit mode */}
+      <EditCheckList
+        opened={editCheckListModal}
+        close={() => setEditCheckListModal(false)}
+        nameSet={[checkListName, setChecklistName, (e) => setName(e)]}
+        checkListSet={[checkBoxListString, setCheckboxListString]}
+        generateCheckboxListString={generateCheckboxListString}
+        generateCheckboxList={generateCheckboxList}
+      />
+
+      {/* Generic "are you sure" modal */}
+      <Modal
+        opened={showDeleteModal}
+        onClose={() => setDeleteModal(false)}
+        title="Are you sure you want to delete this checklist?"
+        centered
+        styles={{
+          content: {
+            borderRadius: "0.5rem",
+          },
+        }}
+        withCloseButton={false}
+      >
+        <div className="flex w-full justify-between pt-4">
+          <Button
+            color={tailwindColors.red[600]}
+            onClick={() => setDeleteModal(false)}
+          >
+            No, cancel
+          </Button>
+          <Button
+            color={tailwindColors.green[600]}
+            onClick={() => deleteChecklist()}
+            data-autofocus
+          >
+            Yes, Continue
+          </Button>
+        </div>
+      </Modal>
+    </>
+  )
+}

gcs/src/components/dashboard/preFlightChecklist/checkListEdit.jsx

@@ -0,0 +1,136 @@
+/*
+  The modal to edit a checklist
+*/
+
+// 3rd Party Imports
+import { Button, Modal, TextInput } from "@mantine/core"
+import { useEditor } from "@tiptap/react"
+import BulletList from "@tiptap/extension-bullet-list"
+import ListItem from "@tiptap/extension-list-item"
+import { RichTextEditor } from "@mantine/tiptap"
+import { Node } from "@tiptap/core"
+
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../../tailwind.config.js"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
+export default function EditCheckList({
+  opened,
+  close,
+  nameSet,
+  checkListSet,
+  generateCheckboxListString,
+  generateCheckboxList,
+}) {
+  const [name, setName, finaliseName] = nameSet // Finalise changes it in the selected accordion (ik annoying...)
+  const [checkboxList, setCheckboxList] = checkListSet
+
+  const Document = Node.create({
+    name: "doc",
+    topNode: true,
+    content: "list+",
+  })
+
+  const Paragraph = Node.create({
+    name: "paragraph",
+    group: "block",
+    content: "inline*",
+    parseHTML() {
+      return [{ tag: "p" }]
+    },
+    renderHTML({ HTMLAttributes }) {
+      return ["p", HTMLAttributes, 0]
+    },
+  })
+
+  const Text = Node.create({
+    name: "text",
+    group: "inline",
+  })
+
+  const editor = useEditor({
+    extensions: [Document, Text, Paragraph, BulletList, ListItem],
+    content: checkboxList,
+    onUpdate: ({ editor }) => {
+      setCheckboxList(editor.getHTML())
+    },
+    autofocus: "end",
+  })
+
+  return (
+    <Modal
+      title="Edit Checklist"
+      opened={opened}
+      onClose={() => close()}
+      styles={{
+        content: {
+          borderRadius: "0.5rem",
+        },
+      }}
+      size={"xl"}
+      centered
+    >
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          finaliseName(name)
+          generateCheckboxList()
+          close()
+        }}
+      >
+        <div className="flex flex-col gap-2">
+          {/* Inputs */}
+          <h1>Name</h1>
+          <TextInput
+            value={name}
+            onChange={(event) => setName(event.currentTarget.value)}
+          />
+
+          <div>
+            <h1>Items</h1>
+            <h2 className="text-falcongrey-300 text-sm">
+              Bullet point list of items
+            </h2>
+          </div>
+          <RichTextEditor
+            editor={editor}
+            classNames={{ content: "!list-disc" }}
+          >
+            {/* 
+              Going to keep this for future use with code blocks, no need to delete.
+              <RichTextEditor.Toolbar sticky stickyOffset={60}>
+                <RichTextEditor.ControlsGroup>
+                  <RichTextEditor.BulletList />
+                </RichTextEditor.ControlsGroup>
+              </RichTextEditor.Toolbar>
+            */}
+
+            <RichTextEditor.Content />
+          </RichTextEditor>
+
+          {/* Controls */}
+          <div className="w-full flex justify-between pt-2">
+            <Button
+              onClick={() => {
+                close()
+                generateCheckboxListString(true)
+              }}
+              variant="filled"
+              color={tailwindColors.red[600]}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="filled"
+              color={tailwindColors.green[600]}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  )
+}

gcs/src/components/dashboard/resizableInfoBox.jsx

@@ -34,7 +34,7 @@ export default function ResizableInfoBox(props) {
         }}
         className="h-full"
       >
-        <div className="@container flex flex-col px-6 py-2 h-full gap-2 overflow-x-hidden overflow-y-auto">
+        <div className="@container flex flex-col px-6 py-2 h-full gap-2 overflow-x-hidden overflow-y-auto pr-8">
           {props.children}
         </div>
       </ResizableBox>