Added ConnectionFailedMessage, Placeholder for Username,Chat,ChatsList

This commit is contained in:
Patrick Hellebrand
2021-09-21 13:29:21 +02:00
parent 4948d32a58
commit a9e1d93c7a
7 changed files with 157 additions and 44 deletions

View File

@@ -19,34 +19,36 @@
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- CONNECTION HEADER -->
<StackPanel HorizontalAlignment="Stretch">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="0 0 0 8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="56"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="textUsername" Text="No Name" VerticalAlignment="Center"/>
<Button Grid.Column="1" Click="OnOpenEditUsernameDialog" Content="Edit" HorizontalAlignment="Stretch"/>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="0 0 8 0" Text="Connect to" Foreground="{ThemeResource SystemColorDisabledTextColor}"/>
<TextBlock x:Name="ipAddress" Grid.Column="1"/>
</Grid>
<Border BorderThickness="1" BorderBrush="{ThemeResource AppBarBorderThemeBrush}" Margin="0 8"/>
<StackPanel HorizontalAlignment="Stretch" Spacing="8" Margin="0 0 0 8">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="56"/>
</Grid.ColumnDefinitions>
<TextBlock Text="My Chats" VerticalAlignment="Center"/>
<TextBlock x:Name="textUsername" VerticalAlignment="Center"/>
<TextBlock x:Name="textNoUsername" Text="No Name" Foreground="{ThemeResource SystemColorDisabledTextColor}" VerticalAlignment="Center"/>
<Button Grid.Column="1" Click="OnOpenEditUsernameDialog" Content="Edit" HorizontalAlignment="Stretch"/>
</Grid>
<Grid Margin="0 8 0 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Connect to" Foreground="{ThemeResource SystemColorDisabledTextColor}"/>
<TextBlock x:Name="ipAddress" Grid.Column="1"/>
</Grid>
<Border BorderThickness="1" BorderBrush="{ThemeResource AppBarBorderThemeBrush}"/>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="56"/>
</Grid.ColumnDefinitions>
<TextBlock Text="My Chats" VerticalAlignment="Center" FontSize="20"/>
<Button Grid.Column="1" Click="OnOpenNewChatDialog" Content="New" HorizontalAlignment="Stretch"/>
</Grid>
</StackPanel>
<!-- CHATS LIST -->
<TextBlock x:Name="textNoChats" Grid.Row="1" Text="No open Chats" Foreground="{ThemeResource SystemColorDisabledTextColor}" Margin="0 32 0 0" HorizontalAlignment="Center"/>
<ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden">
<ListView x:Name="listViewPartners" ItemsSource="{x:Bind Partners}" HorizontalAlignment="Stretch" Margin="0 8 0 0">
<ListView.ItemTemplate>
@@ -55,14 +57,14 @@
<StackPanel x:Name="ChatPartner" VerticalAlignment="Center" HorizontalAlignment="Stretch">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock HorizontalAlignment="Stretch" Text="{x:Bind Name}"/>
<TextBlock Text=" ("/>
<TextBlock Text="{x:Bind Code}"/>
<TextBlock Text=")"/>
<TextBlock Foreground="{ThemeResource SystemColorDisabledTextColor}" Text=" ("/>
<TextBlock Foreground="{ThemeResource SystemColorDisabledTextColor}" Text="{x:Bind Code}"/>
<TextBlock Foreground="{ThemeResource SystemColorDisabledTextColor}" Text=")"/>
</StackPanel>
<!--
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock HorizontalAlignment="Stretch" Text="{x:Bind Messages.Last().toString()}"/>
<TextBlock Text="{x:Bind Messages.Last().Date}"/>
<TextBlock Text="{x:Bind Message[Messages.Count()].Date}"/>
</StackPanel>
-->
</StackPanel>
@@ -72,8 +74,9 @@
</ListView>
</ScrollViewer>
</Grid>
<TextBlock x:Name="textNoChatSelected" Grid.Column="1" Text="No Chat Selected" Foreground="{ThemeResource SystemColorDisabledTextColor}" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<!-- RIGHT SIDE -->
<Grid Grid.Column="1">
<Grid x:Name="gridRight" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="64"/>
<RowDefinition Height="*"/>
@@ -112,9 +115,9 @@
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="inputSend" KeyDown="OnKeyDown" PlaceholderText="My message" VerticalAlignment="Center"/>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Button Content="Send" Click="OnSendMessage"/>
<TextBox x:Name="inputSend" KeyUp="OnKeyUp" PlaceholderText="My message" VerticalAlignment="Center"/>
<StackPanel Orientation="Horizontal" Grid.Column="1" Margin="16 0 0 0">
<Button x:Name="buttonSend" IsEnabled="False" Content="Send" Click="OnSendMessage" Foreground="{ThemeResource SystemColorButtonTextColor}" Background="{ThemeResource SystemAccentColor}"/>
</StackPanel>
</Grid>
</Grid>

View File

@@ -19,23 +19,42 @@ namespace PolyChat
{
private NetworkingController networkingController;
private ObservableCollection<ChatPartner> Partners;
private ChatPartner selectedPartner;
private ChatPartner selectedPartner = null;
private string username;
public MainPage()
{
this.InitializeComponent();
// init controller
networkingController = new NetworkingController(this);
Partners = new ObservableCollection<ChatPartner>();
// ui variables
ipAddress.Text = IP.GetCodeFromIP(networkingController.getIP().ToString());
Partners = new ObservableCollection<ChatPartner>();
updateNoChatsPlaceholder();
updateNoUsernamePlaceholder();
updateNoChatSelected();
updateSendButtonEnabled();
}
public async void ShowConnectionError(string message)
{
ConnectionFailedDialog dialog = new ConnectionFailedDialog(message);
var result = await dialog.ShowAsync();
if (result == ContentDialogResult.Primary)
{
//retry
}
// else abort -> del chat
}
// EVENTS
public void OnChatPartnerSelected(object sender, RoutedEventArgs e)
{
string code = ((RadioButton)sender).Tag.ToString();
selectedPartner = Partners.First(p => p.Code == code);
listViewMessages.ItemsSource = selectedPartner.Messages;
selectedPartnerName.Text = selectedPartner.Name;
updateNoChatSelected();
}
public void OnSendMessage(object sender = null, RoutedEventArgs e = null)
@@ -55,15 +74,13 @@ namespace PolyChat
var result = await dialog.ShowAsync();
if (result == ContentDialogResult.Primary)
{
string ip = dialog.getValue();
if (IP.ValidateIP(ip))
{
networkingController.connectNewClient(ip);
Partners.Add(new ChatPartner(
"Connecting...",
ip
));
}
string ip = IP.GetIPfromCode(dialog.getValue());
networkingController.connectNewClient(ip);
Partners.Add(new ChatPartner(
"Connecting...",
ip
));
updateNoChatsPlaceholder();
}
}
@@ -77,6 +94,7 @@ namespace PolyChat
if (username.Length == 0) textUsername.Text = "Unknown";
else textUsername.Text = username;
}
updateNoUsernamePlaceholder();
}
public void OnIncomingMessage(ChatMessage message)
@@ -92,14 +110,56 @@ namespace PolyChat
private void OnDeleteChat(object sender = null, RoutedEventArgs e = null)
{
Partners.Remove(selectedPartner);
updateNoChatsPlaceholder();
}
private void OnKeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
private void OnKeyUp(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
{
updateSendButtonEnabled();
if (e.Key == Windows.System.VirtualKey.Enter)
{
OnSendMessage();
}
}
// UPDATE FUNCTIONS FOR UI PLACEHOLDERS
private void updateNoChatsPlaceholder()
{
textNoChats.Visibility = Partners.Count() == 0 ? Visibility.Visible : Visibility.Collapsed;
}
private void updateNoUsernamePlaceholder()
{
if (username == null)
{
textNoUsername.Visibility = Visibility.Visible;
textUsername.Visibility = Visibility.Collapsed;
}
else
{
textNoUsername.Visibility = Visibility.Collapsed;
textUsername.Visibility = Visibility.Visible;
}
}
private void updateNoChatSelected()
{
if (selectedPartner != null)
{
gridRight.Visibility = Visibility.Visible;
textNoChatSelected.Visibility = Visibility.Collapsed;
}
else
{
gridRight.Visibility = Visibility.Collapsed;
textNoChatSelected.Visibility = Visibility.Visible;
}
}
private void updateSendButtonEnabled()
{
buttonSend.IsEnabled = inputSend.Text.Length != 0;
}
}
}

View File

@@ -134,6 +134,9 @@
<Compile Include="Controller.cs" />
<Compile Include="Properties\AssemblyInfo.cs" />
<Compile Include="Util\IP.cs" />
<Compile Include="Views\ConnectionFailedDialog.xaml.cs">
<DependentUpon>ConnectionFailedDialog.xaml</DependentUpon>
</Compile>
<Compile Include="Views\EditUsernameDialog.xaml.cs">
<DependentUpon>EditUsernameDialog.xaml</DependentUpon>
</Compile>
@@ -165,6 +168,10 @@
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
</Page>
<Page Include="Views\ConnectionFailedDialog.xaml">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
</Page>
<Page Include="Views\EditUsernameDialog.xaml">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>

View File

@@ -0,0 +1,17 @@
<ContentDialog x:Class="PolyChat.Views.ConnectionFailedDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:PolyChat.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="MessageDialog"
Title="Connection Failed"
PrimaryButtonText="Retry"
SecondaryButtonText="Abort"
mc:Ignorable="d">
<StackPanel>
<TextBlock Text="Message:" Foreground="{ThemeResource SystemColorDisabledTextColor}" Margin="0 0 0 8"/>
<TextBlock x:Name="textError" Foreground="{ThemeResource SystemErrorTextColor}"/>
</StackPanel>
</ContentDialog>

View File

@@ -0,0 +1,26 @@
using PolyChat.Models;
using PolyChat.Util;
using System;
using System.Collections.ObjectModel;
using System.Linq;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace PolyChat.Views
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class ConnectionFailedDialog : ContentDialog
{
public ConnectionFailedDialog(string message)
{
this.InitializeComponent();
textError.Text = message;
}
}
}

View File

@@ -13,7 +13,7 @@
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="16"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<TextBox x:Name="input" KeyUp="OnKeyUp" PlaceholderText="Marco Sattler"/>
<TextBlock Grid.Row="1" x:Name="textError" Text="Username cannot be empty" VerticalAlignment="Center" Foreground="{ThemeResource SystemErrorTextColor}"/>

View File

@@ -13,10 +13,10 @@
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<TextBox x:Name="input" KeyUp="OnKeyUp" PlaceholderText="Partner Code"/>
<TextBlock Grid.Row="1" x:Name="textSuccess" Text="Looking good" VerticalAlignment="Top" Foreground="{ThemeResource SystemAccentColor}" Visibility="Collapsed"/>
<TextBlock Grid.Row="1" x:Name="textError" Text="Invalid or empty Code" VerticalAlignment="Top" Foreground="{ThemeResource SystemErrorTextColor}" Visibility="Collapsed"/>
<TextBlock Grid.Row="1" x:Name="textSuccess" Text="Looking good" VerticalAlignment="Center" Foreground="{ThemeResource SystemAccentColor}" Visibility="Collapsed"/>
<TextBlock Grid.Row="1" x:Name="textError" Text="Invalid or empty Code" VerticalAlignment="Center" Foreground="{ThemeResource SystemErrorTextColor}" Visibility="Visible"/>
</Grid>
</ContentDialog>