Bump decode-uri-component from 0.2.0 to 0.2.2

package.json

@@ -9,24 +9,24 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "css-loader": "^3.4.0",
+    "css-loader": "^3.6.0",
     "mini-css-extract-plugin": "^0.8.2",
-    "node-sass": "^4.14.1",
-    "sass-loader": "^8.0.0",
-    "style-loader": "^1.0.2",
-    "ts-loader": "^6.2.1",
+    "node-sass": "^7.0",
+    "sass-loader": "^12.6",
+    "style-loader": "^3.3.0",
+    "ts-loader": "^6.2.2",
     "ts-transform-classcat": "^0.1.1",
-    "ts-transform-inferno": "^4.0.2",
-    "typescript": "^3.7.3",
-    "webpack": "^4.41.3",
-    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cli": "^3.3.10"
+    "ts-transform-inferno": "^4.0.3",
+    "typescript": "^3.9.10",
+    "webpack": "^5.7.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9"
   },
   "dependencies": {
-    "@types/qrcode": "^1.3.4",
-    "classcat": "^4.0.2",
-    "inferno": "^7.3.3",
-    "qrcode": "^1.4.4",
+    "@types/qrcode": "^1.4.2",
+    "classcat": "^4.1.0",
+    "inferno": "^7.4.11",
+    "qrcode": "^1.5.0",
     "ta-json": "^2.5.0",
     "ts-debounce": "^1.0.0",
     "webpack-merge": "^4.2.2",

src/all.tsx

@@ -1,5 +1,4 @@
 import './style.scss';
-import { JSON, JsonObject, JsonProperty } from "ta-json";
 import { render, Component } from 'inferno';
 import { PreviewSign } from './view_preview';
 import { Sign, PaperSize } from './data';
@@ -36,8 +35,7 @@ interface SignWithID {
     sign: Sign;
     id: number;
 }
-export class App extends Component {
-    state : { signs: SignWithID[], visible_signs: SignWithID[]};
+export class App extends Component<{}, { signs: SignWithID[], visible_signs: SignWithID[]}>{
 
     constructor(props: any) {
         super(props);

src/data.ts

@@ -114,13 +114,31 @@ export class SectionFreeText extends Section {
     }
 }
 
+export interface MaintenanceItem {
+    label: string,
+    interval: string,
+}
+
+export class SectionMaintenance extends Section {
+    constructor() {
+        super();
+        this.__type__ = "SectionMaintenance";
+    }
+
+    rows: MaintenanceItem[] = [];
+
+    defaultHeader(): string {
+        return "Maintenance";
+    }
+}
 export class Sections {
     allowedMaterials: SectionMaterials = new SectionMaterials();
     prohibitedMaterials: SectionMaterials = new SectionMaterials();
     safety : SectionSafety = new SectionSafety();
     cleanup: SectionCleanup = new SectionCleanup();
     quickStart: SectionFreeText = new SectionFreeText();
     outOfOrder : SectionOutOfOrder = new SectionOutOfOrder();
+    maintenance: SectionMaintenance = new SectionMaintenance();
 
     constructor() {
         this.allowedMaterials.allowed = true;

src/main.tsx

@@ -1,5 +1,5 @@
 import './style.scss';
-import { JSON, JsonObject, JsonProperty } from "ta-json";
+import { JSON } from "ta-json";
 import { render, Component } from 'inferno';
 import { PreviewSign } from './view_preview';
 import { Sign } from './data';
@@ -34,7 +34,7 @@ function SignItem({ item, onOpen }: any) {
     )
 }
 
-class SignSelector extends Component {
+class SignSelector extends Component<any, {signs: Sign[] }> {
     constructor(props: any) {
         super(props);
         this.state = { signs: [] }
@@ -94,7 +94,7 @@ class SignSelectorSmall extends SignSelector {
 // How often to save (at most). In milliseconds
 const SavingInterval = 2000;
 
-export class App extends Component {
+export class App extends Component<any, { sign: Sign | null, id: number | null }> {
     saving: boolean;
     debouncedSave = debounce(() => this.save(), SavingInterval);
 

src/style.scss

@@ -688,6 +688,48 @@ div.sign-selector {
 	}
 }
 
+.item-list-rows {
+	display: flex;
+	flex-direction: column;
+	padding-left: 5mm;
+	padding-right: 5mm;
+	padding-top: 3mm;
+	padding-bottom: 2mm;
+
+	div {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 2mm;
+
+		span {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.label {
+			flex: 2;
+		}
+
+		.interval {
+			width: 2.5cm;
+			background: #555555;
+			border-radius: 1mm;
+			height: 12mm;
+			padding: 2mm;
+			box-sizing: border-box;
+		}
+
+		.maintenance-label-space {
+			background-color:  #555555;
+			border-radius: 1mm;
+			flex: 3;
+			height: 12mm;
+			box-sizing: border-box;
+		}
+	}
+}
 .pre {
 	white-space: pre;
 }

src/view_preview.tsx

@@ -1,5 +1,5 @@
 import { render, Component, Fragment } from 'inferno';
-import { SafetyIcon, SafetyItem, Material, Access, Sign, Section, SectionOutOfOrder, SectionSafety, SectionMaterials, SectionFreeText, SectionCleanup, PaperSize } from './data';
+import { SafetyIcon, SafetyItem, Material, Access, Sign, Section, SectionOutOfOrder, SectionSafety, SectionMaterials, SectionFreeText, SectionCleanup, PaperSize, SectionMaintenance, MaintenanceItem } from './data';
 import { safetyIcon2svg, safetyIcon2name, iconCleanup, ColorClass, iconAllowedMaterial, iconProhibitedMaterial } from './view_common';
 import * as QRCode from 'qrcode';
 
@@ -61,6 +61,25 @@ const PreviewCleanupItem = (item: SafetyItem) => (
   </div>
 )
 
+const PreviewSectionMaintenance = ({section}: {section: SectionMaintenance}) => (
+  <PreviewSectionGroup
+    className="sign-maintenance"
+    name={ section.header() }>
+      <div class="item-list-rows">
+        {section.rows.map(PreviewMaintenanceItem) }
+      </div>
+  </PreviewSectionGroup>
+);
+
+
+const PreviewMaintenanceItem = (item: MaintenanceItem) => (
+  <div>
+    <span class="label">{item.label || "No description" }</span>
+    <span class="interval">{item.interval}</span>
+    <span class="maintenance-label-space">Last done</span>
+  </div>
+)
+
 const PreviewSectionCleanup = ({section}: {section: SectionCleanup}) => (
   <PreviewSectionGroup
     className="sign-cleanup"
@@ -88,7 +107,7 @@ accessMessage[Access.CourseRequired] = "You must complete a course to use this m
 accessMessage[Access.UsableByEveryone] = "All members may use this machine";
 accessMessage[Access.UsableByEveryoneCareful] = "You may use this machine if you know how to operate it and can do so safely";
 
-class CourseQRCode extends Component {
+class CourseQRCode extends Component<{ sign: Sign }, { qrData: string }> {
   state: any;
   lastQRUrl: string = null;
 
@@ -117,7 +136,9 @@ class CourseQRCode extends Component {
           }
         }
 
-        QRCode.toDataURL(url, opts).then(data => {
+        QRCode.toDataURL(url, opts, (e, data) => {
+          // Hack: required when called from constructor
+          this.state.qrData = data;
           this.setState({ qrData: data });
         });
       }
@@ -172,8 +193,7 @@ const SignOutOfOrder = ({sign}: {sign: Sign}) => {
   );
  }
 
-class PreviewSignFooter extends Component {
-  state: any;
+class PreviewSignFooter extends Component<{ sign: Sign, id: number }, { qrData: string }> {
   lastQRUrl: string = null;
 
   constructor(props: any) {
@@ -201,13 +221,17 @@ class PreviewSignFooter extends Component {
         }
       }
 
-      QRCode.toDataURL(url, opts).then(data => {
+      console.log("URL ", url);
+      QRCode.toDataURL(url, opts, (e, data) => {
+        // Hack: required when called from constructor
+        this.state.qrData = data;
         this.setState({ qrData: data });
       });
     }
   }
 
   render() {
+    console.log("Q", this.state.qrData);
     return (
       <Fragment>
         <div class="sign-footer">
@@ -256,6 +280,7 @@ function PreviewSection(section: Section, useHorizontalList: boolean) : JSX.Elem
   else if (section instanceof SectionFreeText) return PreviewSectionFreeText({ section });
   //else if (section instanceof SectionOutOfOrder) return PreviewSectionOutOfOrder({ section });
   else if (section instanceof SectionSafety) return PreviewSectionSafety({ section });
+  else if (section instanceof SectionMaintenance) return PreviewSectionMaintenance({ section });
   else if (section instanceof SectionCleanup) return PreviewSectionCleanup({ section });
   else throw new Error("Unexpected section type " + typeof(section));
 }
@@ -282,6 +307,7 @@ export const PreviewSign = ({ sign, id }: { sign: Sign, id: number }) => {
     sections.prohibitedMaterials,
     sections.quickStart,
     sections.cleanup,
+    sections.maintenance,
   ];
   return (
     <div class={"sign-root " + (sign.paperSize == PaperSize.A4 ? "a4" : "a5")}>

src/view_settings.tsx

@@ -1,5 +1,5 @@
 import { render, Component, Fragment } from 'inferno';
-import { SafetyIcon, Material, Access, Sign, Section, SectionOutOfOrder, SectionSafety, SectionMaterials, SectionFreeText, SafetyItem, SectionCleanup, CleanupItem, PaperSize } from './data';
+import { SafetyIcon, Material, Access, Sign, Section, SectionOutOfOrder, SectionSafety, SectionMaterials, SectionFreeText, SafetyItem, SectionCleanup, CleanupItem, PaperSize, SectionMaintenance, MaintenanceItem } from './data';
 import { safetyIcon2name, iconDelete, ColorClass } from './view_common';
 
 type OnChange = () => void;
@@ -48,6 +48,24 @@ const SettingsSectionFreeText = ({section, onChange}: {section: SectionFreeText,
   </SettingsSectionGroup>);
 }
 
+const SettingsSectionMaintenance = ({section, onChange}: {section: SectionMaintenance, onChange: OnChange}) => {
+    return (<SettingsSectionGroup name={section.defaultHeader()} enabled={section.enabled} onChangeEnabled={v => { section.enabled = v; onChange(); }} >
+        { section.rows.map(item => SettingsMaintenanceItem({item, onChange, onDelete: () => { removeFromArray(section.rows, item); onChange(); }})) }
+        <button onClick={ () => { section.rows.push({ label: "", interval: "Yearly" }); onChange(); }}>Add maintenance item</button>
+    </SettingsSectionGroup>)
+  }
+
+  const SettingsMaintenanceItem = ({item, onChange, onDelete} : {item: MaintenanceItem, onChange: OnChange, onDelete: ()=>void }) => {
+
+    return (
+        <div class="selection-row">
+            <input type="text" placeholder="Description" value={item.label} onInput={(e: Event) => { item.label = (e.target as HTMLInputElement).value; onChange(); }} />
+            <input type="text" placeholder="Interval" value={item.interval} onInput={(e: Event) => { item.interval = (e.target as HTMLInputElement).value; onChange(); }} />
+            <button onClick={ onDelete } tabIndex={-1}><img class="invert" src={iconDelete} /></button>
+        </div>
+    );
+};
+
 const SettingsSafetyItem = ({item, onChange, onDelete} : {item: SafetyItem, onChange: OnChange, onDelete: ()=>void }) => {
     const safetyIcons = Object.keys(SafetyIcon).map((k: any) => SafetyIcon[k] as any).filter(k => typeof k === "number") as number[];
 
@@ -148,6 +166,7 @@ function SettingsSection(section: Section, onChange: OnChange) : JSX.Element {
   //else if (section instanceof SectionOutOfOrder) return SettingsSectionOutOfOrder({ section });
   else if (section instanceof SectionSafety) return SettingsSectionSafety({ section, onChange });
   else if (section instanceof SectionCleanup) return SettingsSectionCleanup( { section, onChange });
+  else if (section instanceof SectionMaintenance) return SettingsSectionMaintenance({ section, onChange });
   else throw new Error("Unexpected section type " + typeof(section));
 }
 
@@ -170,7 +189,8 @@ export const SettingsSign = ({ sign, onChange, onSave, onDelete, autosaved }: {
     sections.prohibitedMaterials,
     sections.quickStart,
     sections.safety,
-    sections.cleanup
+    sections.cleanup,
+    sections.maintenance
   ];
   return (<Fragment>
     <SignHeader sign={sign} onChange={onChange} />

tsconfig.json

@@ -6,6 +6,7 @@
     "target": "es5",
     "jsx": "preserve",
     "allowJs": true,
+    "moduleResolution": "node",
     "experimentalDecorators": true,
     "types": [
 			"inferno"