resize functionality, pdf generation

IDLabResearch · Sep 30, 2020 · 02abb9e · 02abb9e
1 parent eb2df2b
commit 02abb9e
Show file tree

Hide file tree

Showing 11 changed files with 773 additions and 1,271 deletions.
diff --git a/package.json b/package.json
@@ -7,11 +7,13 @@
     "@inrupt/solid-react-components": "^0.5.5",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
-    "@solid/query-ldflex": "solid/query-ldflex",
+    "@react-pdf/pdfkit": "^1.5.0",
+    "@solid/query-ldflex": "^2.11.3",
     "@solid/react": "^1.10.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "blob-stream": "^0.1.3",
     "bootstrap": "^4.5.2",
     "jquery": "^3.5.1",
     "n3": "^1.6.3",

diff --git a/src/App.css b/src/App.css
@@ -71,9 +71,36 @@
 }
 
 #mainscreencontainer {
-  margin-left: 5%;
+  /* margin-left: 5%; */
 }
 
 /* button {
   font-weight: bold !important;
-} */
+} */
+
+.toolbarcolor {
+  background-color: #3f51b5;
+}
+
+header {
+  background-color: #3f51b5;
+}
+
+.sidebar {
+  overflow: hidden;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+}
+
+.sidebarcontent {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+}
+
+.active {
+  background-color: lightgray !important;
+}
+
+.nonactive{
+  background-color: none;
+}
diff --git a/src/App.js b/src/App.js
@@ -2,13 +2,14 @@ import React from 'react'
 import './App.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import { LoggedIn, LoggedOut } from '@solid/react'
+import MiniDrawer from './Components/MiniDrawer'
 import ClippedDrawer from './Components/ClippedDrawer'
 import EmptyDrawer from './Components/EmptyDrawer'
 function App () {
   return (
     <div className="App">
       <LoggedIn>
-        <ClippedDrawer></ClippedDrawer>
+        <MiniDrawer></MiniDrawer>
       </LoggedIn>
       <LoggedOut>
         <EmptyDrawer></EmptyDrawer>

diff --git a/src/Components/CertificateViewComponent.js b/src/Components/CertificateViewComponent.js
@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import { getContractData, getCertificateData } from '../util/Util'
-import { Row, Col } from 'react-bootstrap'
+import { Row, Col, Button } from 'react-bootstrap'
 import ProfileCardComponent from './ProfileCardComponent'
+import { generateCertificatePDF } from '../util/generatepdf'
 
 
 // @prefix dbo: <http://dbpedia.org/ontology/>. dbo:birthDate, dbo:birthPlace
@@ -66,6 +67,10 @@ const CertificateViewComponent = (props) => {
         <Col md={2}><label className="leftaligntext"><b>Certified on</b></label></Col>
         <Col md={10}><label className="leftaligntext">{new Date(state.certificate.certification_date).toLocaleString()}</label></Col>
       </Row>
+      <Row>
+        <Col md={4}></Col>
+        <Col md={4}><Button onClick={() => generateCertificatePDF(state.proposal, state.certificate)}>Get PDF</Button></Col>
+      </Row>
     </div>
   )
 }

diff --git a/src/Components/HelpComponent.js b/src/Components/HelpComponent.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Col } from 'react-bootstrap'
+import { Row, Col } from 'react-bootstrap'
 
 
 const HelpComponent = (props) => {
@@ -12,30 +12,36 @@ const HelpComponent = (props) => {
       But I have not yet worked with the routing options for react, but that would be a nice to have
       <br />
 
-      <Row className='propertyview pageheader'>
-        <Col><b>TODOS</b></Col>
-        <Col>Complete help component</Col>
-        <Col>Finish implementation delete mariage proposal</Col>
-        <Col>Button to resend notification on pending</Col>
-        <Col>Mark notifications as read</Col>
-        <Col>Delete (read) notifications</Col>
-        <Col>Highlight hovered notification</Col>
-        <Col>Highlight active component left bar</Col>
-        <Col>Encryption and signing for accepting invitation and for certificate</Col>
-        <Col>What to do with the official? Allow it to be anyone and give input field?</Col>
-        <Col>Update civil status on certification (of both spouses, possibly via a notification)</Col>
-        <Col>Make all contracts visible for all actors involved</Col>
-        <Col>Only load notifications that were not load last time</Col>
-        <Col>Is it okay to use this demo vocabulary?</Col>
-        <Col>What to do with default storage locations?</Col>
-        <Col>Use Solid file clients to recursively create folders if a specified storage location does not yet exist?</Col>
-        <Col>More error handling for missing data fields in files</Col>
-        <Col><b>If data not yet retrieved, dont show pending!</b></Col>
-        <Col>Unify internal naming scheme: proposal and certificate</Col>
-        <Col>Provide delete proposal for intermediary steps</Col>
-        <Col>JSDoc all functions</Col>
-        <Col>convert components to have logic for data retrieval somewhere else?</Col>
+      <Row>
+
       </Row>
+
+      <div >
+        <p><b>TODOS</b></p>
+        <p>Complete help component</p>
+        <p>Button to resend notification on pending</p>
+        <p>Delete (read) notifications</p>
+        <p>Have notification actions fire on receive and not on looking at specific view</p>
+        <p>Highlight active component left bar</p>
+        <p>Make left bar subtractable</p>
+        <p>Finish implementation delete mariage proposal</p>
+        <p>Mark notifications as read</p>
+        <p>Highlight hovered notification</p>
+        <p>Encryption and signing for accepting invitation and for certificate</p>
+        <p>What to do with the official? Allow it to be anyone and give input field?</p>
+        <p>Update civil status on certification (of both spouses, possibly via a notification)</p>
+        <p>Make all contracts visible for all actors involved</p>
+        <p>Only load notifications that were not load last time</p>
+        <p>Is it okay to use this demo vocabulary?</p>
+        <p>What to do with default storage locations?</p>
+        <p>Use Solid file clients to recursively create folders if a specified storage location does not yet exist?</p>
+        <p>More error handling for missing data fields in files</p>
+        <p><b>If data not yet retrieved, dont show pending!</b></p>
+        <p>Unify internal naming scheme: proposal and certificate</p>
+        <p>Provide delete proposal for intermediary steps</p>
+        <p>JSDoc all functions</p>
+        <p>convert components to have logic for data retrieval somewhere else?</p>
+      </div>