BOTAlex
/
Otakians
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made chatting mock-up and started working on accounts

This commit is contained in:
BOT Alex 2023-05-18 21:10:19 +02:00
parent e4112df60e
commit 826fd4d03c
3 changed files with 112 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Otakians/MainLayout.razor
View File

@ -24,7 +24,7 @@
</MudNavMenu>
</MudDrawer>
<MudMainContent Class="overflow-hidden" Style="height: 100vh;">
<MudMainContent Class="overflow-hidden" Style="min-height: 100vh">
@Body
</MudMainContent>
</MudLayout>
@ -53,4 +53,9 @@
{
await httpClient.PostAsJsonAsync("https://globalchat-4a89f-default-rtdb.europe-west1.firebasedatabase.app/Database/Users.json", new User());
}
protected override async Task OnInitializedAsync()
{
//Response.Cookies.Append("MyCookie", "value1");
}
}

1
Otakians/Otakians.csproj
View File

@ -7,6 +7,7 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazored.LocalStorage" Version="4.3.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.4" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.4" PrivateAssets="all" />
<PackageReference Include="MudBlazor" Version="6.2.5" />

107
Otakians/Pages/Chatting.razor
View File

@ -1,9 +1,112 @@
@page "/Chatting"
@using System.Globalization;
@inject NavigationManager NavManager
@inject HttpClient Http
<MudContainer Style="height: 100vh;">
<MudText>Test</MudText>
<MudContainer Class="justify-center">
<MudContainer Style="max-width: 400px; width: 100vw; min-width: 250px;">
<MudPaper Style="height: 80vh;" Class="mt-7 overflow-scroll">
@if (messages != null)
{
@for (int i = 0; i < messages.Length; i++)
{
Message message = messages[i];
<MudStack Class="px-4 py-2" Row="true">
<MudStack>
<MudPaper Class="overflow-hidden" Style="max-width: 320px" Elevation="4">
<MudText Typo="Typo.body1" Class="px-2 pt-2">@message.Content</MudText>
<MudText Class="pa-1" Style="font-size: 10px;">@("@" + message.Name)</MudText>
</MudPaper>
<MudText Class="mt-n3" Style="font-size: 10px;">@(DateTime.Now.ToString("dd/MM/yyyy HH:mm", danishCulture))</MudText>
</MudStack>
</MudStack>
}
}
<MudStack Class="px-4 py-2 d-flex" Justify="Justify.FlexEnd" Row="true" AlignItems="AlignItems.End">
<MudStack>
<MudPaper Style="max-width: 320px;" Class="mud-theme-primary" Elevation="4">
<MudText Typo="Typo.body1" Class="px-2 pt-2">World!</MudText>
<MudText Class="pa-1 pr-2" Align="Align.End" Style="font-size: 10px;">@("@Alex")</MudText>
</MudPaper>
<MudText Class="mt-n3" Align="Align.End" Style="font-size: 10px;">@(DateTime.Now.ToString("dd/MM/yyyy HH:mm", danishCulture))</MudText>
</MudStack>
</MudStack>
<MudStack Class="px-4 py-2" Row="true">
<MudStack>
<MudPaper Style="max-width: 320px" Elevation="4">
<MudText Typo="Typo.body1" Class="px-2 pt-2">How about a longer thing here?!?!?! Test testes tetst estestse testset estsete stestest</MudText>
<MudText Class="pa-1" Style="font-size: 10px;">@("@Adam")</MudText>
</MudPaper>
<MudText Class="mt-n3" Style="font-size: 10px;">@(DateTime.Now.ToString("dd/MM/yyyy HH:mm", danishCulture))</MudText>
</MudStack>
</MudStack>
<MudStack Class="px-4 py-2 d-flex" Justify="Justify.FlexEnd" Row="true" AlignItems="AlignItems.End">
<MudStack>
<MudPaper Style="max-width: 320px;" Class="mud-theme-primary" Elevation="4">
<MudText Typo="Typo.body1" Class="px-2 pt-2">It is working!</MudText>
<MudText Class="pa-1 pr-2" Align="Align.End" Style="font-size: 10px;">@("@Alex")</MudText>
</MudPaper>
<MudText Class="mt-n3" Align="Align.End" Style="font-size: 10px;">@(DateTime.Now.ToString("dd/MM/yyyy HH:mm", danishCulture))</MudText>
</MudStack>
</MudStack>
</MudPaper>
<MudContainer Class="d-flex pa-0">
<MudTextField Class="my-1" @bind-Value="TextValue" Label="Filled" Variant="Variant.Filled" Margin="Margin.Dense"></MudTextField>
<MudButton Class="my-1" Variant="Variant.Filled" Color="Color.Primary" Disabled="isSending" OnClick="SendMessage">
@if (isSending)
{
<MudProgressCircular Class="ms-n1 mr-2" Size="Size.Small" Indeterminate="true" />
}
else
{
<MudIcon Icon="@Icons.Material.Rounded.Send" Class="mr-1"/>
}
Send
</MudButton>
</MudContainer>
</MudContainer>
</MudContainer>
@code {
string TextValue = "";
bool isSending = false;
CultureInfo danishCulture = new CultureInfo("da-DK");
async void SendMessage()
{
isSending = true;
StateHasChanged();
await Task.Delay(3000);
//isSending = false;
messages = null;
NavManager.NavigateTo("/");
NavManager.NavigateTo("/Chatting");
}
Message[]? messages;
protected override async Task OnInitializedAsync()
{
if (messages == null)
messages = (await Http.GetFromJsonAsync<Message[]>("https://globalchat-4a89f-default-rtdb.europe-west1.firebasedatabase.app/Database/Messages.json"));
//for (int i = 0; i < messages.Length; i++)
//{
// Console.WriteLine($"Name: {messages[i].Name} Content: {messages[i].Content}");
//}
}
public class Message
{
public string? Content { get; set; }
public long DatePosted { get; set; }
public string? Name { get; set; }
}
}