seb/dashfront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
seb
2026-10-09 11:20:00 +02:00
parent 38339b13a2
commit 8285936bc9
2 changed files with 52 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/article/boxes/ArticleViewPrice.jsx
View File

@@ -1,6 +1,5 @@
import { Component, PureComponent } from 'react';
import Box from '@mui/material/Box';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { EditablePanelTile, PanelTile } from 'dashgui/panels';
@@ -45,12 +44,12 @@ const articlePriceTextSx = {
};
const articlePriceFieldSx = {
flexShrink: 0,
width: 'auto',
mr: 11,
flexShrink: 1,
width: '100%',
'& .MuiOutlinedInput-root': {
alignItems: 'baseline',
flexShrink: 0,
width: '100%',
flexShrink: 1,
},
'& .MuiInputBase-input': {
fontSize: '3.5rem',
@@ -58,17 +57,6 @@ const articlePriceFieldSx = {
height: 'auto',
...articlePriceTextSx,
},
'& .MuiInputAdornment-root': {
marginRight: 0.75,
height: 'auto',
maxHeight: 'none',
alignItems: 'baseline',
},
'& .MuiInputAdornment-root .MuiTypography-root': {
fontSize: '2rem',
fontWeight: 700,
lineHeight: 1.1,
},
'& .MuiOutlinedInput-notchedOutline': {
borderWidth: '1px !important',
},
@@ -96,6 +84,7 @@ const priceBodySx = {
display: 'flex',
flexDirection: 'column',
gap: 0.75,
pt: 0,
};
function articleHasPackUnit(art) {
@@ -198,11 +187,6 @@ class PriceAmountField extends Component {
slotProps={{
input: {
readOnly,
startAdornment: (
<InputAdornment position="start">
<Typography component="span">€</Typography>
</InputAdornment>
),
},
htmlInput: {
inputMode: 'decimal',
@@ -524,8 +508,8 @@ export default class ArticleViewPrice extends PureComponent {
const max = Math.max(...prices);
priceText =
min === max
? `€ ${formatPriceAmount(min)}`
: `€ ${formatPriceAmount(min)} bis € ${formatPriceAmount(max)}`;
? formatPriceAmount(min)
: `${formatPriceAmount(min)} bis ${formatPriceAmount(max)}`;
}
return (
@@ -533,24 +517,19 @@ export default class ArticleViewPrice extends PureComponent {
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color={BLUE_PANEL}
title={
<Box component="span" sx={{ fontWeight: 700 }}>
€
</Box>
}
contentAlignItems="flex-start"
>
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }}>
<Typography
variant="caption"
color="text.secondary"
sx={{
letterSpacing: 0.6,
fontWeight: 600,
display: 'block',
}}
>
Preis auf Variantenebene pflegen
</Typography>
<Box sx={{ my: 0.75 }}>
<Box sx={{ width: '100%', mt: 0.5 }}>
<Typography
component="div"
sx={{
width: '100%',
fontSize: '1.5rem',
fontWeight: 700,
lineHeight: 1.2,
@@ -578,6 +557,7 @@ export default class ArticleViewPrice extends PureComponent {
wide={1}
minHeight={SECOND_ROW_MIN_HEIGHT}
color={BLUE_PANEL}
title={'€'}
contentAlignItems="flex-start"
value={priceValue}
onSave={this.handleSave}

55
src/devtools/SseMonitor.jsx
View File

@@ -1,4 +1,5 @@
import { PureComponent, createRef } from 'react';
import { keyframes } from '@emotion/react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import Fab from '@mui/material/Fab';
@@ -15,6 +16,16 @@ import sseAutomat from '../automats/sseAutomat';
const PANEL_WIDTH = 420;
const PANEL_HEIGHT = 380;
const pulseAnimationA = keyframes`
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
35% { transform: scale(1.16); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
`;
const pulseAnimationB = keyframes`
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
35% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
`;
function formatEventData(data) {
if (!data) return '';
@@ -34,6 +45,7 @@ class SseMonitor extends PureComponent {
events: sseAutomat.state.events,
open: false,
position: null,
eventPulse: 0,
};
this.panelRef = createRef();
this.handleToggle = this.handleToggle.bind(this);
@@ -59,6 +71,14 @@ class SseMonitor extends PureComponent {
window.removeEventListener('keydown', this.handleKeyDown);
}
componentDidUpdate(prevProps, prevState) {
const previousEventId = prevState.events.at(-1)?.id;
const currentEventId = this.state.events.at(-1)?.id;
if (currentEventId != null && currentEventId !== previousEventId) {
this.setState((state) => ({ eventPulse: state.eventPulse + 1 }));
}
}
handleKeyDown(event) {
if (!event.altKey || !event.shiftKey || event.key?.toLowerCase() !== 's') return;
event.preventDefault();
@@ -148,30 +168,29 @@ class SseMonitor extends PureComponent {
}
render() {
const { open, position, status, companyId, events } = this.state;
const { open, position, status, companyId, events, eventPulse } = this.state;
const statusColor =
status === 'connected' ? 'success' : status === 'error' ? 'error' : status === 'connecting' ? 'warning' : 'default';
return (
<>
{!open ? (
<Tooltip title="SSE-Monitor (Alt+Shift+S)" placement="left">
<Fab
size="small"
color="primary"
aria-label="SSE-Monitor umschalten"
aria-pressed={open}
onClick={this.handleToggle}
sx={{
position: 'fixed',
right: 16,
bottom: 16,
zIndex: (theme) => theme.zIndex.tooltip,
}}
>
<SensorsIcon fontSize="small" />
</Fab>
</Tooltip>
<Fab
size="small"
color={statusColor}
aria-label={`SSE-Monitor umschalten (${status})`}
aria-pressed={open}
onClick={this.handleToggle}
sx={{
position: 'fixed',
left: { xs: 27, sm: 171 },
bottom: { xs: 132, sm: 142 },
zIndex: (theme) => theme.zIndex.tooltip,
animation: `${eventPulse % 2 === 0 ? pulseAnimationA : pulseAnimationB} 650ms ease-out`,
}}
>
<SensorsIcon fontSize="small" />
</Fab>
) : (
<Paper
ref={this.panelRef}