added presentation

package.json

@@ -22,8 +22,6 @@
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^8.0.0",
     "@apidevtools/swagger-parser": "^9.0.1",
-    "@jsdevtools/ono": "^7.1.3",
-    "@szmarczak/http-timer": "^4.0.5",
     "axios": "^0.19.2",
     "basic-auth": "^2.0.1",
     "bcryptjs": "^2.4.3",

src/index.ts

@@ -55,8 +55,18 @@ app.use('/api-doc', helmet.contentSecurityPolicy({
     imgSrc: [`'self'`, 'data:']
   }
 }));
+// special CSP header for the intro-presentation
+app.use('/static/intro-presentation/index.html', helmet.contentSecurityPolicy({
+  ...defaultHeaderConfig,
+  directives: {
+    defaultSrc: [`'none'`],
+    scriptSrc: [`'self'`, `'unsafe-inline'`],
+    styleSrc: [`'self'`, `'unsafe-inline'`],
+    imgSrc: [`'self'`]
+  }
+}));
 // special CSP header for the bosch-logo.svg
-app.use('/static/img/bosch-logo.svg', helmet.contentSecurityPolicy({
+app.use('/static/*.svg', helmet.contentSecurityPolicy({
   ...defaultHeaderConfig,
   directives: {
     styleSrc: [`'unsafe-inline'`]

static/intro-presentation/assets/li.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="3.4416504mm"
+   height="3.974951mm"
+   viewBox="0 0 3.4416504 3.974951"
+   version="1.1"
+   id="svg2252"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="li.svg">
+  <defs
+     id="defs2246">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath1671">
+      <path
+         d="M 1.2871e-5,0 H 863.76001 V 485.88 H 1.2871e-5 Z"
+         id="path1669"
+         inkscape:connector-curvature="0"
+         style="clip-rule:evenodd" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="-397.78181"
+     inkscape:cy="-126.774"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="2560"
+     inkscape:window-height="1356"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata2249">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-88.237508,-111.31609)">
+    <g
+       id="g1665"
+       transform="matrix(0.35277777,0,0,-0.35277777,79.675749,244.90164)">
+      <g
+         id="g1667"
+         clip-path="url(#clipPath1671)">
+        <text
+           transform="matrix(1,0,0,-1,20.376,366.53)"
+           style="font-variant:normal;font-weight:normal;font-size:18px;font-family:'Wingdings 3';-inkscape-font-specification:Wingdings3;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           id="text1675">
+          <tspan
+             x="0"
+             y="0"
+             id="tspan1673"></tspan>
+        </text>
+      </g>
+    </g>
+  </g>
+</svg>

static/intro-presentation/assets/styles.css

@@ -0,0 +1,43 @@
+.text {
+  width: 490px;
+}
+
+.img-page > img{
+  width: 650px;
+  position: absolute;
+  bottom: 60px;
+  right: 40px;
+}
+
+.small-link {
+  font-size: 20px;
+}
+
+.go-btn {
+  text-decoration: none;
+  display: block;
+  position: absolute;
+  left: 390px;
+}
+
+.go-btn button {
+  color: #ffffff;
+  border-color: #008ecf;
+  background: linear-gradient(to bottom, #005691 0%, #005691 50%, #008ecf 50%, #008ecf 100%);
+  border-width: 1px;
+  line-height: 40px;
+  padding: 30px 60px;
+  font-size: 45px;
+  font-weight: 400;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  transition: border, background cubic-bezier(0.38, 0.04, 0.35, 0.96) 600ms;
+  background-position: 0 0;
+  background-size: 100% 200%;
+}
+
+.go-btn button:hover {
+  outline: none;
+  background-position: 0 100%;
+}

static/intro-presentation/assets/styles_global.css

@@ -0,0 +1,130 @@
+:root {
+  --red: #ea0016;
+  --dark-blue: #005691;
+  --dark-blue-w75: #bfd5e3;
+  --dark-green: #006249;
+  --dark-green-w75: #bfd8d1;
+  --turquoise: #00a8b0;
+  --turquoise-w75: #bfe9eb;
+  --fuchsia: #b90276;
+  --fuchsia-w75: #edc0dd;
+  --light-gray: #bfc0c2;
+  --light-gray-w75: #efeff0;
+  --dark-gray: #525f6b;
+  --light-green: #78be20;
+}
+
+* {
+  font-family: "Bosch Office Sans", sans-serif;
+  font-weight: normal;
+}
+
+.remark-slide-number {
+  bottom: 38px;
+  left: 28px;
+  opacity: 1;
+  color: #979ea6;
+  font-size: 18px;
+}
+
+.footer {
+  color: #000;
+  position: absolute;
+  bottom: 10px;
+  font-size: 8.5px;
+  left: 39px;
+}
+
+.intern {
+  color: #d70011;
+  font-weight: bold;
+}
+
+.title {
+  background-image: url("./title.svg");
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  color: #FFF;
+}
+
+.remark-slide-content {
+  padding: 24px 28px;
+}
+
+.title h1 {
+  font-size: 100px;
+  margin-top: 10px;
+}
+
+.title .remark-slide-number, .no-number .remark-slide-number {
+  display: none;
+}
+
+.content {
+  background-image: url("./content.svg");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.content h1, .content h2 {
+  margin: 0;
+  font-size: 40px;
+}
+
+.content div.text {
+  margin-top: 28px;
+}
+
+.content .text ul {
+  margin: 0;
+  list-style: url("./li.svg");
+  padding-left: 32px;
+}
+
+.content .text li {
+  font-size: 26px;
+  margin-bottom: 8px;
+}
+
+.content .text li > ul {
+  margin-top: 8px;
+}
+
+.content .text li > ul li {
+  font-size: 23px;
+}
+
+.iframe-wrapper {
+  overflow: hidden;
+  height: 543px;
+}
+
+iframe {
+  border: 1px solid var(--light-gray);
+  -moz-transform: scale(0.8);
+  -moz-transform-origin: 0 0;
+}
+
+.img-max {
+  display: block;
+  height: 460px;
+}
+
+.img-max > img {
+  width: 100%;
+  height: 100%;
+}
+
+/*chapter themes*/
+.theme-dark-green h2 {
+  color: var(--dark-green);
+}
+
+.theme-turquoise h2 {
+  color: var(--turquoise);
+}
+
+.theme-dark-blue h2 {
+  color: var(--dark-blue);
+}

static/intro-presentation/index.html

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>DeFinMaDB - Introduction</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="assets/styles_global.css">
+  <link rel="stylesheet" type="text/css" href="assets/styles.css">
+</head>
+<body>
+
+<textarea id="source">[//]: # (Title: DeFinMaDB - Introduction)
+[//]: # (Date: 2020/08/07)
+
+class: title
+
+# DeFinMaDB - Introduction
+
+---
+
+class: content, theme-dark-green
+layout: true
+
+# General
+
+---
+
+## Information
+
+.text[
+- The database frontend is located at .small-link[[https://definma.apps.de1.bosch-iot-cloud.com](https://definma.apps.de1.bosch-iot-cloud.com)]
+- User accounts can only be created by admins. The initial password is either given to you or can be retrieved by using the _Forgot password_ function
+- Please report all bugs using the dedicated button at the top and sending the generated email
+
+.img-page[![](assets/login.svg)]
+]
+
+---
+
+## Settings
+
+.text[
+- User settings and logout can be found by clicking on the top left avatar icon
+- User credentials are stored so re-login should not be necessary for every session
+
+.img-page[![](assets/settings.svg)]
+]
+
+---
+
+## Documentation
+
+.text[
+- Find important background information as well as further resources of the whole project
+- You can also rewatch this presentation in the documentation tab
+
+.img-page[![](assets/documentation.svg)]
+]
+
+---
+
+class: content, theme-turquoise
+layout: true
+
+# Samples
+
+---
+
+## Samples
+
+.text[
+- Samples are listed in pages
+- Using the arrows next to the table headers, samples can be sorted
+- Sample details can be invoked  by clicking on the sample row
+
+.img-page[![](assets/samples.svg)]
+]
+
+---
+
+## Sample details
+
+.text[
+- All information regarding the sample
+- click outside the dialog to close it
+
+.img-page[![](assets/sample-details.svg)]
+]
+
+---
+
+## Sample filters
+
+.text[
+- The filters dialog can be expanded to reveal all settings
+- The sample fields to be displayed can be selected
+- Filters can be applied to the current view
+
+.img-page[![](assets/sample-filters.svg)]
+]
+
+---
+
+## Download samples
+
+.text[
+- Users with dev and admin level can download the current view in CSV or JSON format
+
+.img-page[![](assets/sample-download.svg)]
+]
+
+---
+
+## Download samples
+
+.text[
+- Users with dev and admin level can download the current view in CSV or JSON format
+- In JSON format spectra can be included by using the checkbox
+
+.img-page[![](assets/sample-download-json.svg)]
+]
+
+---
+
+## Edit and validate samples
+
+.text[
+- The samples can be edited by clicking on the pencil symbol
+- For deleted samples there will be a symbol to restore the sample
+- Users with dev and admin level can enter validation mode using the top left button
+- The samples to validate can be selected, and the selection is confirmed by clicking the _Validate_ button again 
+
+.img-page[![](assets/sample-validate.svg)]
+]
+
+---
+
+## Add samples
+
+.text[
+- When adding a new sample, a material can be selected from the list, or a new material can be entered
+- Further, sample properties can be entered accordingly
+
+.img-page[![](assets/sample-new-a.svg)]
+]
+
+---
+
+## Add samples
+
+.text[
+- Other samples can be referenced
+- Additional properties can be entered in an ordered format, allowing for better processing of these values than in the comment field. Therefore, this feature should be used preferably
+- Multiple samples can be created using the entered base information
+
+.img-page[![](assets/sample-new-b.svg)]
+]
+
+---
+
+## Add samples
+
+.text[
+- After generation an overview is displayed
+
+.img-page[![](assets/sample-new-c.svg)]
+]
+
+---
+
+## Add samples
+
+.text[
+- After generation an overview is displayed
+- Followed by the generated sample numbers
+- For each generated sample condition and measurements can be entered individually
+
+.img-page[![](assets/sample-new-d.svg)]
+]
+
+---
+
+## Add samples
+
+.text[
+- A condition can be selected from the given list
+- The input is automatically validated
+
+.img-page[![](assets/sample-new-e.svg)]
+]
+
+---
+
+## Add samples
+
+.text[
+- Multiple measurements can be added or deleted
+- You can upload multiple spectrum files into one measurement. They are expanded into multiple measurements automatically.
+- When all available values are entered, the samples can be saved.
+
+.img-page[![](assets/sample-new-f.svg)]
+]
+
+---
+
+class: content, theme-dark-blue
+layout: true
+
+# Dev/admin dialogs
+
+---
+
+## Templates
+
+.text[
+- Dev and admin users can add and edit the templates for materials, conditions and measurements.
+- Templates are versioned to ensure integrity with existing data
+
+.img-page[![](assets/templates.svg)]
+]
+
+---
+
+## Edit template
+
+.text[
+- The templates can be edited and properties can be added or removed
+- The range is specified in JSON and can add the following properties for validation:
+  - _min_ of a number
+  - _max_ of a number
+  - _values_ for a set of allowed values
+  - _type: 'array'_ for spectra upload
+
+.img-page[![](assets/template-edit.svg)]
+]
+
+---
+
+## Users
+
+.text[
+- Admins can add new users and edit user details (except passwords)
+
+.img-page[![](assets/users.svg)]
+]
+
+---
+
+class: content, theme-dark-green
+layout: true
+
+# Thats all
+
+---
+
+## Got everything?
+
+.text[
+<br><br><br><br><a href="https://definma.apps.de1.bosch-iot-cloud.com" class="go-btn"><button>Great! Lets Go!</button></a><br><br><br><br><br><br><br><br><br>
+
+- Otherwise drop a message
+  - [lukas.veit@bosch.com](mailto:lukas.veit@bosch.com?subject=Question regarding DeFinMaDB)
+]</textarea>
+
+<script src="assets/remark-latest.min.js">
+</script>
+<script>
+  var slideshow = remark.create({
+    ratio: '16:9',
+    slideNumberFormat: '%current% <div class="footer"><span class="intern">Intern</span>| CR/APS1 | 2020/08/07</div>',
+    countIncrementalSlides: false
+  });
+</script>
+</body>
+</html>