Skip to content

Commit

Permalink
Lint / prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbflo
jbflo committed Jul 27, 2023
1 parent cbbdc5b commit 815b4eb
Show file tree
Hide file tree
Showing 5 changed files with 203 additions and 121 deletions.
2 changes: 1 addition & 1 deletion ui/src/components/SampleGrid/SampleGridTable.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -349,7 +349,7 @@ button[disabled] {
margin-left: auto;
}

.main-circle-center{
.main-circle-center {
fill: #dfd1d9;
}

Expand Down
27 changes: 18 additions & 9 deletions ui/src/containers/SampleFlexView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,16 +119,25 @@ class NewSampleFlexView extends React.Component {
const scContent = [1, 2, 3, 4, 5, 6, 7, 8];
return (
<Col sm>
<div className='div-svg-flex'>
<svg className='svg-flex' height="97%" width="97%" viewBox="0 0 20 20">
<circle className='main-circle-center' r="10" cx="10" cy="10" />
{scContent.map((cell, idx) => {
return (
this.renderCircle(scContent.length, idx, this.isCellSelected(cell))
)
<div className="div-svg-flex">
<svg
className="svg-flex"
height="97%"
width="97%"
viewBox="0 0 20 20"
>
<circle className="main-circle-center" r="10" cx="10" cy="10" />
{scContent.map((cell, idx) => {
return this.renderCircle(
scContent.length,
idx,
this.isCellSelected(cell),
);
})}
<circle className='cell-cicle-center' r="5" cx="10" cy="10" />
<text x='10' y='10' fontSize="1" textAnchor="middle" fill="gray">Sample Changer</text>
<circle className="cell-cicle-center" r="5" cx="10" cy="10" />
<text x="10" y="10" fontSize="1" textAnchor="middle" fill="gray">
Sample Changer
</text>
</svg>
</div>
</Col>
Expand Down
238 changes: 143 additions & 95 deletions ui/src/containers/SampleGridTableContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,8 +255,12 @@ class SampleGridTableContainer extends React.Component {
'#selectionRubberBand',
);
document.querySelector('#selectionRubberBand').style.display = 'block';
selectionRubberBand.style.width = `${e.clientX - selectionRubberBand.offsetLeft}px`;
selectionRubberBand.style.height = `${e.clientY - selectionRubberBand.offsetTop}px`;
selectionRubberBand.style.width = `${
e.clientX - selectionRubberBand.offsetLeft
}px`;
selectionRubberBand.style.height = `${
e.clientY - selectionRubberBand.offsetTop
}px`;
}

e.preventDefault();
Expand Down Expand Up @@ -800,10 +804,12 @@ class SampleGridTableContainer extends React.Component {
) {
const nbpuck = [];
// we won't display the cell / table if all puck in the cell are empty
cell.children.map((puck, idxtd)=> {
if(this.getSampleItems(Number(cell.name), idxtd+1).length > 0
&& (Number(this.props.filterOptions.puckFilter) === idxtd+1
|| this.props.filterOptions.puckFilter.toLowerCase() === '')) {
cell.children.map((puck, idxtd) => {
if (
this.getSampleItems(Number(cell.name), idxtd + 1).length > 0 &&
(Number(this.props.filterOptions.puckFilter) === idxtd + 1 ||
this.props.filterOptions.puckFilter.toLowerCase() === '')
) {
nbpuck.push(puck);
}
});
Expand All @@ -812,8 +818,7 @@ class SampleGridTableContainer extends React.Component {
let colsmP;
if (nbpuck.length === 1) {
colsmP = 3;
}
else if (nbpuck.length >= 4 && colsm === 'auto') {
} else if (nbpuck.length >= 4 && colsm === 'auto') {
colsmP = 12;
} else {
colsmP = colsm;
Expand All @@ -832,8 +837,14 @@ class SampleGridTableContainer extends React.Component {
openedClassName="sample-items-collapsible"
open
lazyRender
trigger={this.getCollapsibleHeaderClose(Number(cell.name), 'collapsible-arrow-c')}
triggerWhenOpen={this.getCollapsibleHeaderOpen(Number(cell.name), 'collapsible-arrow-c')}
trigger={this.getCollapsibleHeaderClose(
Number(cell.name),
'collapsible-arrow-c',
)}
triggerWhenOpen={this.getCollapsibleHeaderOpen(
Number(cell.name),
'collapsible-arrow-c',
)}
>
<Table
bordered
Expand All @@ -843,28 +854,61 @@ class SampleGridTableContainer extends React.Component {
>
<thead>
<tr>
{cell.children.map((puck, idxth)=> {
if ((Number(this.props.filterOptions.puckFilter) === idxth+1
|| this.props.filterOptions.puckFilter.toLowerCase() === '')
&& this.getSampleItems(Number(cell.name), idxth+1).length > 0) {
const puckMenuID = 'samples-grid-table-context-menu-puck'
return(
<th key={`${cell.name}-th-${puck.name}`} className='sample-items-table-row-header-th'>
<span style={{ marginLeft: '5px', marginTop: '4px', float:'left'}}>
Puck {idxth+1}
{puck.id !== '' ?
<div className='sample-items-puck-code' title={puck.id}>
{cell.children.map((puck, idxth) => {
if (
(Number(this.props.filterOptions.puckFilter) ===
idxth + 1 ||
this.props.filterOptions.puckFilter.toLowerCase() ===
'') &&
this.getSampleItems(Number(cell.name), idxth + 1)
.length > 0
) {
const puckMenuID =
'samples-grid-table-context-menu-puck';
return (
<th
key={`${cell.name}-th-${puck.name}`}
className="sample-items-table-row-header-th"
>
<span
style={{
marginLeft: '5px',
marginTop: '4px',
float: 'left',
}}
>
Puck {idxth + 1}
{puck.id !== '' ? (
<div
className="sample-items-puck-code"
title={puck.id}
>
Code : {puck.id}
</div>
: null}
) : null}
</span>
<span style={{ marginTop: '15px', marginRight: '2px'}}>
{this.itemsControls(Number(cell.name), idxth+1)}
<span
style={{
marginTop: '15px',
marginRight: '2px',
}}
>
{this.itemsControls(
Number(cell.name),
idxth + 1,
)}
</span>
<span
title='Puck Options'
className='samples-grid-table-context-menu-icon'
onClick={(e) => {this.displayPuckCellContextMenu(e, puckMenuID, Number(cell.name), idxth+1)}}
title="Puck Options"
className="samples-grid-table-context-menu-icon"
onClick={(e) => {
this.displayPuckCellContextMenu(
e,
puckMenuID,
Number(cell.name),
idxth + 1,
);
}}
>
<BiMenu size="1.5em" />
</span>
Expand All @@ -877,16 +921,29 @@ class SampleGridTableContainer extends React.Component {
</thead>
<tbody>
<tr>
{cell.children.map((puck, idxtd)=> {
if ((Number(this.props.filterOptions.puckFilter) === idxtd+1
|| this.props.filterOptions.puckFilter.toLowerCase() === '')
&& this.getSampleItems(Number(cell.name), idxtd+1).length > 0) {
return(
<td key={`${cell.name}-td-${puck.name}`} className={`sample-items-table-column-body custom-table-border-${idxtd+1}`}>
{this.getSampleItems(Number(cell.name), idxtd+1)}
</td>
)
}
{cell.children.map((puck, idxtd) => {
if (
(Number(this.props.filterOptions.puckFilter) ===
idxtd + 1 ||
this.props.filterOptions.puckFilter.toLowerCase() ===
'') &&
this.getSampleItems(Number(cell.name), idxtd + 1)
.length > 0
) {
return (
<td
key={`${cell.name}-td-${puck.name}`}
className={`sample-items-table-column-body custom-table-border-${
idxtd + 1
}`}
>
{this.getSampleItems(
Number(cell.name),
idxtd + 1,
)}
</td>
);
}
return null;
})}
</tr>
Expand Down Expand Up @@ -1096,63 +1153,52 @@ class SampleGridTableContainer extends React.Component {
}

render() {
return (
this.state.loadGridTable ? (
<div>
{this.props.contextMenu.show ?
(
<MXContextMenu
id={this.props.contextMenu.id}
show={this.props.contextMenu.show}
x={this.props.contextMenu.x}
y={this.props.contextMenu.y}

>
{this.renderContextMenu(this.props.contextMenu.id)}
</MXContextMenu>
)
:
null
}
{this.props.viewMode.mode === 'Graphical View'?
(
<Row
className="samples-grid-table"
onMouseDown={this.onMouseDown}
onMouseUp={this.onMouseUp}
onMouseMove={this.onMouseMove}
xs="auto"
>
<div className="selection-rubber-band" id="selectionRubberBand"/>
{this.renderSampleChangerDrawing()}
<Col className='col-sm-10'>
{this.getManualSamples()}
{this.getSampleTable('auto')}
</Col>
</Row>
)
:
(
<Row
className="samples-grid-table"
onMouseDown={this.onMouseDown}
onMouseUp={this.onMouseUp}
onMouseMove={this.onMouseMove}
xs="auto"
ref={(ref) => { this.containerRef = ref; }}
>
<div className="selection-rubber-band" id="selectionRubberBand" />
{this.getManualSamples()}
{this.getSampleTable(this.isSingleCell()? 12: 6)}
</Row>
)
}
</div>
): (
<div className="widget loading">
loading...
</div>
)
return this.state.loadGridTable ? (
<div>
{this.props.contextMenu.show ? (
<MXContextMenu
id={this.props.contextMenu.id}
show={this.props.contextMenu.show}
x={this.props.contextMenu.x}
y={this.props.contextMenu.y}
>
{this.renderContextMenu(this.props.contextMenu.id)}
</MXContextMenu>
) : null}
{this.props.viewMode.mode === 'Graphical View' ? (
<Row
className="samples-grid-table"
onMouseDown={this.onMouseDown}
onMouseUp={this.onMouseUp}
onMouseMove={this.onMouseMove}
xs="auto"
>
<div className="selection-rubber-band" id="selectionRubberBand" />
{this.renderSampleChangerDrawing()}
<Col className="col-sm-10">
{this.getManualSamples()}
{this.getSampleTable('auto')}
</Col>
</Row>
) : (
<Row
className="samples-grid-table"
onMouseDown={this.onMouseDown}
onMouseUp={this.onMouseUp}
onMouseMove={this.onMouseMove}
xs="auto"
ref={(ref) => {
this.containerRef = ref;
}}
>
<div className="selection-rubber-band" id="selectionRubberBand" />
{this.getManualSamples()}
{this.getSampleTable(this.isSingleCell() ? 12 : 6)}
</Row>
)}
</div>
) : (
<div className="widget loading">loading...</div>
);
}
}
Expand All @@ -1175,7 +1221,9 @@ function mapStateToProps(state) {
viewMode: state.sampleGrid.viewMode,
contextMenu: state.contextMenu.genericContextMenu,
sampleChanger: state.sampleChanger,
type: state.sampleChanger.contents ? state.sampleChanger.contents.name : '"Mockup"'
type: state.sampleChanger.contents
? state.sampleChanger.contents.name
: '"Mockup"',
};
}

Expand Down
27 changes: 20 additions & 7 deletions ui/src/containers/SampleIsaraView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,13 +233,26 @@ class NewSampleIsaraView extends React.Component {
const numPucks = 29;

return (
<Col className='col-sm-2' style={{ marginTop: '25vh' }}>
<div className='div-flex-pie-collapsible'>
<div>
<svg className='svg-flex' height="97%" width="97%" viewBox="0 0 20 20">
<circle className='main-circle-center' r="10" cx="10" cy="10" />
<rect x="0" y="0" width="100%" height="1" stroke="white" fill="transparent" strokeWidth="2"/>
{ this.renderPucks(numPucks) }
<Col className="col-sm-2" style={{ marginTop: '25vh' }}>
<div className="div-flex-pie-collapsible">
<div>
<svg
className="svg-flex"
height="97%"
width="97%"
viewBox="0 0 20 20"
>
<circle className="main-circle-center" r="10" cx="10" cy="10" />
<rect
x="0"
y="0"
width="100%"
height="1"
stroke="white"
fill="transparent"
strokeWidth="2"
/>
{this.renderPucks(numPucks)}
</svg>
</div>
</div>
Expand Down
Loading

0 comments on commit 815b4eb

Please sign in to comment.