From f91cf020f4479fe11876c30e4055a51f6ba2702f Mon Sep 17 00:00:00 2001 From: MateuszPawelczyk Date: Tue, 25 Oct 2022 06:53:13 +0200 Subject: [PATCH 1/5] added resize feature --- src/AasxServer.sln | 4 +- src/AasxServerBlazor/Pages/TreePage.razor | 196 ++++++++++-------- src/AasxServerBlazor/Pages/TreePage.razor.css | 9 + src/AasxServerBlazor/Pages/TreePage.razor.js | 3 + src/AasxServerBlazor/Pages/_Host.cshtml | 23 +- .../Properties/launchSettings.json | 6 +- .../Properties/launchSettings.json | 7 + 7 files changed, 149 insertions(+), 99 deletions(-) create mode 100644 src/AasxServerBlazor/Pages/TreePage.razor.css create mode 100644 src/AasxServerBlazor/Pages/TreePage.razor.js create mode 100644 src/AasxServerStandardBib/Properties/launchSettings.json diff --git a/src/AasxServer.sln b/src/AasxServer.sln index 4889e184d..09a804b08 100644 --- a/src/AasxServer.sln +++ b/src/AasxServer.sln @@ -1,7 +1,7 @@  Microsoft Visual Studio Solution File, Format Version 12.00 -# Visual Studio Version 16 -VisualStudioVersion = 16.0.32002.261 +# Visual Studio Version 17 +VisualStudioVersion = 17.3.32929.385 MinimumVisualStudioVersion = 10.0.40219.1 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AasxServerCore", "AasxServerCore\AasxServerCore.csproj", "{7C0704A8-85C7-4FC9-B12D-C7B9E63EF7B6}" EndProject diff --git a/src/AasxServerBlazor/Pages/TreePage.razor b/src/AasxServerBlazor/Pages/TreePage.razor index 9ce8ebd80..38ef9220e 100644 --- a/src/AasxServerBlazor/Pages/TreePage.razor +++ b/src/AasxServerBlazor/Pages/TreePage.razor @@ -1,5 +1,6 @@ @page "/" @inject AASService SubmodelService +@inject Microsoft.JSInterop.IJSRuntime JsRuntime; @using Microsoft.IdentityModel.Tokens; @using System @using System.Net; @@ -12,9 +13,21 @@ @implements IDisposable -
+@functions { + protected async override Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await JsRuntime.InvokeAsync("resize"); + } + } +} + +
+
-
+
+ @updateVisibleTree(Items, selectedNode) @if (Program.isLoading) {Loading...} @@ -28,18 +41,19 @@ @{ //// SubmodelService.syncSubTree(context); } - @ViewNodeType(context) - @ViewNodeID(context)@ViewNodeInfo(context) - @getSymbols(context) - @ViewTimeStamp(context) + @ViewNodeType(context) + ID: @ViewNodeID(context) Info: @ViewNodeInfo(context) + @getSymbols(context) + @ViewTimeStamp(context)
-
+ +
@{ - @ViewNodeType(selectedNode) - @ViewNodeID(selectedNode)
+ @ViewNodeType(selectedNode) + @ViewNodeID(selectedNode)
for (int line = 0; line < 6; line++) { string nodeDetails0 = ViewNodeDetails(selectedNode, line, 0); @@ -48,22 +62,22 @@ if (nodeDetails0 != "" && nodeDetails1 != "") { string detailsId="SelectedNodeDetailsLeft_" + line; - @nodeDetails0 + @nodeDetails0 detailsId = "SelectedNodeDetailsRight_" + line; - @nodeDetails1 @nodeDetails2
+ @nodeDetails1 @nodeDetails2
} } if (selectedNode != null && selectedNode.Tag is Referable r) { - UPDATE @r.TimeStamp.ToString("yy-MM-dd HH:mm:ss.fff")
-
- CREATE @r.TimeStampCreate.ToString("yy-MM-dd HH:mm:ss.fff")
- @code { + UPDATE @r.TimeStamp.ToString("yy-MM-dd HH:mm:ss.fff")
+
+ CREATE @r.TimeStampCreate.ToString("yy-MM-dd HH:mm:ss.fff")
+ @code { private void setTimeStamp() { (selectedNode.Tag as Referable).setTimeStamp(DateTime.UtcNow); } - } + } } // if (selectedNode != null && hasDownloadFile(selectedNode)) // { @@ -77,11 +91,11 @@ // if (externalLink) if (true) { - @link
+ @link
} else { -
+
} if (selectedNode != null && selectedNode.Tag is Submodel && Program.connectServer != "") { @@ -89,22 +103,22 @@ bool toSubscribe = Program.submodelsToSubscribe.Contains(selectedNode.Tag); if (toPublish) { - + } else { - + } if (toSubscribe) { - + } else { - + } //
- @code { + @code { private void resetSubmodelToPublish() { Program.submodelsToPublish.Remove(selectedNode.Tag); @@ -125,14 +139,14 @@ if (!toPublish) Program.submodelsToSubscribe.Add(selectedNode.Tag); } - } + } } } if (selectedNode != null && selectedNode.Tag is Property && Program.edit) { // @CurrentValue
- @CurrentValue
- @code { private string CurrentValue { get; set; } } + @CurrentValue
+ @code { private string CurrentValue { get; set; } } if (CurrentValue != null && CurrentValue != "") { if (selectedNode.Tag is Property) @@ -148,30 +162,30 @@ { if (selectedNode.Tag is AdministrationShell) { -
+
string qrcodeLink = getQRCodeLink(selectedNode); if (Program.generatedQrCodes.ContainsKey(selectedNode.Tag)) { string qrcodeImage = getQRCodeImage(selectedNode); if (qrcodeImage != "") { - -
- Qrcode Image -
-
+ +
+ Qrcode Image +
+
} } else { - @qrcodeLink
- } - @code { - private void runCreateQRCodeImage() - { - createQRCodeImage(selectedNode); - } + @qrcodeLink
} + @code { + private void runCreateQRCodeImage() + { + createQRCodeImage(selectedNode); + } + } } } @@ -259,49 +273,49 @@ if (System.IO.File.Exists(scottplotImgPath)) { - - - - - - - -
- - - - - - -
-
- -
- Visualization of time series - - Image processing took @elapsedMsToProcessImage ms (Last update: @timeStampPlot.ToString("yy-MM-dd HH:mm:ss.fff")) - -
- - + + + + + + + +
+ + + + + + +
+
+ +
+ Visualization of time series + + Image processing took @elapsedMsToProcessImage ms (Last update: @timeStampPlot.ToString("yy-MM-dd HH:mm:ss.fff")) + +
+ + } else { -
Rendering time series...
+
Rendering time series...
} } else @@ -315,10 +329,10 @@ string detailsImage = createDetailsImage(selectedNode); if (detailsImage != "") { -
-
- Details Image -
+
+
+ Details Image +
} if (selectedNode != null && (selectedNode.Tag is AdminShellNS.AdminShellV20.BasicEvent be)) @@ -326,17 +340,17 @@ if (be.observed != null) { string okey = be.observed.GetAsExactlyOneKey().ToString(); - Observed - @(" " + okey)
+ Observed + @(" " + okey)
var refsme = Program.env[0].AasEnv.FindReferableByReference(be.observed); if (refsme != null) { - UPDATE @refsme.TimeStamp.ToString("yy-MM-dd HH:mm:ss.fff")
- CREATE @refsme.TimeStampCreate.ToString("yy-MM-dd HH:mm:ss.fff")
+ UPDATE @refsme.TimeStamp.ToString("yy-MM-dd HH:mm:ss.fff")
+ CREATE @refsme.TimeStampCreate.ToString("yy-MM-dd HH:mm:ss.fff")
} else { - Referenced element does not exist!
+ Referenced element does not exist!
} } } @@ -346,6 +360,8 @@
+ + @inject IJSRuntime js @inject BlazorSessionService bi; @using AasxServer; @@ -2091,4 +2107,8 @@ .modal-fullscreen .modal-body { overflow-y: auto; } +.resize { + min-width: 20%; +} + diff --git a/src/AasxServerBlazor/Pages/TreePage.razor.css b/src/AasxServerBlazor/Pages/TreePage.razor.css new file mode 100644 index 000000000..2b3329bd5 --- /dev/null +++ b/src/AasxServerBlazor/Pages/TreePage.razor.css @@ -0,0 +1,9 @@ +.test { + color: red; + background-color: yellow; +} + +h1 { + color: purple; + background-color: yellow; +} \ No newline at end of file diff --git a/src/AasxServerBlazor/Pages/TreePage.razor.js b/src/AasxServerBlazor/Pages/TreePage.razor.js new file mode 100644 index 000000000..a625f901b --- /dev/null +++ b/src/AasxServerBlazor/Pages/TreePage.razor.js @@ -0,0 +1,3 @@ +$('.left_inner').resizable(); +$('.right_top_inner').resizable(); +$('.right_bottom_inner').resizable(); \ No newline at end of file diff --git a/src/AasxServerBlazor/Pages/_Host.cshtml b/src/AasxServerBlazor/Pages/_Host.cshtml index 59ec042d7..e7378f1b1 100644 --- a/src/AasxServerBlazor/Pages/_Host.cshtml +++ b/src/AasxServerBlazor/Pages/_Host.cshtml @@ -16,13 +16,15 @@ --> - @{ - if (System.IO.File.Exists("TAILWIND.DAT")) - { + - } - } + + + + + + + + @(await Html.RenderComponentAsync(RenderMode.ServerPrerendered)) - + + diff --git a/src/AasxServerBlazor/Properties/launchSettings.json b/src/AasxServerBlazor/Properties/launchSettings.json index b6b92bb23..5225782dc 100644 --- a/src/AasxServerBlazor/Properties/launchSettings.json +++ b/src/AasxServerBlazor/Properties/launchSettings.json @@ -18,13 +18,13 @@ }, "AasxServerBlazor": { "commandName": "Project", - "commandLineArgs": "--rest --data-path \"C:\\Development\\AASX\" --edit --external-blazor http://localhost:5001 --no-security", + "commandLineArgs": "--rest --data-path \"C:\\Users\\Mateusz Pawelczyk\\Documents\\Arbeit\\aasx_files\" --edit --no-security", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" }, - "applicationUrl": "http://localhost:5001", - "jsWebView2Debugging": true + "jsWebView2Debugging": true, + "applicationUrl": "http://localhost:5001" } } } \ No newline at end of file diff --git a/src/AasxServerStandardBib/Properties/launchSettings.json b/src/AasxServerStandardBib/Properties/launchSettings.json new file mode 100644 index 000000000..37baff7c3 --- /dev/null +++ b/src/AasxServerStandardBib/Properties/launchSettings.json @@ -0,0 +1,7 @@ +{ + "profiles": { + "AasxServerStandardBib": { + "commandName": "Project" + } + } +} \ No newline at end of file From caa747ecc5aafb1b5e371ddea38af130f8042e32 Mon Sep 17 00:00:00 2001 From: MateuszPawelczyk Date: Tue, 25 Oct 2022 14:14:54 +0200 Subject: [PATCH 2/5] fixed resize bug --- src/AasxServerBlazor/Pages/TreePage.razor | 169 +++++++++--------- src/AasxServerBlazor/Pages/_Host.cshtml | 5 +- .../Properties/launchSettings.json | 18 +- 3 files changed, 99 insertions(+), 93 deletions(-) diff --git a/src/AasxServerBlazor/Pages/TreePage.razor b/src/AasxServerBlazor/Pages/TreePage.razor index 38ef9220e..fdbdc4f1a 100644 --- a/src/AasxServerBlazor/Pages/TreePage.razor +++ b/src/AasxServerBlazor/Pages/TreePage.razor @@ -23,7 +23,7 @@ } } -
+

@@ -39,12 +39,13 @@ HasChildNodes="@(item => item.Childs?.Any() == true)" HtmlId="@(item => GetHtmlId(item))"> - @{ //// SubmodelService.syncSubTree(context); + @{ + //// SubmodelService.syncSubTree(context); } - @ViewNodeType(context) - ID: @ViewNodeID(context) Info: @ViewNodeInfo(context) - @getSymbols(context) - @ViewTimeStamp(context) + @ViewNodeType(context) + @ViewNodeID(context)@ViewNodeInfo(context) + @getSymbols(context) + @ViewTimeStamp(context)
@@ -52,8 +53,8 @@
@{ - @ViewNodeType(selectedNode) - @ViewNodeID(selectedNode)
+ @ViewNodeType(selectedNode) + @ViewNodeID(selectedNode)
for (int line = 0; line < 6; line++) { string nodeDetails0 = ViewNodeDetails(selectedNode, line, 0); @@ -62,22 +63,22 @@ if (nodeDetails0 != "" && nodeDetails1 != "") { string detailsId="SelectedNodeDetailsLeft_" + line; - @nodeDetails0 + @nodeDetails0 detailsId = "SelectedNodeDetailsRight_" + line; - @nodeDetails1 @nodeDetails2
+ @nodeDetails1 @nodeDetails2
} } if (selectedNode != null && selectedNode.Tag is Referable r) { - UPDATE @r.TimeStamp.ToString("yy-MM-dd HH:mm:ss.fff")
-
- CREATE @r.TimeStampCreate.ToString("yy-MM-dd HH:mm:ss.fff")
- @code { + UPDATE @r.TimeStamp.ToString("yy-MM-dd HH:mm:ss.fff")
+
+ CREATE @r.TimeStampCreate.ToString("yy-MM-dd HH:mm:ss.fff")
+ @code { private void setTimeStamp() { (selectedNode.Tag as Referable).setTimeStamp(DateTime.UtcNow); } - } + } } // if (selectedNode != null && hasDownloadFile(selectedNode)) // { @@ -91,11 +92,11 @@ // if (externalLink) if (true) { - @link
+ @link
} else { -
+
} if (selectedNode != null && selectedNode.Tag is Submodel && Program.connectServer != "") { @@ -103,22 +104,22 @@ bool toSubscribe = Program.submodelsToSubscribe.Contains(selectedNode.Tag); if (toPublish) { - + } else { - + } if (toSubscribe) { - + } else { - + } //
- @code { + @code { private void resetSubmodelToPublish() { Program.submodelsToPublish.Remove(selectedNode.Tag); @@ -139,14 +140,14 @@ if (!toPublish) Program.submodelsToSubscribe.Add(selectedNode.Tag); } - } + } } } if (selectedNode != null && selectedNode.Tag is Property && Program.edit) { // @CurrentValue
- @CurrentValue
- @code { private string CurrentValue { get; set; } } + @CurrentValue
+ @code { private string CurrentValue { get; set; } } if (CurrentValue != null && CurrentValue != "") { if (selectedNode.Tag is Property) @@ -162,30 +163,30 @@ { if (selectedNode.Tag is AdministrationShell) { -
+
string qrcodeLink = getQRCodeLink(selectedNode); if (Program.generatedQrCodes.ContainsKey(selectedNode.Tag)) { string qrcodeImage = getQRCodeImage(selectedNode); if (qrcodeImage != "") { - -
- Qrcode Image -
-
+ +
+ Qrcode Image +
+
} } else { - @qrcodeLink
+ @qrcodeLink
} - @code { + @code { private void runCreateQRCodeImage() { createQRCodeImage(selectedNode); } - } + } } } @@ -273,49 +274,49 @@ if (System.IO.File.Exists(scottplotImgPath)) { - - - - - - - -
- - - - - - -
-
- -
- Visualization of time series - - Image processing took @elapsedMsToProcessImage ms (Last update: @timeStampPlot.ToString("yy-MM-dd HH:mm:ss.fff")) - -
- - + + + + + + + +
+ + + + + + +
+
+ +
+ Visualization of time series + + Image processing took @elapsedMsToProcessImage ms (Last update: @timeStampPlot.ToString("yy-MM-dd HH:mm:ss.fff")) + +
+ + } else { -
Rendering time series...
+
Rendering time series...
} } else @@ -329,10 +330,10 @@ string detailsImage = createDetailsImage(selectedNode); if (detailsImage != "") { -
-
- Details Image -
+
+
+ Details Image +
} if (selectedNode != null && (selectedNode.Tag is AdminShellNS.AdminShellV20.BasicEvent be)) @@ -340,17 +341,17 @@ if (be.observed != null) { string okey = be.observed.GetAsExactlyOneKey().ToString(); - Observed - @(" " + okey)
+ Observed + @(" " + okey)
var refsme = Program.env[0].AasEnv.FindReferableByReference(be.observed); if (refsme != null) { - UPDATE @refsme.TimeStamp.ToString("yy-MM-dd HH:mm:ss.fff")
- CREATE @refsme.TimeStampCreate.ToString("yy-MM-dd HH:mm:ss.fff")
+ UPDATE @refsme.TimeStamp.ToString("yy-MM-dd HH:mm:ss.fff")
+ CREATE @refsme.TimeStampCreate.ToString("yy-MM-dd HH:mm:ss.fff")
} else { - Referenced element does not exist!
+ Referenced element does not exist!
} } } @@ -2109,6 +2110,8 @@ } .resize { min-width: 20%; + max-width: 80%; + padding: 10px; } diff --git a/src/AasxServerBlazor/Pages/_Host.cshtml b/src/AasxServerBlazor/Pages/_Host.cshtml index e7378f1b1..bc8cfce9a 100644 --- a/src/AasxServerBlazor/Pages/_Host.cshtml +++ b/src/AasxServerBlazor/Pages/_Host.cshtml @@ -212,7 +212,10 @@ - - - - - - - - - - - + + + AasxServerBlazor + + + + + + + + + + + + + + + + + + + - - @(await Html.RenderComponentAsync(RenderMode.ServerPrerendered)) - - - - + + @(await Html.RenderComponentAsync(RenderMode.ServerPrerendered)) + + + + From c12a457647c832a01dff09a30c8e9d60ba4b2cc4 Mon Sep 17 00:00:00 2001 From: MateuszPawelczyk Date: Tue, 8 Nov 2022 11:30:38 +0100 Subject: [PATCH 4/5] adapted ui of the left side to the AASX Package Explorer --- src/AasxServerBlazor/Pages/Tree.razor | 100 ++++++++++++---------- src/AasxServerBlazor/Pages/TreePage.razor | 19 ++-- 2 files changed, 64 insertions(+), 55 deletions(-) diff --git a/src/AasxServerBlazor/Pages/Tree.razor b/src/AasxServerBlazor/Pages/Tree.razor index 0b636d8f1..0a0c11d42 100644 --- a/src/AasxServerBlazor/Pages/Tree.razor +++ b/src/AasxServerBlazor/Pages/Tree.razor @@ -15,57 +15,71 @@ https://github.com/mwinkler/Blazor.Components/blob/master/LICENSE var nodeExpanded = ExpandedNodes.Contains(node); var nodeSelected = node.Equals(SelectedNode); var hasChilds = HasChildNodes(node); + var isAas = (node as Item).Tag is AdministrationShell; + var isSubmodel = (node as Item).Tag is Submodel; + var color = ""; + + if (isAas) + { + color = "#88A6D2"; + } + else if (isSubmodel) + { + color = "#CBD8EB"; + } + else + { + color = "#F4F4F5"; + } // @("nodeExpanded " + nodeExpanded + " nodeSelected " + nodeSelected + " hasChilds " + hasChilds) + @if (hasChilds) + { -
+ string iconId = ""; + if (AasxServer.Program.htmlId) + iconId = HtmlId(node as Item) + "._icon"; +
+ + + +
+ + } +
- @if (hasChilds) - { - - string iconId = ""; - if (AasxServer.Program.htmlId) - iconId = HtmlId(node as Item) + "._icon"; -
- - - + + +
+ @{ + string titleId = ""; + if (AasxServer.Program.htmlId) + titleId = HtmlId(node as Item) + "._title"; + + @TitleTemplate(node) @{ + /* @(" " + node.GetHashCode() + " ") */ + } + + }
- } - -
- @{ - string titleId = ""; - if (AasxServer.Program.htmlId) - titleId = HtmlId(node as Item) + "._title"; - - @TitleTemplate(node) @{ - /* @(" " + node.GetHashCode() + " ") */ - } - - }
-
- - @if (hasChilds) +
+ @if (hasChilds) + { + if (nodeExpanded) { - if (nodeExpanded) - { -
- -
- } + } + } -
}
diff --git a/src/AasxServerBlazor/Pages/TreePage.razor b/src/AasxServerBlazor/Pages/TreePage.razor index d038ff70f..dc3883afd 100644 --- a/src/AasxServerBlazor/Pages/TreePage.razor +++ b/src/AasxServerBlazor/Pages/TreePage.razor @@ -25,7 +25,7 @@
-
+
@updateVisibleTree(Items, selectedNode) @if (Program.isLoading) @@ -43,17 +43,11 @@ @{ //// SubmodelService.syncSubTree(context); } - -
- @ViewNodeType(context) -
-
-
- @ViewNodeID(context)@ViewNodeInfo(context) - @getSymbols(context) -
-

@ViewTimeStamp(context)

-
+ +
@ViewNodeType(context)
+ @ViewNodeID(context)@ViewNodeInfo(context) + @getSymbols(context) +
@ViewTimeStamp(context)
@@ -68,6 +62,7 @@
@{ + // TODO: REFACTORING! @ViewNodeType(selectedNode) @ViewNodeID(selectedNode) From 491f3f702f39b2ca17798c8994b498c99f36d227 Mon Sep 17 00:00:00 2001 From: MateuszPawelczyk Date: Tue, 8 Nov 2022 12:40:07 +0100 Subject: [PATCH 5/5] started refactoring code --- src/AasxServerBlazor/Pages/TreePage.razor | 62 +++++++++++++---------- 1 file changed, 34 insertions(+), 28 deletions(-) diff --git a/src/AasxServerBlazor/Pages/TreePage.razor b/src/AasxServerBlazor/Pages/TreePage.razor index dc3883afd..f8682e127 100644 --- a/src/AasxServerBlazor/Pages/TreePage.razor +++ b/src/AasxServerBlazor/Pages/TreePage.razor @@ -49,11 +49,6 @@ @getSymbols(context)
@ViewTimeStamp(context)
- - - - -
@@ -63,25 +58,34 @@
@{ // TODO: REFACTORING! - @ViewNodeType(selectedNode) - @ViewNodeID(selectedNode) -
+ // ideas: + // - get rid of spans -> better: use inline divs with tailwind classes instead of style paramters + // - use tailwind grid + // - making private methods and/or components + + // Displaying node type and node name +
+ @ViewNodeType(selectedNode) + @ViewNodeID(selectedNode) +
+ for (int line = 0; line < 6; line++) { - string nodeDetails0 = ViewNodeDetails(selectedNode, line, 0); - string nodeDetails1 = ViewNodeDetails(selectedNode, line, 1); - string nodeDetails2 = ViewNodeDetails(selectedNode, line, 2); - if (nodeDetails0 != "" && nodeDetails1 != "") - { - string detailsId = "SelectedNodeDetailsLeft_" + line; - @nodeDetails0 - detailsId = "SelectedNodeDetailsRight_" + line; - @nodeDetails1 @nodeDetails2 + string nodeType = ViewNodeDetails(selectedNode, line, 0); + string nodeValue = ViewNodeDetails(selectedNode, line, 1); + string additionalInformationOfNode = ViewNodeDetails(selectedNode, line, 2); -
+ if (nodeType != string.Empty && nodeValue != string.Empty) + { +
+ @nodeType + @nodeValue @additionalInformationOfNode" +
} } + + if (selectedNode != null && selectedNode.Tag is Referable r) { UPDATE @r.TimeStamp.ToString("yy-MM-dd HH:mm:ss.fff") @@ -422,6 +426,8 @@ ListOfTimeSeriesData _timeSeriesData = new ListOfTimeSeriesData(); int plotFilterTsdOffset = 0; + string informationType = "text-white bg-[blue]"; + private class PlotFilter { public DateTime fromDate { get; set; } @@ -521,10 +527,10 @@ */ /* await js.InvokeAsync( - "download", - data, - filename, - "application/pdf" + "download", + data, + filename, + "application/pdf" ); */ } @@ -589,10 +595,10 @@ /* refresh = new System.Threading.Timer(new System.Threading.TimerCallback(_ => - { - // Note that the following line is necessary because otherwise - // Blazor would not recognize the state change and not refresh the UI - // InvokeAsync(() => this.StateHasChanged()); + { + // Note that the following line is necessary because otherwise + // Blazor would not recognize the state change and not refresh the UI + // InvokeAsync(() => this.StateHasChanged()); }), null, 5000, 5000); */ } @@ -1515,8 +1521,8 @@ ret = "ISSUER"; if (col == 1) ret = s[1]; - } - } + } + } break; */ case 5: