safet.purkovic
/
PDFEngineDemoUI
Beobachten 1
Favorisieren 0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

Merge branch 'master' of http://176.104.105.124:3000/safet.purkovic/PDFEngineDemoUI

master
Safet Purkovic vor 4 Jahren
Ursprung
0f6d42ad05 91bfd0d23e
Commit
bc4529d62c
1 geänderte Dateien mit 364 neuen und 347 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 364
    347
      src/views/demoComponent/DemoComponent1.js

+ 364
- 347
src/views/demoComponent/DemoComponent1.js Datei anzeigen

@@ -1,4 +1,4 @@
import React, { lazy } from 'react';
import React, { lazy, useEffect, useState } from 'react';
import {
CBadge,
CButton,
@@ -13,57 +13,38 @@ import {
CCallout
} from '@coreui/react';
import CIcon from '@coreui/icons-react';
import {PDFEngine} from 'PDFEngine';
import { PDFEngine } from 'PDFEngine';

import MainChartExample from '../charts/MainChartExample.js';
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent1 = () => {

const list = [{ name: "Four Cards" }, { name: "Chart1" }, { name: "Chart1 Buttons" }, { name: "Chart1 Legend" }, { name: "Chart2" }, { name: "Table" }];
const [checkedState, setCheckedState] = useState(
new Array(list.length).fill(false)
);
const exec = () => {
const pdf = new PDFEngine();
pdf.execute();
// window.print();
}
// const apiCall = () => {

// const url = encodeURIComponent("http://localhost:3000/#/DemoComponent2");
// const dateNow = new Date();
// fetch('https://localhost:7285/api/PDFGenerator/' + url)
// .then(async res => ({
// filename: "John Doe - " + dateNow +" - report.pdf",
// blob: await res.blob()
// }))
// .then(resObj => {
// // It is necessary to create a new blob object with mime-type explicitly set for all browsers except Chrome, but it works for Chrome too.
// const newBlob = new Blob([resObj.blob], { type: 'application/pdf' });
// //const bytes = new Uint8Array(newBlob);
// //console.log(bytes);
// //modifyPdf(bytes);
// // MS Edge and IE don't allow using a blob object directly as link href, instead it is necessary to use msSaveOrOpenBlob
// if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// window.navigator.msSaveOrOpenBlob(newBlob);
// } else {
// // For other browsers: create a link pointing to the ObjectURL containing the blob.
// const objUrl = window.URL.createObjectURL(newBlob);

// let link = document.createElement('a');
// link.href = objUrl;
// link.download = resObj.filename;
// link.click();
const handleOnChange = (position) => {
const updatedCheckedState = [...checkedState];
if (checkedState[position] === false) {
updatedCheckedState[position] = true;
} else {
updatedCheckedState[position] = false;
}
setCheckedState(updatedCheckedState);
};

// // For Firefox it is necessary to delay revoking the ObjectURL.
// setTimeout(() => { window.URL.revokeObjectURL(objUrl); }, 250);
// }
// })
// .catch((error) => {
// console.log('DOWNLOAD ERROR', error);
// });
// }
return (
<>
<div code="br-hide">
<div style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
<div style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '250px', backgroundColor: 'white', padding: '5px', borderRadius: '10px' }}>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4>
@@ -73,6 +54,29 @@ const DemoComponent1 = () => {
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
<p style={{paddingTop: "5px", fontWeight: "bold"}}>Select Elements to hide</p>
<ul>
{list.map(({ name }, index) => {
return (
<li key={index} style={{ listStyleType: 'none' }}>
<div >
<div >
<input
style={{ margin: "5px", transform: "scale(1.5)" }}
type="checkbox"
id={`custom-checkbox-${index}`}
name={name}
value={name}
checked={checkedState[index]}
onChange={() => handleOnChange(index)}
/>
<label htmlFor={`custom-checkbox-${index}`}>{name}</label>
</div>
</div>
</li>
);
})}
</ul>
</div>
</div>
</div>
@@ -80,93 +84,105 @@ const DemoComponent1 = () => {
1
<br />
<br />
<WidgetsDropdown />
<CCard>
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" className="card-title mb-0">Traffic</h4>
<div className="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" className="d-none d-md-block">
<CButton color="primary" className="float-right">
<CIcon name="cil-cloud-download" />
</CButton>
<CButtonGroup className="float-right mr-3">
{
['Day', 'Month', 'Year'].map(value => (
<CButton
color="outline-secondary"
key={value}
className="mx-0"
active={value === 'Month'}
>
{value}
</CButton>
))
}
</CButtonGroup>
</CCol>
</CRow>
<MainChartExample style={{ height: '300px', marginTop: '40px' }} />
</CCardBody>
<CCardFooter>
<CRow className="text-center">
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="success"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="info"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="warning"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="danger"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
value={40}
/>
</CCol>
</CRow>
</CCardFooter>
</CCard>
<div code={checkedState[0] === true ? "br-hide" : null}>
<WidgetsDropdown />
</div>

<div code={checkedState[1] === true ? "br-hide" : null}>
<CCard>
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" className="card-title mb-0">Traffic</h4>
<div className="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" className="d-none d-md-block">
<div code={checkedState[2] === true ? "br-hide" : null}>
<CButton color="primary" className="float-right">
<CIcon name="cil-cloud-download" />
</CButton>
<CButtonGroup className="float-right mr-3">
{
['Day', 'Month', 'Year'].map(value => (
<CButton
color="outline-secondary"
key={value}
className="mx-0"
active={value === 'Month'}
>
{value}
</CButton>
))
}
</CButtonGroup>
</div>
</CCol>
</CRow>
<MainChartExample style={{ height: '300px', marginTop: '40px' }} />
</CCardBody>
<div code={checkedState[3] === true ? "br-hide" : null}>
<CCardFooter>
<CRow className="text-center">
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="success"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="info"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="warning"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
color="danger"
value={40}
/>
</CCol>
<CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<CProgress
className="progress-xs mt-2"
precision={1}
value={40}
/>
</CCol>
</CRow>
</CCardFooter>
</div>
</CCard>
</div>
<CRow>
<CCol>
<div code={checkedState[4] === true ? "br-hide" : null}>
<CCard>
<CCardHeader>
Traffic {' & '} Sales
@@ -341,236 +357,237 @@ const DemoComponent1 = () => {

</CCol>
</CRow>
<div>
<br />
<table className="table table-hover table-outline mb-0 d-sm-table" >
<thead className="thead-light">
<tr>
<th className="text-center"><CIcon name="cil-people" /></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/1.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-us" title="us" id="us" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-mastercard" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/2.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">

<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-br" title="br" id="br" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-visa" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/3.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-in" title="in" id="in" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-stripe" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/4.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-fr" title="fr" id="fr" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-paypal" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/5.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-es" title="es" id="es" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-google-pay" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/6.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-pl" title="pl" id="pl" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-amex" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</table>
</div>
</CCardBody>
</CCard>
</div>
<div>
<table className="table table-hover table-outline mb-0 d-sm-table" code={checkedState[5] === true ? "br-hide" : null}>
<thead className="thead-light">
<tr>
<th className="text-center"><CIcon name="cil-people" /></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/1.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-us" title="us" id="us" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-mastercard" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/2.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">

<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-br" title="br" id="br" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-visa" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/3.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-in" title="in" id="in" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-stripe" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/4.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-fr" title="fr" id="fr" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-paypal" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/5.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-es" title="es" id="es" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-google-pay" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="c-avatar">
<img src={'avatars/6.jpg'} className="c-avatar-img" alt="[email protected]" />
<span className="c-avatar-status bg-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<CIcon height={25} name="cif-pl" title="pl" id="pl" />
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<CProgress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<CIcon height={25} name="cib-cc-amex" />
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</table>
</div>
</CCol>
</CRow>
</>

Verfassen Vorschau
Laden…
Abbrechen
Speichern