New templates Heat Pump installation

package.json

@@ -70,6 +70,7 @@
     "react-bootstrap": "^2.7.2",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
+    "react-pdf": "^7.3.3",
     "react-refresh": "^0.11.0",
     "react-router-bootstrap": "^0.26.2",
     "react-router-dom": "^6.12.0",
@@ -105,7 +106,7 @@
     "workbox-webpack-plugin": "^6.4.1"
   },
   "scripts": {
-    "start": "HTTPS=true node scripts/start.js",
+    "start": "HTTPS=true PORT=3006 node scripts/start.js",
     "build": "TSC_COMPILE_ON_ERROR=true node scripts/build.js",
     "test": "node scripts/test.js",
     "lint": "NODE_ENV=development BABEL_ENV=development eslint 'src/**/*.{js,jsx,ts,tsx}'",

public/print.css

@@ -132,6 +132,7 @@ h3 {
 
 #back-button {
   padding: 1rem;
+  background-color: green;
 }
 
 #back-button-link {
@@ -175,4 +176,32 @@ h3 {
 /* stylizes tab component here to avoid putting styles in editor*/
 .tab-content {
   margin-top: 1rem;
-}
+}
+
+/* custom label style */
+.custom-label {
+  color: gray;
+  font-size: .9rem;
+}
+
+/* custom button  style */
+.custom-button {
+  background-color: gray;
+  font-size: .9rem;
+  border-color: gray;
+}
+.custom-button:hover{
+  background-color: gray;
+  border-color: gray;
+  color: black
+}
+.form-text{
+  margin-left:.50em;
+  margin-top:.25rem;
+  font-size:.875em;
+  color:var(--bs-secondary-color);
+  font-style: italic;
+}
+.react-pdf__Page__textContent{
+    display: none;
+  }

src/App.css

@@ -132,6 +132,7 @@ h3 {
 
 #back-button {
   padding: 1rem;
+  background-color: green;
 }
 
 #back-button-link {
@@ -175,4 +176,32 @@ h3 {
 /* stylizes tab component here to avoid putting styles in editor*/
 .tab-content {
   margin-top: 1rem;
-}
+}
+
+/* custom label style */
+.custom-label {
+  color: gray;
+  font-size: .9rem;
+}
+
+/* custom button  style */
+.custom-button {
+  background-color: gray;
+  font-size: .9rem;
+  border-color: gray;
+}
+.custom-button:hover{
+  background-color: gray;
+  border-color: gray;
+  color: black
+}
+.form-text{
+  margin-left:.50em;
+  margin-top:.25rem;
+  font-size:.875em;
+  color:var(--bs-secondary-color);
+  font-style: italic;
+}
+.react-pdf__Page__textContent{
+    display: none;
+  }

src/components/file_input.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useRef, useState } from 'react'
+import type { ChangeEvent, FC, MouseEvent } from 'react'
+import { Button, Card, Image } from 'react-bootstrap'
+import Collapsible from './collapsible'
+import type FileMetadata from '../types/file_metadata.types'
+import DateTimeStr from './date_time_str'
+
+interface FileInputProps {
+    children: React.ReactNode
+    label: string
+    metadata: FileMetadata
+    file: Blob | undefined
+    upsertFile: (file: Blob, fileName: string) => void
+}
+
+/**
+ * Component for File input
+ *
+ * @param children Content (most commonly markdown text) describing the File requirement
+ * @param label Label for the File requirement
+ * @param file Blob containing the File itself
+ * @param upsertFile Function used to update/insert a file into the store
+ */
+const FileInput: FC<FileInputProps> = ({
+    children,
+    label,
+    file,
+    metadata,
+    upsertFile,
+}) => {
+    // Create references to the hidden file inputs
+    const hiddenFileUploadInputRef = useRef<HTMLInputElement>(null)
+
+    const handleFileInputButtonClick = (
+        event: MouseEvent<HTMLButtonElement>,
+    ) => {
+        hiddenFileUploadInputRef.current &&
+            hiddenFileUploadInputRef.current.click()
+    }
+
+    const handleFileInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files) {
+            const file = event.target.files[0]
+            const fileName = file.name
+            upsertFile(file, fileName)
+        }
+    }
+
+    // Button text based on whether there is a File or not
+    const buttonText = !file ? 'Add File' : 'Replace File'
+
+    return (
+        <>
+            <Card className="input-card">
+                <Card.Body>
+                    <label className="custom-label"> {label} </label>
+                    <Card.Text as="div" className="custom-label">
+                        {children}
+                    </Card.Text>
+                    <div>
+                        {file && (
+                            <>
+                                <Card className="input-card">
+                                    <Card.Body>
+                                        File Name:{' '}
+                                        <a
+                                            href={URL.createObjectURL(file)}
+                                            target="_blank"
+                                        >
+                                            {metadata?.filename}
+                                        </a>
+                                        <br />
+                                        <small>
+                                            Timestamp:&npsp;
+                                            {metadata?.timestamp ? (
+                                                <DateTimeStr
+                                                    date={metadata.timestamp}
+                                                />
+                                            ) : (
+                                                ''
+                                            )}
+                                        </small>
+                                        <br />
+                                    </Card.Body>
+                                </Card>
+                            </>
+                        )}
+                        <Button
+                            onClick={handleFileInputButtonClick}
+                            variant="outline-primary"
+                        >
+                            {buttonText}
+                        </Button>
+                    </div>
+
+                    <input
+                        accept="application/pdf"
+                        onChange={handleFileInputChange}
+                        ref={hiddenFileUploadInputRef}
+                        className="photo-upload-input"
+                        type="file"
+                    />
+                </Card.Body>
+            </Card>
+        </>
+    )
+}
+
+export default FileInput

src/components/file_input_wrapper.tsx

@@ -0,0 +1,44 @@
+import React, { FC } from 'react'
+import { StoreContext } from './store'
+import FileInput from './file_input'
+
+interface FileInputWrapperProps {
+    children: React.ReactNode
+    id: string
+    label: string
+}
+
+/**
+ * A component that wraps a FileInput component in order to tie it to the data store
+ *
+ * @param children Content (most commonly markdown text) to be passed on as the FileInput children
+ * @param id An identifier for the store attachment that represents the information of the file
+ * @param label The label of the PhotoInput component
+ */
+const FileInputWrapper: FC<FileInputWrapperProps> = ({
+    children,
+    id,
+    label,
+}) => {
+    return (
+        <StoreContext.Consumer>
+            {({ attachments, upsertAttachment }) => {
+                const upsertFile = (img_file: Blob, fileName: string) => {
+                    upsertAttachment(img_file, id, fileName)
+                }
+                return (
+                    <FileInput
+                        label={label}
+                        metadata={attachments[id]?.metadata}
+                        file={attachments[id]?.blob}
+                        upsertFile={upsertFile}
+                    >
+                        {children}
+                    </FileInput>
+                )
+            }}
+        </StoreContext.Consumer>
+    )
+}
+
+export default FileInputWrapper

src/components/file_renderer.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import type { FC } from 'react'
+import type FileMetadata from '../types/file_metadata.types'
+import { Document, Page } from 'react-pdf'
+import { pdfjs } from 'react-pdf'
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.js',
+  import.meta.url,
+).toString();
+
+interface FileRendererProps {
+    children: React.ReactNode
+    label: string
+    metadata: FileMetadata
+    file: Blob 
+}
+
+/**
+ * Component for File input
+ *
+ * @param children Content (most commonly markdown text) describing the File requirement
+ * @param label Label for the File requirement
+ * @param file Blob containing the file itself
+ * @param upsertFile Function used to update/insert a file into the store
+ */
+const FileRenderer: FC<FileRendererProps> = ({ children, label, file, metadata }) => {
+    const [numPages, setNumPages] = useState(0);
+
+  return ( file && (
+          <div>
+            <h1>{label}: {metadata?.filename}</h1>
+            <Document file={file}
+                      onLoadSuccess={({ numPages })=>setNumPages(numPages)}
+                      renderMode="canvas">
+                        {Array.apply(null, Array(numPages))
+                        .map((x, i)=>i+1)
+                        .map(page => <Page key={page} pageNumber={page} renderTextLayer={false} renderAnnotationLayer={false} />)}
+            </Document>
+          </div>)
+  )
+}
+
+export default FileRenderer

src/components/file_renderer_wrapper.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react'
+import { StoreContext } from './store'
+import FileRenderer from './file_renderer'
+
+
+const MAX_FILE_SIZE = 5 // in MB
+
+interface FileRendererWrapperProps {
+    children: React.ReactNode
+    id: string
+    label: string
+}
+
+/**
+ * A component that wraps a FileRenderer component in order to tie it to the data store
+ *
+ * @param children Content (most commonly markdown text) to be passed on as the children
+ * @param id An identifier for the store attachment that represents the File details 
+ * @param label The label the FileRenderer component
+ */
+const FileRenderedWrapper: FC<FileRendererWrapperProps> = ({ children, id, label }) => {
+    return (
+        <StoreContext.Consumer>
+            {({ attachments, upsertAttachment }) => {
+                return (
+                    <FileRenderer
+                        children={children}
+                        label={label}
+                        metadata={attachments[id]?.metadata}
+                        file={attachments[id]?.blob}
+                    />
+                )
+            }}
+        </StoreContext.Consumer>
+    )
+}
+
+export default FileRenderedWrapper

src/components/mdx_wrapper.tsx

@@ -23,6 +23,8 @@ import PageBreak from './page_break'
 import ProjectInfoInputs from '../templates/reusable/project_info_inputs.mdx'
 import ProjectInfoReport from '../templates/reusable/project_info_report.mdx'
 import PrintSectionWrapper from './print_section wrapper'
+import FileInputWrapper from './file_input_wrapper'
+import FileRendererWrapper from './file_renderer_wrapper'
 
 const components = {
     Collapsible,
@@ -45,6 +47,8 @@ const components = {
     PageBreak: PageBreak,
     ProjectInfoInputs: ProjectInfoInputs,
     ProjectInfoReport: ProjectInfoReport,
+    FileInput: FileInputWrapper,
+    FileRenderer: FileRendererWrapper,
 }
 
 interface MdxWrapperProps {