feat: redesign dashboard with Fluent KPI tiles, connection strip, and devices column
- Replace LCD-style readings with a 3×2 KPI tile grid (Fluent card surfaces, 52pt values) - Add persistent top connection strip with horizontal chips + pump name badge - Add elapsed test timer (DispatcherTimer, mm:ss) to Test Summary card - Restyle Test Summary and Active Alarms with Fluent brushes/iconography - Add Devices column (CAN / K-Line / Bench tiles) between KPI grid and test/alarms - Enumerates attached PCAN USB channels via PCAN_ATTACHED_CHANNELS API - Enumerates FTDI K-Line adapters via existing FtdiInterface helpers - Click to connect/disconnect; confirmation dialog when session active or test running - Hover tint: blue = will connect, red = will disconnect; Bench row is read-only stub - Extend ICanService with SelectedChannel + EnumerateAttachedChannels() - Expose IKwpService.ConnectedPort for active session device tracking - Add DeviceRow button style with MultiDataTrigger hover colour logic - Add 30+ new localization keys (ES + EN) for KPI labels, devices, confirmations Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
272
Views/UserControls/DashboardDevicesView.xaml
Normal file
272
Views/UserControls/DashboardDevicesView.xaml
Normal file
@@ -0,0 +1,272 @@
|
||||
<UserControl x:Class="HC_APTBS.Views.UserControls.DashboardDevicesView"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
|
||||
xmlns:vm="clr-namespace:HC_APTBS.ViewModels.Pages"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
mc:Ignorable="d"
|
||||
d:DesignHeight="600" d:DesignWidth="280">
|
||||
<!--
|
||||
Devices column — three equal-height tiles (CAN / K-Line / Bench).
|
||||
DataContext is DashboardPageViewModel; all commands/collections are under Devices.
|
||||
-->
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="*"/>
|
||||
<RowDefinition Height="*"/>
|
||||
<RowDefinition Height="*"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- ── CAN tile ─────────────────────────────────────────────────────── -->
|
||||
<Border Grid.Row="0" Style="{StaticResource KpiTile}" Margin="0,0,0,4">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Tile header -->
|
||||
<DockPanel Grid.Row="0" Margin="0,0,0,8">
|
||||
<ui:SymbolIcon DockPanel.Dock="Left" Symbol="PlugConnected24" FontSize="14"
|
||||
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
|
||||
Margin="0,0,6,0" VerticalAlignment="Center"/>
|
||||
<TextBlock Text="{DynamicResource Dashboard.Devices.Can}"
|
||||
Style="{StaticResource KpiHeaderText}" VerticalAlignment="Center"/>
|
||||
<!-- Refresh button -->
|
||||
<Button DockPanel.Dock="Right"
|
||||
Command="{Binding Devices.RefreshCanDevicesCommand}"
|
||||
Background="Transparent" BorderThickness="0"
|
||||
Padding="4" Cursor="Hand"
|
||||
ToolTip="{DynamicResource Dashboard.Devices.Refresh}">
|
||||
<ui:SymbolIcon Symbol="ArrowClockwise24" FontSize="14"
|
||||
Foreground="{DynamicResource TextFillColorSecondaryBrush}"/>
|
||||
</Button>
|
||||
</DockPanel>
|
||||
|
||||
<!-- Device list or empty placeholder -->
|
||||
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
|
||||
<Grid>
|
||||
<!-- Placeholder when no devices are found -->
|
||||
<TextBlock>
|
||||
<TextBlock.Style>
|
||||
<Style TargetType="TextBlock">
|
||||
<Setter Property="Visibility" Value="Collapsed"/>
|
||||
<Setter Property="Text" Value="{DynamicResource Dashboard.Devices.None}"/>
|
||||
<Setter Property="FontSize" Value="12"/>
|
||||
<Setter Property="FontStyle" Value="Italic"/>
|
||||
<Setter Property="Foreground" Value="{DynamicResource TextFillColorTertiaryBrush}"/>
|
||||
<Setter Property="VerticalAlignment" Value="Center"/>
|
||||
<Setter Property="HorizontalAlignment" Value="Center"/>
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding Devices.CanDevices.Count}" Value="0">
|
||||
<Setter Property="Visibility" Value="Visible"/>
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</TextBlock.Style>
|
||||
</TextBlock>
|
||||
|
||||
<ItemsControl ItemsSource="{Binding Devices.CanDevices}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="{x:Type vm:DeviceItem}">
|
||||
<Button Style="{StaticResource DeviceRow}"
|
||||
Command="{Binding DataContext.Devices.ToggleDeviceCommand,
|
||||
RelativeSource={RelativeSource AncestorType=UserControl}}"
|
||||
CommandParameter="{Binding}"
|
||||
IsEnabled="{Binding IsEnabled}">
|
||||
<DockPanel>
|
||||
<TextBlock Text="{Binding StateLabel}"
|
||||
DockPanel.Dock="Right"
|
||||
FontSize="11" FontWeight="SemiBold"
|
||||
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
|
||||
VerticalAlignment="Center" Margin="6,0,0,0"/>
|
||||
<Ellipse DockPanel.Dock="Left">
|
||||
<Ellipse.Style>
|
||||
<Style TargetType="Ellipse" BasedOn="{StaticResource StatusDot}">
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding IsConnected}" Value="True">
|
||||
<Setter Property="Fill" Value="{DynamicResource SystemFillColorSuccessBrush}"/>
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Ellipse.Style>
|
||||
</Ellipse>
|
||||
<TextBlock Text="{Binding Name}"
|
||||
FontSize="13"
|
||||
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
|
||||
TextTrimming="CharacterEllipsis"
|
||||
VerticalAlignment="Center"/>
|
||||
</DockPanel>
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</Grid>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- ── K-Line tile ──────────────────────────────────────────────────── -->
|
||||
<Border Grid.Row="1" Style="{StaticResource KpiTile}" Margin="0,4,0,4">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Tile header -->
|
||||
<DockPanel Grid.Row="0" Margin="0,0,0,8">
|
||||
<ui:SymbolIcon DockPanel.Dock="Left" Symbol="UsbPlug24" FontSize="14"
|
||||
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
|
||||
Margin="0,0,6,0" VerticalAlignment="Center"/>
|
||||
<TextBlock Text="{DynamicResource Dashboard.Devices.Kline}"
|
||||
Style="{StaticResource KpiHeaderText}" VerticalAlignment="Center"/>
|
||||
<Button DockPanel.Dock="Right"
|
||||
Command="{Binding Devices.RefreshKLineDevicesCommand}"
|
||||
Background="Transparent" BorderThickness="0"
|
||||
Padding="4" Cursor="Hand"
|
||||
ToolTip="{DynamicResource Dashboard.Devices.Refresh}">
|
||||
<ui:SymbolIcon Symbol="ArrowClockwise24" FontSize="14"
|
||||
Foreground="{DynamicResource TextFillColorSecondaryBrush}"/>
|
||||
</Button>
|
||||
</DockPanel>
|
||||
|
||||
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
|
||||
<Grid>
|
||||
<TextBlock>
|
||||
<TextBlock.Style>
|
||||
<Style TargetType="TextBlock">
|
||||
<Setter Property="Visibility" Value="Collapsed"/>
|
||||
<Setter Property="Text" Value="{DynamicResource Dashboard.Devices.None}"/>
|
||||
<Setter Property="FontSize" Value="12"/>
|
||||
<Setter Property="FontStyle" Value="Italic"/>
|
||||
<Setter Property="Foreground" Value="{DynamicResource TextFillColorTertiaryBrush}"/>
|
||||
<Setter Property="VerticalAlignment" Value="Center"/>
|
||||
<Setter Property="HorizontalAlignment" Value="Center"/>
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding Devices.KLineDevices.Count}" Value="0">
|
||||
<Setter Property="Visibility" Value="Visible"/>
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</TextBlock.Style>
|
||||
</TextBlock>
|
||||
|
||||
<ItemsControl ItemsSource="{Binding Devices.KLineDevices}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="{x:Type vm:DeviceItem}">
|
||||
<Button Style="{StaticResource DeviceRow}"
|
||||
Command="{Binding DataContext.Devices.ToggleDeviceCommand,
|
||||
RelativeSource={RelativeSource AncestorType=UserControl}}"
|
||||
CommandParameter="{Binding}"
|
||||
IsEnabled="{Binding IsEnabled}">
|
||||
<DockPanel>
|
||||
<TextBlock Text="{Binding StateLabel}"
|
||||
DockPanel.Dock="Right"
|
||||
FontSize="11" FontWeight="SemiBold"
|
||||
VerticalAlignment="Center" Margin="6,0,0,0">
|
||||
<TextBlock.Style>
|
||||
<Style TargetType="TextBlock">
|
||||
<Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}"/>
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding IsConnected}" Value="True">
|
||||
<Setter Property="Foreground" Value="{DynamicResource SystemFillColorSuccessBrush}"/>
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</TextBlock.Style>
|
||||
</TextBlock>
|
||||
<Ellipse DockPanel.Dock="Left">
|
||||
<Ellipse.Style>
|
||||
<Style TargetType="Ellipse" BasedOn="{StaticResource StatusDot}">
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding IsConnected}" Value="True">
|
||||
<Setter Property="Fill" Value="{DynamicResource SystemFillColorSuccessBrush}"/>
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Ellipse.Style>
|
||||
</Ellipse>
|
||||
<TextBlock Text="{Binding Name}"
|
||||
FontSize="13"
|
||||
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
|
||||
TextTrimming="CharacterEllipsis"
|
||||
VerticalAlignment="Center"/>
|
||||
</DockPanel>
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</Grid>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- ── Bench tile ───────────────────────────────────────────────────── -->
|
||||
<Border Grid.Row="2" Style="{StaticResource KpiTile}" Margin="0,4,0,0">
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- Tile header (no refresh button — nothing to enumerate) -->
|
||||
<DockPanel Grid.Row="0" Margin="0,0,0,8">
|
||||
<ui:SymbolIcon DockPanel.Dock="Left" Symbol="DesktopPulse24" FontSize="14"
|
||||
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
|
||||
Margin="0,0,6,0" VerticalAlignment="Center"/>
|
||||
<TextBlock Text="{DynamicResource Dashboard.Devices.Bench}"
|
||||
Style="{StaticResource KpiHeaderText}" VerticalAlignment="Center"/>
|
||||
</DockPanel>
|
||||
|
||||
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
|
||||
<ItemsControl ItemsSource="{Binding Devices.BenchDevices}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="{x:Type vm:DeviceItem}">
|
||||
<!-- IsEnabled=false disables hover; Bench rows are not clickable -->
|
||||
<Button Style="{StaticResource DeviceRow}"
|
||||
IsEnabled="{Binding IsEnabled}">
|
||||
<DockPanel>
|
||||
<TextBlock Text="{Binding StateLabel}"
|
||||
DockPanel.Dock="Right"
|
||||
FontSize="11" FontWeight="SemiBold"
|
||||
VerticalAlignment="Center" Margin="6,0,0,0">
|
||||
<TextBlock.Style>
|
||||
<Style TargetType="TextBlock">
|
||||
<Setter Property="Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}"/>
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding IsConnected}" Value="True">
|
||||
<Setter Property="Foreground" Value="{DynamicResource SystemFillColorSuccessBrush}"/>
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</TextBlock.Style>
|
||||
</TextBlock>
|
||||
<Ellipse DockPanel.Dock="Left">
|
||||
<Ellipse.Style>
|
||||
<Style TargetType="Ellipse" BasedOn="{StaticResource StatusDot}">
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding IsConnected}" Value="True">
|
||||
<Setter Property="Fill" Value="{DynamicResource SystemFillColorSuccessBrush}"/>
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Ellipse.Style>
|
||||
</Ellipse>
|
||||
<TextBlock Text="{Binding Name}"
|
||||
FontSize="13"
|
||||
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
|
||||
TextTrimming="CharacterEllipsis"
|
||||
VerticalAlignment="Center"/>
|
||||
</DockPanel>
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
</Grid>
|
||||
</UserControl>
|
||||
Reference in New Issue
Block a user