safet.purkovic
/
PDFEngineDemoUI
Bevaka 1
Stjärnmärk 0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

Feature / observable pattern implementation

master
Safet Purkovic 4 år sedan
förälder
af47de3cb9
incheckning
62279922e4
16 ändrade filer med 678 tillägg och 28 borttagningar
Delad Vy Visa Diff Statistik
  1. 10
    0
      src/containers/_nav.js
  2. 2
    0
      src/routes.js
  3. 1
    1
      src/views/dashboard/Dashboard.js
  4. 2
    2
      src/views/demoComponent/DemoComponent1.js
  5. 3
    3
      src/views/demoComponent/DemoComponent11.js
  6. 4
    4
      src/views/demoComponent/DemoComponent13.js
  7. 586
    0
      src/views/demoComponent/DemoComponent14.js
  8. 3
    3
      src/views/demoComponent/DemoComponent3.js
  9. 3
    3
      src/views/demoComponent/DemoComponent4.js
  10. 3
    3
      src/views/demoComponent/DemoComponent5.js
  11. 3
    3
      src/views/demoComponent/DemoComponent6.js
  12. 3
    3
      src/views/demoComponent/DemoComponent7.js
  13. 3
    3
      src/views/demoComponent/DemoComponent8.js
  14. 2
    0
      src/views/demoComponent/DemoComponent9.js
  15. 25
    0
      src/views/demoComponent/custom-transform.js
  16. 25
    0
      src/views/demoComponent/model.js

+ 10
- 0
src/containers/_nav.js Visa fil

@@ -122,6 +122,16 @@ const _nav = [
text: '',
}
},
{
_tag: 'CSidebarNavItem',
name: 'Add custom transform',
to: '/DemoComponent14',
// icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
badge: {
color: 'info',
text: '',
}
},
{
_tag: 'CSidebarNavItem',
name: 'Dashboard',

+ 2
- 0
src/routes.js Visa fil

@@ -39,6 +39,7 @@ const DemoComponent9 = React.lazy(() => import('./views/demoComponent/DemoCompon
const DemoComponent10 = React.lazy(() => import('./views/demoComponent/DemoComponent10'));
const DemoComponent11 = React.lazy(() => import('./views/demoComponent/DemoComponent11'));
const DemoComponent12 = React.lazy(() => import('./views/demoComponent/DemoComponent12'));
const DemoComponent14 = React.lazy(() => import('./views/demoComponent/DemoComponent14'));

const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons'));
const Flags = React.lazy(() => import('./views/icons/flags/Flags'));
@@ -68,6 +69,7 @@ const routes = [
{ path: '/DemoComponent10', name: 'DemoComponent', component: DemoComponent10 },
{ path: '/DemoComponent11', name: 'DemoComponent', component: DemoComponent11 },
{ path: '/DemoComponent12', name: 'DemoComponent', component: DemoComponent12 },
{ path: '/DemoComponent14', name: 'DemoComponent', component: DemoComponent14 },

{ path: '/theme', name: 'Theme', component: Colors, exact: true },
{ path: '/theme/colors', name: 'Colors', component: Colors },

+ 1
- 1
src/views/dashboard/Dashboard.js Visa fil

@@ -13,7 +13,7 @@ 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'


+ 2
- 2
src/views/demoComponent/DemoComponent1.js Visa fil

@@ -13,7 +13,7 @@ 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'))
@@ -21,7 +21,7 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))

const DemoComponent1 = () => {
const exec = () => {
PDFEngine();
const pdf = new PDFEngine();
window.print();
}
// const apiCall = () => {

+ 3
- 3
src/views/demoComponent/DemoComponent11.js Visa fil

@@ -13,7 +13,7 @@ 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'))
@@ -35,8 +35,8 @@ const DemoComponent11 = () => {
}

const exec = () => {
PDFEngine();
window.print();
const pdf = new PDFEngine();
// window.print();
}
return (
<>

+ 4
- 4
src/views/demoComponent/DemoComponent13.js Visa fil

@@ -13,7 +13,7 @@ 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'))
@@ -95,7 +95,7 @@ const DemoComponent13 = () => {
<br/>
<br/>
<WidgetsDropdown />
<CCard isolate="true">
<CCard>
<CCardBody>
<CRow>
<CCol sm="5">
@@ -103,7 +103,7 @@ const DemoComponent13 = () => {
<div className="small text-muted">November 2017</div>
</CCol>
<CCol sm="7" className="d-none d-md-block">
<CButton color="primary" className="float-right" onClick={isolate}>
<CButton color="primary" className="float-right">
<CIcon name="cil-cloud-download" />
</CButton>
<CButtonGroup className="float-right mr-3">
@@ -590,4 +590,4 @@ const DemoComponent13 = () => {
</>
);
}
export default DemoComponent10;
export default DemoComponent13;

+ 586
- 0
src/views/demoComponent/DemoComponent14.js Visa fil

@@ -0,0 +1,586 @@
import React, { lazy } from 'react';
import {
CBadge,
CButton,
CButtonGroup,
CCard,
CCardBody,
CCardFooter,
CCardHeader,
CCol,
CProgress,
CRow,
CCallout
} from '@coreui/react';
import CIcon from '@coreui/icons-react';
import {PDFEngine} from 'PDFEngine';
import { CustomModel } from "./model";

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


const DemoComponent14 = () => {
const exec = () => {
const m = new CustomModel();
const pdf = new PDFEngine();
m.addObservables(pdf);
m.addTransform();

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();
// // 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" style={{ display: 'flex', flexDirection: 'row', border: '1px solid #dedede', width: '50%', height: '200px', 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 id="nesto">PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Print view</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br />
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>

<CRow>
<CCol>
<CCard>
<CCardHeader>
Traffic {' & '} Sales
</CCardHeader>
<CCardBody>
<CRow>
<CCol xs="12" md="6" xl="6">

<CRow>
<CCol sm="6">
<CCallout color="info">
<small className="text-muted">New Clients</small>
<br />
<strong className="h4">9,123</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="danger">
<small className="text-muted">Recurring Clients</small>
<br />
<strong className="h4">22,643</strong>
</CCallout>
</CCol>
</CRow>

<hr className="mt-0" />

<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Monday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="34" />
<CProgress className="progress-xs" color="danger" value="78" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Tuesday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="56" />
<CProgress className="progress-xs" color="danger" value="94" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Wednesday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="12" />
<CProgress className="progress-xs" color="danger" value="67" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Thursday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="43" />
<CProgress className="progress-xs" color="danger" value="91" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Friday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="22" />
<CProgress className="progress-xs" color="danger" value="73" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Saturday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="53" />
<CProgress className="progress-xs" color="danger" value="82" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Sunday
</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="info" value="9" />
<CProgress className="progress-xs" color="danger" value="69" />
</div>
</div>
<div className="legend text-center">
<small>
<sup className="px-1"><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
New clients
&nbsp;
<sup className="px-1"><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
Recurring clients
</small>
</div>
</CCol>

<CCol xs="12" md="6" xl="6">

<CRow>
<CCol sm="6">
<CCallout color="warning">
<small className="text-muted">Pageviews</small>
<br />
<strong className="h4">78,623</strong>
</CCallout>
</CCol>
<CCol sm="6">
<CCallout color="success">
<small className="text-muted">Organic</small>
<br />
<strong className="h4">49,123</strong>
</CCallout>
</CCol>
</CRow>

<hr className="mt-0" />
<div className="progress-group mb-4">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user" />
<span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="43" />
</div>
</div>
<div className="progress-group mb-5">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-user-female" />
<span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="warning" value="37" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<CIcon className="progress-group-icon" name="cil-globe-alt" />
<span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
</div>
<div className="progress-group-bars">
<CProgress className="progress-xs" color="success" value="56" />
</div>
</div>

<div className="divider text-center">
<CButton color="link" size="sm" className="text-muted">
<CIcon name="cil-options" />
</CButton>
</div>

</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>
</CCol>
</CRow>
</>
);
}
export default DemoComponent14;

+ 3
- 3
src/views/demoComponent/DemoComponent3.js Visa fil

@@ -13,7 +13,7 @@ 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'))
@@ -22,8 +22,8 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
const DemoComponent3 = () => {
const exec = () =>
{
PDFEngine();
window.print();
const pdf = new PDFEngine();
// window.print();
}
return (
<>

+ 3
- 3
src/views/demoComponent/DemoComponent4.js Visa fil

@@ -13,7 +13,7 @@ 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'))
@@ -22,8 +22,8 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
const DemoComponent4 = () => {
const exec = () =>
{
PDFEngine();
window.print();
const pdf = new PDFEngine();
// window.print();
}
return (
<>

+ 3
- 3
src/views/demoComponent/DemoComponent5.js Visa fil

@@ -13,7 +13,7 @@ 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'))
@@ -30,8 +30,8 @@ const DemoComponent5 = () => {
}
const exec = () => {
PDFEngine();
window.print();
const pdf = new PDFEngine();
// window.print();
}
return (
<>

+ 3
- 3
src/views/demoComponent/DemoComponent6.js Visa fil

@@ -13,7 +13,7 @@ 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'))
@@ -22,8 +22,8 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
const DemoComponent6 = () => {
const exec = () =>
{
PDFEngine();
window.print();
const pdf = new PDFEngine();
// window.print();
}
return (
<>

+ 3
- 3
src/views/demoComponent/DemoComponent7.js Visa fil

@@ -23,9 +23,9 @@ const DemoComponent7 = () => {
const exec = () => {
let query = [];
query.push("DisplayHeaderFooter=true");
query.push("HeaderTemplate=<img alt='title' src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' width='40'/>;");
query.push("MarginLeft=30 mm");
// query.push("DisplayHeaderFooter=true");
// query.push("HeaderTemplate=<img alt='title' src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' width='40'/>;");
//query.push("MarginLeft=30 mm");
const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent7'+queryString);

+ 3
- 3
src/views/demoComponent/DemoComponent8.js Visa fil

@@ -13,7 +13,7 @@ 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'))
@@ -23,8 +23,8 @@ const DemoComponent8 = () => {
const exec = () =>
{
PDFEngine();
window.print();
const pdf = new PDFEngine();
// window.print();
}
return (
<>

+ 2
- 0
src/views/demoComponent/DemoComponent9.js Visa fil

@@ -34,10 +34,12 @@ const DemoComponent9 = () => {
const exec = () => {
const query = [];
const arrayMargins = margins.split(',');
if(arrayMargins.length > 0){
query.push(`MarginTop=${arrayMargins[0]}`);
query.push(`MarginRight=${arrayMargins[1]}`);
query.push(`MarginBottom=${arrayMargins[2]}`);
query.push(`MarginLeft=${arrayMargins[3]}`);
}
query.push(`PaperFormatType=${paperFormat}`);
const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent9' + queryString);

+ 25
- 0
src/views/demoComponent/custom-transform.js Visa fil

@@ -0,0 +1,25 @@
export class CustomTransform
{
constructor(param)
{
this.object = document.getElementById('traffic');
this.selectors = ['p','h4'];
try{
const arrayCode = this.object.getAttribute("code").split('-');
if(arrayCode.length > 2)
{
this.value = arrayCode[2];
}
}
catch{}
}
validate(){
return true;
};
execute(){
this.object.style.color = "red";
};
rolback(){
this.object.style.color = "black";
};
}

+ 25
- 0
src/views/demoComponent/model.js Visa fil

@@ -0,0 +1,25 @@
import { CustomTransform } from "./custom-transform";

export class CustomModel{
constructor()
{
this.transform = new CustomTransform();
this.observables = [];
}

addTransform()
{

this.notifyObservables();
}
addObservables(o)
{
this.observables.push(o);
}

notifyObservables()
{
for(let i =0;i<this.observables.length;i++)
this.observables[i].update(this);
}
}

Write Förhandsgranska
Laddar…
Avbryt
Spara