u
This commit is contained in:
sebseb7
@@ -101,7 +101,6 @@ class ViewManager extends Component {
|
||||
};
|
||||
|
||||
parseViewData(view) {
|
||||
// Flatten config for display/editing
|
||||
let channels = [];
|
||||
let axes = { left: { min: '', max: '' }, right: { min: '', max: '' } };
|
||||
|
||||
@@ -109,28 +108,20 @@ class ViewManager extends Component {
|
||||
if (!config) return { channels, axes };
|
||||
|
||||
if (Array.isArray(config)) {
|
||||
// Very old legacy (array of channels)
|
||||
channels = config;
|
||||
} else if (config.groups) {
|
||||
// Group format (Recent) - Flatten it!
|
||||
config.groups.forEach(g => {
|
||||
if (g.channels) {
|
||||
channels = [...channels, ...g.channels];
|
||||
}
|
||||
// Merge axes? Just take first group's axes or default?
|
||||
// Let's defer to default or first group if present
|
||||
if (g.channels) channels = [...channels, ...g.channels];
|
||||
if (g.axes) {
|
||||
if (g.axes.left) axes.left = { ...axes.left, ...g.axes.left };
|
||||
if (g.axes.right) axes.right = { ...axes.right, ...g.axes.right };
|
||||
}
|
||||
});
|
||||
} else if (config.channels) {
|
||||
// Standard Legacy
|
||||
channels = config.channels;
|
||||
if (config.axes) axes = config.axes;
|
||||
}
|
||||
|
||||
// Normalize channels
|
||||
channels = channels.map((c, i) => ({
|
||||
...c,
|
||||
color: c.color || this.getNextColor(i)
|
||||
@@ -180,6 +171,31 @@ class ViewManager extends Component {
|
||||
this.refreshViews();
|
||||
};
|
||||
|
||||
moveView = async (idx, dir) => {
|
||||
const newViews = [...this.state.views];
|
||||
const target = idx + dir;
|
||||
if (target < 0 || target >= newViews.length) return;
|
||||
|
||||
[newViews[idx], newViews[target]] = [newViews[target], newViews[idx]];
|
||||
this.setState({ views: newViews });
|
||||
|
||||
const order = newViews.map((v, i) => ({ id: v.id, position: i }));
|
||||
const { user } = this.props;
|
||||
|
||||
try {
|
||||
await fetch('/api/views/reorder', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${user.token}`
|
||||
},
|
||||
body: JSON.stringify({ order })
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to save order", err);
|
||||
}
|
||||
};
|
||||
|
||||
handleSave = async () => {
|
||||
const { viewName, viewConfig, axisConfig, editingId } = this.state;
|
||||
const { user } = this.props;
|
||||
@@ -189,7 +205,6 @@ class ViewManager extends Component {
|
||||
const url = editingId ? `/api/views/${editingId}` : '/api/views';
|
||||
const method = editingId ? 'PUT' : 'POST';
|
||||
|
||||
// Save as flat format again
|
||||
const finalConfig = {
|
||||
channels: viewConfig,
|
||||
axes: axisConfig
|
||||
@@ -274,7 +289,6 @@ class ViewManager extends Component {
|
||||
}
|
||||
};
|
||||
|
||||
// --- Navigation ---
|
||||
handleRangeChange = (e, newVal) => {
|
||||
if (newVal) this.setState({ rangeLabel: newVal });
|
||||
};
|
||||
@@ -315,7 +329,6 @@ class ViewManager extends Component {
|
||||
|
||||
return (
|
||||
<Container maxWidth="xl" sx={{ mt: 4 }}>
|
||||
{/* Global Time Controls */}
|
||||
<Paper sx={{ position: 'sticky', top: 10, zIndex: 1000, p: 2, mb: 4, display: 'flex', alignItems: 'center', justifyContent: 'space-between', border: '1px solid #504945' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<ToggleButtonGroup value={rangeLabel} exclusive onChange={this.handleRangeChange} size="small">
|
||||
@@ -330,14 +343,21 @@ class ViewManager extends Component {
|
||||
{isAdmin && <Button variant="contained" startIcon={<AddIcon />} onClick={this.handleOpenCreate}>Create View</Button>}
|
||||
</Paper>
|
||||
|
||||
{/* View List */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
{views.map(view => {
|
||||
{views.map((view, vIdx) => {
|
||||
const { channels, axes } = this.parseViewData(view);
|
||||
return (
|
||||
<Paper key={view.id} sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
|
||||
<Typography variant="h4">{view.name}</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="h4">{view.name}</Typography>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<IconButton size="small" onClick={() => this.moveView(vIdx, -1)} disabled={vIdx === 0}><ArrowUpwardIcon /></IconButton>
|
||||
<IconButton size="small" onClick={() => this.moveView(vIdx, 1)} disabled={vIdx === views.length - 1}><ArrowDownwardIcon /></IconButton>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
{isAdmin && (
|
||||
<Box>
|
||||
<IconButton onClick={(e) => this.handleOpenEdit(view, e)}><EditIcon /></IconButton>
|
||||
@@ -364,7 +384,6 @@ class ViewManager extends Component {
|
||||
{views.length === 0 && <Typography>No views available.</Typography>}
|
||||
</Box>
|
||||
|
||||
{/* Edit Dialog */}
|
||||
<Dialog open={open} onClose={() => this.setState({ open: false })} maxWidth="md" fullWidth>
|
||||
<DialogTitle>{editingId ? 'Edit View' : 'Create New View'}</DialogTitle>
|
||||
<DialogContent>
|
||||
@@ -373,7 +392,6 @@ class ViewManager extends Component {
|
||||
onChange={(e) => this.setState({ viewName: e.target.value })} sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
{/* Axis Config */}
|
||||
<Box sx={{ p: 2, border: '1px solid #444', borderRadius: 1, mb: 2 }}>
|
||||
<Typography variant="subtitle2" gutterBottom>Axis Configuration</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
@@ -410,7 +428,6 @@ class ViewManager extends Component {
|
||||
))}
|
||||
</List>
|
||||
|
||||
{/* Add Channel */}
|
||||
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center', mt: 1, bgcolor: '#32302f', p: 1, borderRadius: 1 }}>
|
||||
<Select size="small" value={paramSelDevice} displayEmpty onChange={e => this.setState({ paramSelDevice: e.target.value })} sx={{ minWidth: 120 }}>
|
||||
<MenuItem value=""><em>Device</em></MenuItem>
|
||||
@@ -435,7 +452,6 @@ class ViewManager extends Component {
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
{/* Color Picker Dialog */}
|
||||
<Dialog open={colorPickerOpen} onClose={() => this.setState({ colorPickerOpen: false })}>
|
||||
<DialogTitle>Select Color</DialogTitle>
|
||||
<DialogContent>
|
||||
|
||||
Reference in New Issue
Block a user