Skip to content

Commit 19b4500

Browse files
CodingCodeSebCodingCodeSeb
committed
Produktkonfigurator hinzugefügt
1 parent 9102545 commit 19b4500

23 files changed

Lines changed: 358 additions & 73 deletions

‎Components/CarouselImage.razor‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<MudCarouselItem>
1+
@inject ImagePreviewService ImagePreview
2+
3+
<MudCarouselItem>
24
<MudStack AlignItems="AlignItems.Center" Justify="Justify.Center">
3-
<MudImage ObjectFit="ObjectFit.ScaleDown" Height="@ImageHeight" Width="@ImageWidth" Src="@ImageSrc" Alt="@ImageAlt" Class="rounded-lg" />
5+
<MudImage @onclick="@(()=>ImagePreview.Show(ImageSrc))" ObjectFit="ObjectFit.ScaleDown" Height="@ImageHeight" Width="@ImageWidth" Src="@ImageSrc" Alt="@ImageAlt" Class="rounded-lg" Style="cursor: pointer;" />
46
<MudText>@Description</MudText>
57
</MudStack>
68
</MudCarouselItem>

‎Components/ImagePreviewOverlayComponent.razor‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@using MudBlazor
2+
@inject ImagePreviewService PreviewService
3+
4+
<MudOverlay @bind-Visible=isVisible
5+
ZIndex="9999"
6+
AutoClose="true"
7+
DarkBackground>
8+
<MudStack Justify="Justify.FlexEnd" AlignItems="AlignItems.End">
9+
<MudIconButton Icon="@Icons.Material.Filled.Close"
10+
OnClick="@Close"
11+
Color="Color.Default" />
12+
@if (CurrentImage is not null)
13+
{
14+
15+
<div class="d-flex flex-column justify-center">
16+
<MudImage Elevation="4" Src="@CurrentImage" ObjectFit="ObjectFit.ScaleDown" />
17+
</div>
18+
}
19+
</MudStack>
20+
</MudOverlay>
21+
22+
23+

‎Components/ImagePreviewOverlayComponent.razor.cs‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
namespace CodingCodeSeb.Components;
2+
3+
public partial class ImagePreviewOverlayComponent
4+
{
5+
private bool isVisible = false;
6+
public bool IsVisible => isVisible;
7+
8+
public string? CurrentImage { get; private set; }
9+
10+
protected override void OnInitialized()
11+
{
12+
base.OnInitialized();
13+
PreviewService.ShowPreview += PreviewService_ShowPreview;
14+
}
15+
16+
private void PreviewService_ShowPreview(object? sender, ImagePreviewEventArgs e)
17+
{
18+
InvokeAsync(() =>
19+
{
20+
CurrentImage = e.Image;
21+
isVisible = true;
22+
StateHasChanged();
23+
});
24+
25+
}
26+
27+
private void Close()
28+
{
29+
isVisible = false;
30+
StateHasChanged();
31+
}
32+
}

‎ImagePreviewEventArgs.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
namespace CodingCodeSeb;
2+
3+
public class ImagePreviewEventArgs : EventArgs
4+
{
5+
public string Image { get; set; }
6+
7+
public ImagePreviewEventArgs(string image)
8+
{
9+
this.Image = image;
10+
}
11+
}

‎Layout/MainLayout.razor‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@inject NavigationManager NavigationManager
44

55
<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
6+
<ImagePreviewOverlayComponent/>
67
<MudPopoverProvider />
78
<MudDialogProvider />
89
<MudSnackbarProvider />
@@ -16,7 +17,12 @@
1617
<MudButton Href="/" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Home" Color="@(NavigationButtonColorFromUri(""))">Home</MudButton>
1718
<MudButton Href="/books" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Book" Color="@(NavigationButtonColorFromUri("books"))">Buchempfehlungen</MudButton>
1819
<MudButton Href="/talks" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Mic" Color="@(NavigationButtonColorFromUri("talks"))">Vorträge</MudButton>
19-
<MudButton Href="/projects" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.BarChart" Color="@(NavigationButtonColorFromUri("projects"))">Projekte</MudButton>
20+
21+
<MudMenu ActivationEvent="@MouseEvent.MouseOver" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.BarChart" Color="Color.Inherit" Label="Projekte">
22+
<MudMenuItem Href="/projects/productconfigurator" Icon="@Icons.Material.Filled.AppRegistration">Produktkonfigurator</MudMenuItem>
23+
<MudMenuItem Href="/projects/pdmexplorer" Icon="@Icons.Material.Filled.DesignServices">PDM Explorer</MudMenuItem>
24+
<MudMenuItem Href="/projects/mydms" Icon="@Icons.Custom.FileFormats.FileDocument">My DMS</MudMenuItem>
25+
</MudMenu>
2026
</MudStack>
2127
</MudHidden>
2228
<MudSpacer />
@@ -30,7 +36,6 @@
3036
<MudNavLink Href="/books" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Book">Buchempfehlungen</MudNavLink>
3137
<MudNavLink Href="/talks" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Mic">Vorträge</MudNavLink>
3238
<MudNavGroup Icon="@Icons.Material.Filled.BarChart" Title="Projekte" Expanded="true">
33-
<MudNavLink Href="/projects" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.ListAlt">Übersicht</MudNavLink>
3439
<MudNavLink Href="/projects/productconfigurator" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.AppRegistration">Produktkonfigurator</MudNavLink>
3540
<MudNavLink Href="/projects/pdmexplorer" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.DesignServices">PDM Explorer</MudNavLink>
3641
<MudNavLink Href="/projects/mydms" Match="NavLinkMatch.Prefix" Icon="@Icons.Custom.FileFormats.FileDocument">My DMS</MudNavLink>

‎Pages/Home.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
<MudItem xs="12" md="4" Class="d-flex justify-center">
2626
<MudAvatar Style="height: 180px; width: 180px;" Elevation="6">
27-
<MudImage Src="https://avatars.githubusercontent.com/u/CodingCodeSeb" Alt="Sebastian Avatar" />
27+
<MudImage Src="https://avatars.githubusercontent.com/u/CodingCodeSeb" Alt="Sebastians Avatar" />
2828
</MudAvatar>
2929
</MudItem>
3030
</MudGrid>

‎Pages/PdmExplorer.razor‎

Lines changed: 16 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,19 @@
11
@page "/projects/pdmexplorer"
22
<PageTitle>PDM Explorer</PageTitle>
33

4-
@* <MudStack Spacing="8" Class="mt-4" Style="max-width: 600px; margin-left: auto; margin-right: auto;" Justify="Justify.Center" AlignItems="AlignItems.Center">
5-
<MudText Typo="Typo.h3" Class="mb-2">PDM Explorer</MudText>
6-
<p>
7-
Der PDM Explorer ist ein Softwareprojekt mit dem Ziel, Stücklisten automatisiert aus SolidWorks in das ERP-System zu übertragen.
8-
In der ursprünglichen Version wurde die Anwendung entwickelt, um eine XML-basierte Kommunikation mit der oxaion business solution (ERP) zu ermöglichen.
9-
Aufgrund technischer Restriktionen des damaligen ERP-Systems, das keine weiterführenden Schnittstellen nach außen anbot,
10-
beschränkte sich der Datenaustausch auf das Schreiben von Artikelstämmen und Stücklistenpositionen.
11-
</p>
12-
<p>
13-
Die Einführung eines neuen ERP-Systems im Jahr 2022 machte eine grundlegende Überarbeitung des PDM Explorers erforderlich.
14-
Im Zuge dessen wurde die Anwendung auf Basis eines modernen UI-Frameworks vollständig neu strukturiert und modernisiert.
15-
</p>
16-
<p>
17-
Das Technologiespektrum umfasst folgende Komponenten:
18-
</p>
19-
<MudText Typo="Typo.subtitle1">Programmiersprache / Framework</MudText>
20-
<p>
21-
Die Implementierung erfolgte in C# auf Basis des aktuellen .NET-Frameworks (Version 10).
22-
</p>
23-
<MudText Typo="Typo.subtitle1">Grafische Benutzeroberfläche</MudText>
24-
<p>
25-
Da es sich sowohl bei SolidWorks als auch bei dem eingesetzten ERP-Client um native Windows-Anwendungen handelt,
26-
wurde die Windows Presentation Foundation (WPF) für die Benutzeroberfläche gewählt. Dies ermöglichte die Nutzung tiefgehender XAML-Kenntnisse
27-
aus vorangegangenen Projekten. Als Design-Fundament dient eine modifizierte Version von
28-
<MudLink Target="_blank" Href="https://github.com/Kinnara/ModernWpf">ModernWPF</MudLink>.
29-
</p>
30-
<MudText Typo="Typo.subtitle1">Datenbank</MudText>
31-
<p>
32-
Für das Speichern und Laden von Benutzereinstellungen wird eine schlanke SQLite-Datenbank ohne zusätzlichen OR-Mapper eingesetzt.
33-
</p>
34-
<MudText Typo="Typo.subtitle1">Deployment & Updates</MudText>
35-
<p>
36-
Aufgrund der Nutzung in einem spezialisierten Konstruktionsbüro erfolgt die Erstinstallation manuell.
37-
Die Update-Verteilung ist über einen integrierten Prüfmechanismus automatisiert: Bei jedem Anwendungsstart wird das System auf verfügbare
38-
Aktualisierungen geprüft und diese bei Bedarf direkt installiert.
39-
</p>
40-
<MudText Typo="Typo.subtitle1">Schnittstellen</MudText>
41-
<p>
42-
Die Anbindung an SolidWorks erfolgt über die native SolidWorks-API mittels der bereitgestellten C#-COM-Wrapper.
43-
Das neue ERP-System wird über eine moderne, webbasierte REST-API angesprochen. Diese erlaubt im Gegensatz zur Altlösung
44-
nicht nur das Lesen und Schreiben von Artikelstämmen und Stücklisten, sondern bietet flexiblen Zugriff auf den gesamten Funktionsumfang des ERP-Systems.
45-
</p>
46-
<MudCarousel Style="width: 100%; height: 300px;" ShowArrows ShowBullets EnableSwipeGesture TData="object">
47-
<CarouselImage ImageSrc="images/projects/pdmexplorer/login.jpg" ImageAlt="PDM Explorer Login" />
48-
<CarouselImage ImageSrc="images/projects/pdmexplorer/main.jpg" ImageAlt="PDM Explorer Main" />
49-
<CarouselImage ImageSrc="images/projects/pdmexplorer/schriftfeld.jpg" ImageAlt="PDM Explorer Schriftfeld" />
50-
<CarouselImage ImageSrc="images/projects/pdmexplorer/stueckliste.jpg" ImageAlt="PDM Explorer Stückliste" />
51-
<CarouselImage ImageSrc="images/projects/pdmexplorer/toolbox.jpg" ImageAlt="PDM Explorer Toolbox" />
52-
</MudCarousel>
53-
</MudStack> *@
54-
554
<MudContainer MaxWidth="MaxWidth.Medium" Class="mt-8 mb-12">
565
<!-- Header-Bereich -->
57-
<div class="d-flex flex-column align-center text-center mb-8">
58-
<MudText Typo="Typo.h3" Color="Color.Primary" Class="mb-2">PDM Explorer</MudText>
6+
<MudStack AlignItems="AlignItems.Center" class="text-center mb-8">
7+
<MudHidden Breakpoint="Breakpoint.SmAndDown">
8+
<MudText Typo="Typo.h3" Color="Color.Primary" Class="mb-2">PDM Explorer</MudText>
9+
</MudHidden>
10+
<MudHidden Breakpoint="Breakpoint.MdAndUp">
11+
<MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-2">PDM Explorer</MudText>
12+
</MudHidden>
5913
<MudText Typo="Typo.subtitle1" Class="text-muted" Style="max-width: 600px;">
6014
Automatisierte Stücklisten-Übertragung von SolidWorks in ERP-Systeme.
6115
</MudText>
62-
</div>
16+
</MudStack>
6317

6418
<!-- Projektbeschreibung -->
6519
<MudGrid Class="mb-8">
@@ -69,7 +23,7 @@
6923
<MudText Typo="Typo.h6">Ausgangslage & Herausforderung</MudText>
7024
</MudCardHeader>
7125
<MudCardContent>
72-
<MudText Typo="Typo.body1" Align="Align.Justify">
26+
<MudText Typo="Typo.body1">
7327
Der PDM Explorer ist ein Softwareprojekt mit dem Ziel, Stücklisten automatisiert aus SolidWorks in das ERP-System zu übertragen.
7428
In der ursprünglichen Version wurde die Anwendung entwickelt, um eine XML-basierte Kommunikation mit der oxaion business solution (ERP) zu ermöglichen.
7529
Aufgrund technischer Restriktionen des damaligen ERP-Systems, das keine weiterführenden Schnittstellen nach außen anbot,
@@ -84,7 +38,7 @@
8438
<MudText Typo="Typo.h6">Modernisierung (2022)</MudText>
8539
</MudCardHeader>
8640
<MudCardContent>
87-
<MudText Typo="Typo.body1" Align="Align.Justify">
41+
<MudText Typo="Typo.body1">
8842
Die Einführung eines neuen ERP-Systems im Jahr 2022 machte eine grundlegende Überarbeitung des PDM Explorers erforderlich.
8943
Im Zuge dessen wurde die Anwendung auf Basis eines modernen UI-Frameworks vollständig neu strukturiert und modernisiert.
9044
</MudText>
@@ -103,7 +57,7 @@
10357
</MudCardHeader>
10458
<MudCardContent>
10559
<MudStack Style="height: 100%;">
106-
<MudText Typo="Typo.body1" Align="Align.Justify">
60+
<MudText Typo="Typo.body1">
10761
Die Implementierung erfolgte in C# auf Basis des aktuellen .NET-Frameworks (Version 10).
10862
</MudText>
10963
<div style="flex-grow: 1;" />
@@ -123,7 +77,7 @@
12377
</MudCardHeader>
12478
<MudCardContent>
12579
<MudStack Style="height: 100%;">
126-
<MudText Typo="Typo.body1" Align="Align.Justify">
80+
<MudText Typo="Typo.body1">
12781
Da es sich sowohl bei SolidWorks als auch bei dem eingesetzten ERP-Client um native Windows-Anwendungen handelt,
12882
wurde die Windows Presentation Foundation (WPF) für die Benutzeroberfläche gewählt. Dies ermöglichte die Nutzung tiefgehender XAML-Kenntnisse
12983
aus vorangegangenen Projekten. Als Design-Fundament dient eine modifizierte Version von
@@ -146,7 +100,7 @@
146100
</MudCardHeader>
147101
<MudCardContent>
148102
<MudStack Style="height: 100%;">
149-
<MudText Typo="Typo.body1" Align="Align.Justify">
103+
<MudText Typo="Typo.body1">
150104
Für das Speichern und Laden von Benutzereinstellungen wird eine schlanke SQLite-Datenbank ohne zusätzlichen OR-Mapper eingesetzt.
151105
</MudText>
152106
<div style="flex-grow: 1;" />
@@ -165,7 +119,7 @@
165119
</MudCardHeader>
166120
<MudCardContent>
167121
<MudStack Style="height: 100%;">
168-
<MudText Typo="Typo.body1" Align="Align.Justify">
122+
<MudText Typo="Typo.body1">
169123
Aufgrund der Nutzung in einem spezialisierten Konstruktionsbüro erfolgt die Erstinstallation manuell.
170124
Die Update-Verteilung ist über einen integrierten Prüfmechanismus automatisiert: Bei jedem Anwendungsstart wird das System auf verfügbare
171125
Aktualisierungen geprüft und diese bei Bedarf direkt installiert.
@@ -182,7 +136,7 @@
182136
</MudCardHeader>
183137
<MudCardContent>
184138
<MudStack Style="height: 100%;">
185-
<MudText Typo="Typo.body1" Align="Align.Justify">
139+
<MudText Typo="Typo.body1">
186140
Die Anbindung an SolidWorks erfolgt über die native SolidWorks-API mittels der bereitgestellten C#-COM-Wrapper.
187141
Das neue ERP-System wird über eine moderne, webbasierte REST-API angesprochen. Diese erlaubt im Gegensatz zur Altlösung
188142
nicht nur das Lesen und Schreiben von Artikelstämmen und Stücklisten, sondern bietet flexiblen Zugriff auf den gesamten Funktionsumfang des ERP-Systems.
@@ -202,7 +156,7 @@
202156
<MudText Typo="Typo.h5" Color="Color.Primary" Class="font-weight-bold mb-4">Application Showcase</MudText>
203157
<MudCard Elevation="4" Class="pa-2">
204158
<MudStack AlignItems="AlignItems.Center" Justify="Justify.Center">
205-
<MudCarousel Style="width: 100%; height: 450px;" ShowArrows ShowBullets EnableSwipeGesture TData="object">
159+
<MudCarousel AutoCycle="false" Style="width: 100%; height: 450px;" ShowArrows ShowBullets EnableSwipeGesture TData="object">
206160
<CarouselImage ImageSrc="images/projects/pdmexplorer/login.jpg" Description="Login Fenster des PDM Explorers" ImageAlt="PDM Explorer Login" />
207161
<CarouselImage ImageSrc="images/projects/pdmexplorer/main.jpg" Description="Hauptnavigation" ImageAlt="PDM Explorer Main" />
208162
<CarouselImage ImageSrc="images/projects/pdmexplorer/schriftfeld.jpg" Description="Schriftfeldeinträge für Solid Works" ImageAlt="PDM Explorer Schriftfeld" />

0 commit comments

Comments
 (0)