safet.purkovic
/
PDFEngineDemoUI
Seguir 1
Destacar 0
Fork 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

Feature / implemented input elements

master
Safet Purkovic hace 4 años
padre
585f66133e
commit
0c3a030f2b
Se han modificado 6 ficheros con 703 adiciones y 27 borrados
Dividir vista Mostrar estadísticas de diff
  1. 27
    5
      src/views/demoComponent/DemoComponent10.js
  2. 593
    0
      src/views/demoComponent/DemoComponent13.js
  3. 12
    3
      src/views/demoComponent/DemoComponent6.js
  4. 16
    7
      src/views/demoComponent/DemoComponent7.js
  5. 18
    4
      src/views/demoComponent/DemoComponent8.js
  6. 37
    8
      src/views/demoComponent/DemoComponent9.js

+ 27
- 5
src/views/demoComponent/DemoComponent10.js Ver fichero

@@ -1,4 +1,4 @@
import React, { lazy } from 'react';
import React, { lazy, useState } from 'react';
import {
CBadge,
CButton,
@@ -20,7 +20,19 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent10 = () => {
const execute = () => {
const [paperFormat, setPaperFormat] = useState(0);
const [inputValue, setInputValue] = useState("");

const handleChange = (event) => {
if (!isNaN(event.target.value)) {
setPaperFormat(event.target.value);
setInputValue(event.target.value);
} else {
alert('Not a number');
setInputValue("");
}
}
const exec = () => {
const query = [];
// query.push("MarginTop=100 mm");
@@ -67,9 +79,19 @@ const DemoComponent10 = () => {
}
return (
<>
<button className="float-right btn btn-primary" onClick={execute}>Execute</button>
<br/>
10
<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>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<input value={inputValue} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter paper format" type="text" name="name" onChange={handleChange} />
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br/>
<br/>
<WidgetsDropdown />

+ 593
- 0
src/views/demoComponent/DemoComponent13.js Ver fichero

@@ -0,0 +1,593 @@
import React, { lazy, useState } 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 MainChartExample from '../charts/MainChartExample.js';
const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent13 = () => {
const [paperFormat, setPaperFormat] = useState(0);
const [inputValue, setInputValue] = useState("");

const handleChange = (event) => {
if (!isNaN(event.target.value)) {
setPaperFormat(event.target.value);
setInputValue(event.target.value);
} else {
alert('Not a number');
setInputValue("");
}
}
const exec = () => {
const query = [];
// query.push("MarginTop=100 mm");
// query.push("PaperFormatType=A3");
const queryString = (query) ? `?${query.join('&')}` : '';
const url = ('https://localhost:7285/api/PDFGenerator/isolate/http%3A%2F%2Flocalhost%3A3000%2F%23%2FDemoComponent10'+queryString);
let headers = new Headers();
headers.append('Content-Type', 'application/pdf');
fetch(url, {
method: 'GET',
headers: headers
})
.then(async res => ({
filename: "single widget.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>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<input value={inputValue} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter paper format" type="text" name="name" onChange={handleChange} />
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<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" isolate="true">
<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 DemoComponent10;

+ 12
- 3
src/views/demoComponent/DemoComponent6.js Ver fichero

@@ -27,9 +27,18 @@ const DemoComponent6 = () => {
}
return (
<>
<button className="float-right btn btn-primary" onClick={exec}>Execute</button>
<br/>
6
<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>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br/>
<br/>
<WidgetsDropdown />

+ 16
- 7
src/views/demoComponent/DemoComponent7.js Ver fichero

@@ -20,11 +20,12 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent7 = () => {
const hello = () => {
const exec = () => {
let query = [];
query.push("HeaderTemplate=<h1> LOGO </h1>");
// query.push("HeaderTemplate=<img src='https://g.foolcdn.com/art/companylogos/square/blk.png' alt='logo'/>");
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);
@@ -67,10 +68,18 @@ const DemoComponent7 = () => {
}
return (
<>
<img src='https://th.bing.com/th/id/OIP.NnSyEfHGYVvmSm4vh0_ROgHaBr?pid=ImgDet&rs=1' alt='logo'/>
<button className="float-right btn btn-primary" onClick={hello}>Execute</button>
<br/>
7
<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>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br/>
<br/>
<WidgetsDropdown />

+ 18
- 4
src/views/demoComponent/DemoComponent8.js Ver fichero

@@ -20,12 +20,26 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent8 = () => {

const exec = () =>
{
PDFEngine();
window.print();
}
return (
<>
<button className="float-right btn btn-primary" onClick={PDFEngine}>Execute</button>
<br/>
8
<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>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '50%', padding: '5px' }}>
</div>
</div>
<br/>
<br/>
<WidgetsDropdown />

+ 37
- 8
src/views/demoComponent/DemoComponent9.js Ver fichero

@@ -1,4 +1,4 @@
import React, { lazy } from 'react';
import React, { lazy, useState } from 'react';
import {
CBadge,
CButton,
@@ -20,11 +20,28 @@ const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))


const DemoComponent9 = () => {
const execute = () => {
const [paperFormat, setPaperFormat] = useState(0);
const [inputPaperFormat, setInputPaperFormat] = useState("");

const handleChange = (event) => {
setPaperFormat(event.target.value);
setInputPaperFormat(event.target.value);
}
const [margins, setMargins] = useState("");
const [inputMargins, setInputMargins] = useState("");

const handleChangeMargin = (event) => {
setMargins(event.target.value);
setInputMargins(event.target.value);
}
const exec = () => {
const query = [];
query.push("MarginTop=100 mm");
query.push("PaperFormatType=A3");
const arrayMargins = margins.split(',');
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);
@@ -67,9 +84,21 @@ const DemoComponent9 = () => {
}
return (
<>
<button className="float-right btn btn-primary" onClick={execute}>Execute</button>
<br/>
9
<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: '70%', padding: '2px', margin: '5px' }}>
<div style={{ backgroundColor: 'white', width: '50%', padding: '2px', marginBottom: '20px' }}>
<h4>PDFEngine</h4>
</div>
<div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
<input value={inputPaperFormat} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter paper format" type="text" name="name" onChange={handleChange} />
<input value={inputMargins} style={{ border: '.5px solid lightGray', outline: 'none', backgroundColor: '#f2f2f2', borderRadius: '5px' }} placeholder=" Enter margins top,right,bottom,left" type="text" name="name" onChange={handleChangeMargin} />
<br/>
<button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Execute</button>
</div>
</div>
<div style={{ backgroundColor: 'white', minHeight: '100%', width: '30%', padding: '5px' }}>
</div>
</div>
<br/>
<br/>
<WidgetsDropdown />

Escribir Vista previa
Cargando…
Cancelar
Guardar