replaced overview paragraphs with datagrid

package-lock.json

@@ -1184,6 +1184,32 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@devexpress/utils": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@devexpress/utils/-/utils-1.3.4.tgz",
+      "integrity": "sha512-qUf7lxfOw/VnU45R+EVrY5qGOOzP+mT/0g+rPExtgbn7JrDAKOXq2wtIbiyXHDAZYaZJQIzGxXSnDEF9RzUsrQ==",
+      "requires": {
+        "tslib": "2.0.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
+    },
+    "@devextreme/vdom": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@devextreme/vdom/-/vdom-1.2.1.tgz",
+      "integrity": "sha512-O2yNq9yALNkR9F29u9o/aBwluZIus5lx9WvDlpZqlNZrXIDvzO3ekmpVBEDGMmkjgUqbcjWmV/xBSSAgcXKuyQ==",
+      "requires": {
+        "inferno": "^7.4.6",
+        "inferno-compat": "^7.4.6",
+        "inferno-create-element": "^7.4.6",
+        "inferno-hydrate": "^7.4.6"
+      }
+    },
     "@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -6196,6 +6222,88 @@
         }
       }
     },
+    "devexpress-diagram": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/devexpress-diagram/-/devexpress-diagram-2.1.15.tgz",
+      "integrity": "sha512-tsas1cVkLhdtEJLqA0fvNMQB0iXSqJREY+d4q7qZWZ1Cu7JxFosKACvZpgzcqBdaYFTIr9b8GAdHr79t3lAl2A==",
+      "requires": {
+        "@devexpress/utils": "1.3",
+        "es6-object-assign": "^1.1.0"
+      }
+    },
+    "devexpress-gantt": {
+      "version": "2.1.31",
+      "resolved": "https://registry.npmjs.org/devexpress-gantt/-/devexpress-gantt-2.1.31.tgz",
+      "integrity": "sha512-SHKI9Jk/i1GzncVcQeUxhffZIgFgpjaV38CYsrKEMzIQhPZC6pwjFuXuQzi3pk4Z0a2ulPYCX53GoiUSyMGdoA==",
+      "requires": {
+        "@devexpress/utils": "1.3.2",
+        "tslib": "2.1.0"
+      },
+      "dependencies": {
+        "@devexpress/utils": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/@devexpress/utils/-/utils-1.3.2.tgz",
+          "integrity": "sha512-Ii7hpz6ItNMLKz23qQOlHom/k0e1TSnIQKCwZlKuYBwpIEBX5I/PQxvAwbdBnu5EZZSkdjnhzxl6luhl/k4LdA==",
+          "requires": {
+            "tslib": "2.0.1"
+          },
+          "dependencies": {
+            "tslib": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+              "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+            }
+          }
+        },
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
+    "devextreme": {
+      "version": "21.1.3",
+      "resolved": "https://registry.npmjs.org/devextreme/-/devextreme-21.1.3.tgz",
+      "integrity": "sha512-p2Pite6+pSSJAdPekxl5po1177MIJLePG93CsWRr1zHJhxgR1XO2q29ciW1W3Kl32sX4EYN2C49pMAZOCvu9uA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@devextreme/vdom": "1.2.1",
+        "devexpress-diagram": "2.1.15",
+        "devexpress-gantt": "2.1.31",
+        "devextreme-quill": "~1.0.0",
+        "inferno": "^7.4.6",
+        "inferno-compat": "^7.4.6",
+        "inferno-create-element": "^7.4.6",
+        "inferno-hydrate": "^7.4.6",
+        "jszip": "^2.0.0 || ^3.0.0",
+        "rrule": "2.6.6",
+        "showdown": "^1.9.1",
+        "turndown": "^7.0.0"
+      }
+    },
+    "devextreme-quill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/devextreme-quill/-/devextreme-quill-1.0.0.tgz",
+      "integrity": "sha512-eA1NZdJjG4RPLKet/rjvsP+a2J55pdQLF+4KaVRQiwuBiOgBSTN6+KDjIdryrbGNfSNnEd9YG3E3mBtTKBxW3g==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "eventemitter3": "^4.0.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0",
+        "lodash.merge": "^4.5.0",
+        "parchment": "2.0.0-dev.2",
+        "quill-delta": "4.2.2"
+      }
+    },
+    "devextreme-react": {
+      "version": "21.1.3",
+      "resolved": "https://registry.npmjs.org/devextreme-react/-/devextreme-react-21.1.3.tgz",
+      "integrity": "sha512-eflHFYo0tZwT0MAO/HZBIipeM3G1O30tJ+PxiHLrPVaKRhqpy0SCs7P8lXRul0zzfWLshYXyjfyWW5uY1Uo/oQ==",
+      "requires": {
+        "prop-types": "^15.6.1"
+      }
+    },
     "diff": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz",
@@ -6337,6 +6445,11 @@
         "domelementtype": "1"
       }
     },
+    "domino": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.6.tgz",
+      "integrity": "sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ=="
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -6676,6 +6789,11 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+    },
     "es6-promise": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
@@ -7764,6 +7882,11 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
+    },
     "fast-glob": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
@@ -9170,6 +9293,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "immer": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
@@ -9259,6 +9387,78 @@
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
     },
+    "inferno": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/inferno/-/inferno-7.4.8.tgz",
+      "integrity": "sha512-4XwGe5Kd0QkSaM/jqAQWjM0GfDLv+KujcWm5zbIow80G1tOEnZurQqhyF8u6m/HX3SnrCi+njlVdtPKDJXQiDw==",
+      "requires": {
+        "inferno-shared": "7.4.8",
+        "inferno-vnode-flags": "7.4.8",
+        "opencollective-postinstall": "^2.0.3"
+      }
+    },
+    "inferno-clone-vnode": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/inferno-clone-vnode/-/inferno-clone-vnode-7.4.8.tgz",
+      "integrity": "sha512-Un9Saio4TJ+1DFehPd7JuNDJV2Fy2aPhK5hD4zmG+JWLUIphi/nuhbwrlsCNmTTDmOsB7GrqyrXFvOUEKX4YpA==",
+      "requires": {
+        "inferno": "7.4.8"
+      }
+    },
+    "inferno-compat": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/inferno-compat/-/inferno-compat-7.4.8.tgz",
+      "integrity": "sha512-3oDoqUzWOTXw8UXwbXGyJ1VInIX/KNIH4Qq88tygbDINzKLSxQaWZDWDfn/AJK52DeG64g3v8uU+XFpLr2lqzg==",
+      "requires": {
+        "inferno": "7.4.8",
+        "inferno-clone-vnode": "7.4.8",
+        "inferno-create-class": "7.4.8",
+        "inferno-create-element": "7.4.8",
+        "inferno-extras": "7.4.8"
+      }
+    },
+    "inferno-create-class": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/inferno-create-class/-/inferno-create-class-7.4.8.tgz",
+      "integrity": "sha512-XY7LcSpfLTug+M/lz/F9XSmhmYjxhJ40xJtetIK1h81aaSvqqFAG3wuBCHqcIW0jlwPJRch8/gDxq6SB3gHCKQ==",
+      "requires": {
+        "inferno": "7.4.8"
+      }
+    },
+    "inferno-create-element": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/inferno-create-element/-/inferno-create-element-7.4.8.tgz",
+      "integrity": "sha512-hCkA+RAiqoeWlmmCrb3VIUDV+4lEeLDCI98RcB4HqzAJwjH8dMR4ZeDQO3f9crygPnmSW7r1L0Ykjf0O2oHYFQ==",
+      "requires": {
+        "inferno": "7.4.8"
+      }
+    },
+    "inferno-extras": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/inferno-extras/-/inferno-extras-7.4.8.tgz",
+      "integrity": "sha512-GEGnOECDfNLWa0g4uI35eDrknHgiXZzaB7GPucm/Gvb+QI7BMR+A9fhloqKT9DZ+9HX6C4z7gQirmUK74V1P3w==",
+      "requires": {
+        "inferno": "7.4.8"
+      }
+    },
+    "inferno-hydrate": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/inferno-hydrate/-/inferno-hydrate-7.4.8.tgz",
+      "integrity": "sha512-7dBtyPt3BmN6e4erTgtf/BtZ97StA8QFlHYEZzV7JNcIcFHwKVwISLT0zE04ZHghPrhQS0ssRm8j6T7Fdevc1A==",
+      "requires": {
+        "inferno": "7.4.8"
+      }
+    },
+    "inferno-shared": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/inferno-shared/-/inferno-shared-7.4.8.tgz",
+      "integrity": "sha512-I0jnqsBcQvGJ7hqZF3vEzspQ80evViCe8joP3snWkPXPElk9WBVGLBHX5tHwuFuXv6wW4zeVVA4kBRAs47B+NQ=="
+    },
+    "inferno-vnode-flags": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/inferno-vnode-flags/-/inferno-vnode-flags-7.4.8.tgz",
+      "integrity": "sha512-wOUeO7Aho8VH+s2V2K/53KwS0DtQFgT7TdzPE/s6P26ZIxQj+vt7oTJqzXn+xjRIjnfkTLm2eQ8qfInOWCu1rw=="
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -11493,6 +11693,41 @@
         "object.assign": "^4.1.2"
       }
     },
+    "jszip": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.6.0.tgz",
+      "integrity": "sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==",
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "set-immediate-shim": "~1.0.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "keyv": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.3.tgz",
@@ -11599,6 +11834,14 @@
         "type-check": "~0.4.0"
       }
     },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -11668,6 +11911,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -11688,6 +11936,11 @@
       "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
       "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -11698,6 +11951,11 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -11825,6 +12083,12 @@
       "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz",
       "integrity": "sha1-tcg1G5Rky9dQM1p5ZQoOwOVhGN0="
     },
+    "luxon": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.27.0.tgz",
+      "integrity": "sha512-VKsFsPggTA0DvnxtJdiExAucKdAnwbCCNlMM5ENvHlxubqWd0xhZcdb4XgZ7QFNhaRhilXCFxHuoObP5BNA4PA==",
+      "optional": true
+    },
     "lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -13024,6 +13288,11 @@
         "is-wsl": "^2.1.1"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
@@ -13187,6 +13456,11 @@
         }
       }
     },
+    "parchment": {
+      "version": "2.0.0-dev.2",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-2.0.0-dev.2.tgz",
+      "integrity": "sha512-4fgRny4pPISoML08Zp7poi52Dff3E2G1ORTi2D/acJ/RiROdDAMDB6VcQNfBcmehrX5Wixp6dxh6JjLyE5yUNQ=="
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -14829,6 +15103,16 @@
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
       "optional": true
     },
+    "quill-delta": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-4.2.2.tgz",
+      "integrity": "sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==",
+      "requires": {
+        "fast-diff": "1.2.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0"
+      }
+    },
     "raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -15485,11 +15769,6 @@
         "prop-types": "^15.6.2"
       }
     },
-    "reactjs-popup": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.4.tgz",
-      "integrity": "sha512-G5jTXL2JkClKAYAdqedf+K9QvbNsFWvdbrXW1/vWiyanuCU/d7DtQzQux+uKOz2HeNVRsFQHvs7abs0Z7VLAhg=="
-    },
     "reactstrap": {
       "version": "8.9.0",
       "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-8.9.0.tgz",
@@ -16988,6 +17267,15 @@
         }
       }
     },
+    "rrule": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/rrule/-/rrule-2.6.6.tgz",
+      "integrity": "sha512-h6tb/hRo9SNv8xKjcvsEfdmhXvElMXsU3Yz0KmqMehUqxP6a4Qjmth2EuL1FsjdawADjajLS0eBbWfsZzn3SIw==",
+      "requires": {
+        "luxon": "^1.21.3",
+        "tslib": "^1.10.0"
+      }
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -17352,6 +17640,11 @@
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
+    "set-immediate-shim": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
+      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E="
+    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -17433,6 +17726,131 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "optional": true
     },
+    "showdown": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/showdown/-/showdown-1.9.1.tgz",
+      "integrity": "sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==",
+      "requires": {
+        "yargs": "^14.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "yargs": {
+          "version": "14.2.3",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
+          "integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
+          "requires": {
+            "cliui": "^5.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^15.0.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "15.0.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-15.0.1.tgz",
+          "integrity": "sha512-0OAMV2mAZQrs3FkNpDQcBk1x5HXb8X4twADss4S0Iuk+2dGnLOE/fRHrsYm542GduMveyA77OF4wrNJuanRCWw==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -18743,6 +19161,14 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "turndown": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/turndown/-/turndown-7.0.0.tgz",
+      "integrity": "sha512-G1FfxfR0mUNMeGjszLYl3kxtopC4O9DRRiMlMDDVHvU1jaBkGFg4qxIyjIk2aiKLHyDyZvZyu4qBO2guuYBy3Q==",
+      "requires": {
+        "domino": "^2.1.6"
+      }
+    },
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",

package.json

@@ -8,6 +8,8 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
     "bootstrap": "^4.6.0",
+    "devextreme": "^21.1.3",
+    "devextreme-react": "^21.1.3",
     "jquery": "^3.6.0",
     "popper": "^1.0.1",
     "react": "^17.0.2",
@@ -18,7 +20,6 @@
     "react-pro-sidebar": "^0.6.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "reactjs-popup": "^2.0.4",
     "react-snap": "^1.23.0",
     "reactstrap": "^8.9.0",
     "web-vitals": "^1.1.1"

src/Addition.js

@@ -5,6 +5,9 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
+
+import DataGrid, {Column} from 'devextreme-react/data-grid';
+
 import "./App.css";
 let imdtRes;
 let imdtResIdx;
@@ -12,19 +15,27 @@ let resArr = [];
 
 function Addition() {
   const [input, setInput] = useState(""); // initial user input like 34+56.7
-  const [result, setResult] = useState(0); // real result of calculation
+  const [realResult, setRealResult] = useState(0); // real result of calculation
   const [carryArr, setCarryArr] = useState([]); // array of carries [1","0"]
   const [commaIdx, setCommaIdx] = useState(0); // int: comma position
   const [numbers, setNumbers] = useState(0); // array of arrays with input numbers
   const [showAlert, setShowAlert] = useState(false);
+  const [numbersGrid, setNumbersGrid] = useState([{id: 1, number: ""}]);
+  const [resultsGrid, setResultsGrid] = useState([{id: 1, number: ""}]);
+
+  // focus the input field
+  let calculationInput = useRef(null);
+  useEffect(()=>{
+    if(calculationInput.current && calculationInput.current.value === ""){
+      calculationInput.current.focus();
+    }
+  },[])
 
   const handleInput = (e) => {
     setInput(e.target.value);
-    // TODO: reset results, etc.
   }
 
   const handleResChange = (e, nosLeft) => {
-
     if(typeof e === "string"){
       imdtRes = e;
       let carryArrCopy = [...carryArr]
@@ -35,30 +46,11 @@ function Addition() {
     }
 
     if(imdtRes === ""){
-      console.log(resArr, resArr.length)
-      let no = resArr.shift();
-      console.log(resArr, "n", no);
+      resArr.shift();
     }else{
-
-    resArr.unshift(imdtRes);
-
+      resArr.unshift(imdtRes);
       if(nosLeft === 0){
-        console.log("set true")
         setShowAlert(true);
-
-//      addResultToDiv(resArr);
-
-
-        let resCalc = resArr.join("");
-        resCalc = parseFloat(resCalc);
-
-//      if(resCalc === result){
-//        alert("success")
-//        resCalc = 0;
-//      }else{
-//        alert("error")
-//        resCalc = 0;
-//      }
       }
     }
   }
@@ -73,7 +65,6 @@ function Addition() {
   }
 
   const handleSubmit = (e) => {
-    // setInput("1,3+22,450");
     startCalculation();
     e.preventDefault(); // avoid page reload
   }
@@ -87,24 +78,10 @@ function Addition() {
   }
 
   const addNumbersToDiv = (numbers, noOfDigits) => {
-    for (let idx in numbers){
-      let no = numbers[idx].join("")
-      if(idx===numbers.length-1){
-        no = "+ " + no
-      }
-      let pNo = "<p>" + no + "</p>"
-      document.getElementById("overview").innerHTML += pNo;
-    }
-    document.getElementById("overview").innerHTML += carryArr.join("");
-    document.getElementById("overview").innerHTML += "<hr>";
-  }
-
-  const addResultToDiv = () => {
-    let res = "<p>" + resArr.join("") + "</p>"
-    document.getElementById("overview").innerHTML += res;
+    console.log("---", carryArr.join(""))
+//    document.getElementById("overview").innerHTML += carryArr.join("");
   }
 
-
   function numbersToArrOfArr(numbers) {
     let befComma = Math.max(...numbers).toString().split(".")[0].length;
     let afterComma = Math.max(...numbers.map(x => afterCommaLen(x)));
@@ -140,25 +117,27 @@ function Addition() {
       }
       numArr.unshift("&nbsp;"); // for carry
     }
-
-    document.getElementById("overview").innerHTML = "";
     setNumbers(numbersArr);
-    setCommaIdx(befComma+1);
-    addNumbersToDiv(numbersArr, arrLength);
-
-    // TODO: assert all have same length and comma at same index?
 
-    return [numbersArr, befComma]
+    const nrGrid = []
+    for (let noIdx in numbersArr){
+      let nr = numbersArr[noIdx].join("").replace(/&nbsp;/g, " ");
+      if (noIdx == numbersArr.length-1){
+        nr = "+ " + nr;
+      }
+      nrGrid.push({id: parseInt(noIdx)+3, number: nr});
+    }
+    setNumbersGrid(nrGrid);
+    setCommaIdx(befComma+1);
+    return [numbersArr, arrLength]
   }
 
-
-
   const startCalculation = () => {
     if (input.includes("+")){
       let numbers = input.split("+").map(x => parseFloat(x.replace(",",".")));
-      let commaIdx = -1;
-      setResult(numbers.reduce((x,y) => x+y, 0));
-      [numbers, commaIdx] = numbersToArrOfArr(numbers);
+      setRealResult(numbers.reduce((x,y) => x+y, 0));
+      let [numbersArr, arrLength] = numbersToArrOfArr(numbers);
+      addNumbersToDiv(numbersArr, arrLength);
     }
   }
 
@@ -173,9 +152,8 @@ function Addition() {
       }
     },[])
 
-
     let labelText = "";
-    let nosLeft = imdtResIdx;
+    let nosLeft = imdtResIdx + 1;
     let noOfDigits = 0;
     let carryText = "Übertrag = ";
 
@@ -184,23 +162,24 @@ function Addition() {
         noOfDigits = Math.min(...numbers.map(n => n.length));
         imdtResIdx = noOfDigits-1;
       }
-
       if(imdtResIdx === commaIdx){
         handleResChange(".", nosLeft)
         imdtResIdx = imdtResIdx - 1;
       }
+
       for (let n in numbers){ // iterate numbers
-        if(nosLeft === 1 && carryArr[1] === "0"){
+
+        if(nosLeft === 1 && carryArr[0] === "0"){
           nosLeft = 0;
           imdtResIdx = -1;
           handleResChange("&nbsp;", 0)
           return <></>
         }
-        let no = numbers[parseInt(n)][imdtResIdx];
-        if(no === "" || no === "&nbsp;"){
-          no = 0;
+        let digit = numbers[parseInt(n)][imdtResIdx];
+        if(digit === "" || digit === "&nbsp;"){
+          digit = 0;
         }
-        labelText += no;
+        labelText += digit;
 
         if (parseInt(n) === numbers.length - 1){
           if(carryArr[imdtResIdx+1]!=="undefind" && carryArr[imdtResIdx+1] > 0){
@@ -212,7 +191,7 @@ function Addition() {
         }
       }
 
-      if(carryArr[imdtResIdx] > -1){
+      if(carryArr[imdtResIdx] > -1 || imdtResIdx === noOfDigits-1){
         imdtRes = -1;
         imdtResIdx = imdtResIdx - 1;
         nosLeft = nosLeft - 1;
@@ -247,10 +226,9 @@ function Addition() {
     }
   }
 
-
   const showIdmtResults = () => {
     setShowAlert(false);
-    let realResArr = result.toString().split("");
+    let realResArr = realResult.toString().split("");
     while(realResArr.length < resArr.length){
       realResArr.unshift("&nbsp;"); // add " " before
     }
@@ -331,18 +309,28 @@ function Addition() {
     console.log("clicked at " + idx)
   }
 
-
-
-  const handleClose = () => {
+  const finishCalculation = () => {
     setShowAlert(false);
-  };
+    let resCalc = resArr.filter(n => n !== "&nbsp;").join("")
+    setResultsGrid([{number: resCalc}]);
+    resCalc = parseFloat(resCalc);
+
+    let message = ""
+    if(resCalc === realResult){
+      message = "Richtig!"
+    }else{
+      message = "Das ist leider falsch."
+    }
+    message = "<p>" + message + "</p>"
+    document.getElementById("finishCalculation").innerHTML = message
+  }
 
   const Alert = () => {
     return(
     <div>
       <Dialog
         open={showAlert}
-        onClose={handleClose}
+        onClose={finishCalculation}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
       >
@@ -358,7 +346,7 @@ function Addition() {
           <Button onClick={showIdmtResults} color="primary" autoFocus>
             Prüfen
           </Button>
-          <Button onClick={handleClose} color="primary">
+          <Button onClick={finishCalculation} color="primary">
             Abgeben
           </Button>
         </DialogActions>
@@ -374,7 +362,7 @@ function Addition() {
       <h1>Addition</h1>
 
       <form onSubmit={(e) => handleSubmit(e)}>
-        <label for="calculationInput">
+        <label htmlFor="calculationInput">
           Rechnung:
         </label>
         <input
@@ -382,11 +370,33 @@ function Addition() {
           id="calculationInput"
           onChange={(e) => handleInput(e)}
           aria-label="Rechnung"
-          aria-required="true"/>
+          aria-required="true"
+          ref={calculationInput}/>
         <input type="submit" value="berechnen"/>
       </form>
 
-      <div id="overview"></div>
+      <div id="overview">
+        <DataGrid
+          dataSource={numbersGrid}
+          keyExpr="id"
+          focusedRowEnabled={true}
+          showBorders={true}
+          showColumnHeaders={false}
+        >
+          <Column dataField="number" />
+        </DataGrid>
+
+        <hr></hr>
+
+        <DataGrid
+          dataSource={resultsGrid}
+          focusedRowEnabled={true}
+          showBorders={true}
+          showColumnHeaders={false}
+        >
+          <Column dataField="number" />
+        </DataGrid>
+      </div>
 
       <div id="calculation">
         <ResultCarryForm
@@ -395,6 +405,7 @@ function Addition() {
       </div>
 
       <div id="idmtResultSteps"></div>
+      <div id="finishCalculation"></div>
 
       <Alert/>
 

src/App.css

@@ -7,6 +7,18 @@
 
 }
 
+.dx-datagrid-focus-overlay{
+  height: 0px !important;
+}
+
+td{
+  text-align: right !important;
+}
+
+hr{
+  margin: 0px !important;
+}
+
 #overview{
   font-family: monospace;
   background-color: #ccc;
@@ -15,6 +27,15 @@
   margin: auto;
   font-size: 2em;
   display: inline-block;
+  padding: 0px 7px;
+}
+
+#overview table{
+  width: 100%;
+}
+
+.dx-datagrid-focus-overlay{
+  height: auto;
 }
 
 #overview p{
@@ -28,4 +49,8 @@ footer{
 h1{
   margin-top: 0px;
   padding-top: 20px;
+}
+
+input[type="text"]{
+  margin: 7px;
 }