- Modificata interfaccia card split

- Aggiunte icone shape per split
This commit is contained in:
Annamaria Sassi
2026-08-05 12:34:16 +02:00
parent 22a6796f3a
commit ea64a73bb8
13 changed files with 280 additions and 378 deletions
+1 -1
View File
@@ -31,7 +31,7 @@
{
<div class="col-auto">
<button type="button" class="btn @ButtonShapeCss(i.Id) shadow-sm mx-1 px-1 py-1" @onclick="() => SelShapeFrame(i.Id)">
<img class="img-fluid" src="@GetImagePath(i.Name)" title="@(i.Name)" width="40" />
<img class="img-fluid" src="@GetImageShapePath(i.Name)" title="@(i.Name)" width="40" />
</button>
</div>
@* <div class="col-auto">
+1 -1
View File
@@ -66,7 +66,7 @@ namespace WebWindowComplex.Compo
#region Protected Properties
private string GetImagePath(string fileName) => $"_content/Egw.Lux.WebWindowComplex/icone/shape/{fileName}.svg";
private string GetImageShapePath(string fileName) => $"_content/Egw.Lux.WebWindowComplex/icone/shape/{fileName}.svg";
/// <summary>
/// Metodo per selezionare shape
+106 -177
View File
@@ -3,8 +3,23 @@
<div class="card shadow-sm rounded mb-4">
<div class="card-header bg-light bg-opacity-25">
<div class="d-flex justify-content-between align-items-center">
<div class="px-2">
<h5>@(descParentSplit())</h5>
<div class="px-4">
<h5>@(descParentSplit()) - Split</h5>
</div>
<div class="col-md-3">
@if (!User)
{
@if ((CurrSplit.nSplitQtyVert == 1 && CurrSplit.nSplitQtyHoriz == 0) || (CurrSplit.nSplitQtyVert == 0 && CurrSplit.nSplitQtyHoriz == 1))
{
<button class="btn btn-outline-secondary btn-sm" @onclick="() => SwapTwoAree()">Swap Aree</button>
}
}
</div>
<div class="col-md-3">
@if (!User)
{
<button class="btn btn-outline-secondary btn-sm" @onclick="() => RemoveArea()">Remove split</button>
}
</div>
<div class="px-2">
<button class="btn btn-close" @onclick="ReqClose"></button>
@@ -12,26 +27,6 @@
</div>
</div>
<div class="card-body py-2">
@*<div class="d-flex justify-content-end align-items-center pb-2">
<div class="dropdown px-4">
<button class="btn btn-outline-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown">
Unità misura
</button>
<ul class="dropdown-menu" style="min-width:5rem; max-width:10rem">
<li><button class="@MeasureTypeCss(MeasureTypes.ABSOLUTE)" @onclick="() => SetMeasureType(MeasureTypes.ABSOLUTE)">Absolute</button></li>
<li><button class="@MeasureTypeCss(MeasureTypes.PROPORTIONAL)" @onclick="() => SetMeasureType(MeasureTypes.PROPORTIONAL)">Proportional</button></li>
<li><button class="@MeasureTypeCss(MeasureTypes.PERCENTAGE)" @onclick="() => SetMeasureType(MeasureTypes.PERCENTAGE)">Percentage</button></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown">
Measure type
</button>
<ul class="dropdown-menu" style="min-width:7rem; max-width:10rem">
<li><button class="dropdown-item fw-bold">Glass</button></li>
</ul>
</div>
</div> *@
<div class="d-flex justify-content-end align-items-center">
<div class="col-md-3">
<select class="form-select" @bind="@MeasureType">
@@ -46,90 +41,57 @@
</select>
</div>
</div>
<div class="d-flex justify-content-between align-items-center pt-2">
<h5>Split</h5>
@if (!User)
{
@if ((CurrSplit.nSplitQtyVert == 1 && CurrSplit.nSplitQtyHoriz == 0) || (CurrSplit.nSplitQtyVert == 0 && CurrSplit.nSplitQtyHoriz == 1))
<div class="row py-2">
<div class="col-md-12 col-lg-12">
@if (User)
{
<div class="input-group mb-2 justify-content-center">
<button class="btn btn-outline-secondary btn-sm" @onclick="() => SwapTwoAree()">Swap Aree</button>
</div>
}
<div class="input-group mb-2 justify-content-center">
<button class="btn btn-outline-secondary btn-sm" @onclick="() => RemoveArea()">Remove split</button>
</div>
}
@* <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#MeasureSettingModal">
<i class="fa-solid fa-gear"></i>
</button>
<div class="modal fade" id="MeasureSettingModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Measure settings</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="d-flex justify-content-between align-items-center pb-2">
<div class="col-md-6 px-2">
<select class="form-select" @bind="@MeasureType">
<option value="@MeasureTypes.ABSOLUTE">Absolute (mm)</option>
<option value="@MeasureTypes.PROPORTIONAL">Proportional (*)</option>
<option value="@MeasureTypes.PERCENTAGE">Percentage (%)</option>
</select>
</div>
<div class="col-md-6 px-2">
<select class="form-select">
<option value="1">Glass</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div> *@
</div>
<div class="row">
<div class="col-md-12 col-lg-6">
<div class="input-group mb-2">
@if (User)
{
<div class="input-group mb-2">
<span class="input-group-text">Shape</span>
<input type="text" readonly class="form-control" value="@(CurrSplit.SplitShapeList.FirstOrDefault(x => x.Id == SplitShapeIndex))">
}
else
{
<label class="input-group-text">Shape</label>
<select class="form-select" @bind="@SplitShapeIndex">
@foreach (var shapeType in CurrSplit.SplitShapeList)
</div>
}
else
{
<div class="d-flex justify-content-start align-items-center" style="min-height: 2.5rem;">
<h6 class="fw-bold">Shape</h6>
</div>
<div class="row align-items-center">
@foreach (var i in CurrSplit.SplitShapeList)
{
<div class="col-auto">
<button type="button" class="btn @ButtonShapeCss(i.Id) shadow-sm mx-1 px-1 py-1" @onclick="() => SelShapeSplit(i.Id)">
<img class="img-fluid" src="@GetImageShapePath(i.Name)" title="@(i.Name)" width="40" />
</button>
</div>
}
<div class="col-auto">
@if (CurrSplit.SelSplitShape == Json.WindowConst.SplitShapes.GRID)
{
<option value=@(shapeType.Id)>@(shapeType.Name)</option>
<div class="px-1">
@if (User)
{
<input class="form-check-input ml-auto me-1" disabled="disabled" type="checkbox" name="SplitStartVert" checked="@CurrSplit.bSplitStartVert">
<label class="form-check-label fs-6 text-dark">StartVert</label>
}
else
{
<input class="form-check-input ml-auto me-1" type="checkbox" name="SplitStartVert" checked="@CurrSplit.bSplitStartVert" @oninput="(ChangeEventArgs e) => ChangeStartVert(e)">
<label class="form-check-label fs-6 text-dark">StartVert</label>
}
</div>
}
</select>
}
</div>
</div>
</div>
}
</div>
</div>
<div class="row">
@if (CurrSplit.nSplitQtyVert > 0)
{
<div class="col-md-12 col-lg-6">
<div class="input-group mb-2">
<span class="input-group-text">QtyVert</span>
@if (User)
{
<input type="number" readonly class="form-control" value="@SplitQtyVert">
}
else
{
<input type="number" class="form-control" @bind="@SplitQtyVert">
}
</div>
</div>
}
@if (CurrSplit.nSplitQtyHoriz > 0)
{
<hr />
@if (CurrSplit.nSplitQtyHoriz > 0)
{
<div class="d-flex justify-content-start align-items-center" style="min-height: 2.5rem;">
<h6 class="fw-bold">Horizontal split</h6>
</div>
<div class="row">
<div class="col-md-12 col-lg-6">
<div class="input-group mb-2">
<span class="input-group-text">QtyHoriz</span>
@@ -143,103 +105,70 @@
}
</div>
</div>
}
</div>
<div class="row">
@if (CurrSplit.SplitVertList.Count > 0 && CurrSplit.SplitHorizList.Count > 0)
{
<div class="col-md-12 col-lg-6">
@for (int i = 0; i < CurrSplit.SplitVertList.Count; i++)
{
<EditSplitDimensions CurrRec="CurrSplit.SplitVertList[i]"
Name="Width"
Index="i"
EC_Update="UpdateDimension">
</EditSplitDimensions>
}
</div>
<div class="col-md-12 col-lg-6">
@for (int i = 0; i < CurrSplit.SplitHorizList.Count; i++)
{
<EditSplitDimensions CurrRec="CurrSplit.SplitHorizList[i]"
Name="Height"
Index="i"
EC_Update="UpdateDimension">
</EditSplitDimensions>
}
</div>
}
else if (CurrSplit.SplitHorizList.Count > 0)
{
</div>
<div class="row">
@for (int i = 0; i < CurrSplit.SplitHorizList.Count; i++)
{
<EditSplitDimensions CurrRec="CurrSplit.SplitHorizList[i]"
Name="Height"
Index="i"
EC_Update="UpdateDimension">
Name="Height"
Index="i"
EC_Update="UpdateDimension">
</EditSplitDimensions>
}
}
else if (CurrSplit.SplitVertList.Count > 0)
{
@for (int i = 0; i < CurrSplit.SplitVertList.Count; i++)
</div>
<div class="row">
@foreach (var element in horizList())
{
<EditSplitDimensions CurrRec="CurrSplit.SplitVertList[i]"
Name="Width"
Index="i"
EC_Update="UpdateDimension">
</EditSplitDimensions>
<div class="col-md-12 col-lg-6">
<EditSplitElement CurrRec="element" EC_Update="UpdateElement"></EditSplitElement>
</div>
}
}
</div>
@if (CurrSplit.SelSplitShape == Json.WindowConst.SplitShapes.GRID)
</div>
}
@if (CurrSplit.nSplitQtyVert > 0 && CurrSplit.nSplitQtyHoriz > 0)
{
<hr/>
}
@if (CurrSplit.nSplitQtyVert > 0)
{
<div class="row">
<div class="col-md-12 col-lg-6">
<div class="d-flex justify-content-start fs-5 mb-2">
<div class="px-1">
<div class="d-flex justify-content-start align-items-center" style="min-height: 2.5rem;">
<h6 class="fw-bold">Vertical split</h6>
</div>
<div class="row">
<div class="col-md-12 col-lg-6">
<div class="input-group mb-2">
<span class="input-group-text">QtyVert</span>
@if (User)
{
<input class="form-check-input ml-auto" disabled="disabled" type="checkbox" name="SplitStartVert" checked="@CurrSplit.bSplitStartVert">
<input type="number" readonly class="form-control" value="@SplitQtyVert">
}
else
{
<input class="form-check-input ml-auto" type="checkbox" name="SplitStartVert" checked="@CurrSplit.bSplitStartVert" @oninput="(ChangeEventArgs e) => ChangeStartVert(e)">
<input type="number" class="form-control" @bind="@SplitQtyVert">
}
</div>
<div class="px-2">
<label class="form-check-label fs-6 text-dark">StartVert</label>
</div>
</div>
</div>
</div>
<div class="row">
@for (int i = 0; i < CurrSplit.SplitVertList.Count; i++)
{
<EditSplitDimensions CurrRec="CurrSplit.SplitVertList[i]"
Name="Width"
Index="i"
EC_Update="UpdateDimension">
</EditSplitDimensions>
}
</div>
<div class="row">
@foreach (var element in vertList())
{
<div class="col-md-12 col-lg-6">
<EditSplitElement CurrRec="element" EC_Update="UpdateElement"></EditSplitElement>
</div>
}
</div>
}
<hr/>
<div class="row">
@if(CurrSplit.nSplitQtyVert > 0)
{
<div class="col-md-12 col-lg-6">
<div class="d-flex justify-content-start align-items-center px-2">
<h6>Element vert</h6>
</div>
@foreach (var element in vertList())
{
<EditSplitElement CurrRec="element" EC_Update="UpdateElement"></EditSplitElement>
}
</div>
}
@if(CurrSplit.nSplitQtyHoriz > 0)
{
<div class="col-md-12 col-lg-6">
<div class="d-flex justify-content-start align-items-center px-2">
<h6>Element horiz</h6>
</div>
@foreach (var element in horizList())
{
<EditSplitElement CurrRec="element" EC_Update="UpdateElement"></EditSplitElement>
}
</div>
}
</div>
</div>
</div>
+60 -22
View File
@@ -113,30 +113,32 @@ namespace WebWindowComplex.Compo
protected int SplitShapeIndex
{
get => CurrSplit.SelSplitShapeIndex;
set
{
if (CurrSplit.SelSplitShapeIndex != value)
{
CurrSplit.SelSplitShapeIndex = value;
var args = new DataUpdateSplit()
{
currSplit = CurrSplit
};
_ = EC_ReqResetDict.InvokeAsync(new DataUpdateRes { req = LayoutConst.DataAction.ResetDimElem });
if(!(CurrSplit.ParentArea.ParentArea is Sash))
{
// Se la shape selezionata è grid o custom, richiede reset shape
if (value == (int)SplitShapes.GRID || value == (int)SplitShapes.CUSTOM)
_ = EC_ReqResetDict.InvokeAsync(new DataUpdateRes { req = DataAction.ResetDictShape });
if (SearchSash(CurrSplit))
_ = EC_ReqResetDict.InvokeAsync(new DataUpdateRes { req = DataAction.ResetHwOpt });
}
_ = EC_ReqElement.InvokeAsync(CurrSplit);
_ = EC_UpdateSplit.InvokeAsync(args);
}
}
//set
//{
// if (CurrSplit.SelSplitShapeIndex != value)
// {
// CurrSplit.SelSplitShapeIndex = value;
// var args = new DataUpdateSplit()
// {
// currSplit = CurrSplit
// };
// _ = EC_ReqResetDict.InvokeAsync(new DataUpdateRes { req = LayoutConst.DataAction.ResetDimElem });
// if(!(CurrSplit.ParentArea.ParentArea is Sash))
// {
// // Se la shape selezionata è grid o custom, richiede reset shape
// if (value == (int)SplitShapes.GRID || value == (int)SplitShapes.CUSTOM)
// _ = EC_ReqResetDict.InvokeAsync(new DataUpdateRes { req = DataAction.ResetDictShape });
// if (SearchSash(CurrSplit))
// _ = EC_ReqResetDict.InvokeAsync(new DataUpdateRes { req = DataAction.ResetHwOpt });
// }
// _ = EC_ReqElement.InvokeAsync(CurrSplit);
// _ = EC_UpdateSplit.InvokeAsync(args);
// }
//}
}
private string GetImageShapePath(string fileName) => $"_content/Egw.Lux.WebWindowComplex/icone/split/{fileName}.svg";
private bool SearchSash(Area area)
{
if (area is Sash)
@@ -192,6 +194,29 @@ namespace WebWindowComplex.Compo
}
}
private async Task SelShapeSplit(int newShapeIndex)
{
if (CurrSplit.SelSplitShapeIndex != newShapeIndex)
{
CurrSplit.SelSplitShapeIndex = newShapeIndex;
var args = new DataUpdateSplit()
{
currSplit = CurrSplit
};
_ = EC_ReqResetDict.InvokeAsync(new DataUpdateRes { req = LayoutConst.DataAction.ResetDimElem });
if (!(CurrSplit.ParentArea.ParentArea is Sash))
{
// Se la shape selezionata è grid o custom, richiede reset shape
if (newShapeIndex == (int)SplitShapes.GRID || newShapeIndex == (int)SplitShapes.CUSTOM)
_ = EC_ReqResetDict.InvokeAsync(new DataUpdateRes { req = DataAction.ResetDictShape });
if (SearchSash(CurrSplit))
_ = EC_ReqResetDict.InvokeAsync(new DataUpdateRes { req = DataAction.ResetHwOpt });
}
_ = EC_ReqElement.InvokeAsync(CurrSplit);
_ = EC_UpdateSplit.InvokeAsync(args);
}
}
/// <summary>
/// Aggiornamento element
/// </summary>
@@ -444,6 +469,19 @@ namespace WebWindowComplex.Compo
}
return "btn btn-secondary";
}
/// <summary>
/// Metodo per la visualizzazione dei pulsanti shape
/// </summary>
/// <param name="index"></param>
/// <returns></returns>
private string ButtonShapeCss(int index)
{
string ans = "";
if (SplitShapeIndex == index)
ans = "active";
return ans;
}
}
/// <summary>
@@ -1,6 +1,7 @@
@using EgwCoreLib.Razor
<div class="@SplitDimCss()">
@* <div class="@SplitDimCss()"> *@
<div class="col-md-12 col-lg-6">
<div class="input-group mb-2">
<span class="input-group-text">@(Name + " " + (Index+ 1))</span>
<input type="number" class="form-control" @bind="@CurrVal">
@@ -37,7 +37,7 @@ namespace WebWindowComplex.Compo
/// </summary>
private double CurrVal
{
get => CurrRec.dDimension;
get => Math.Round(CurrRec.dDimension, CssDecimals());
set
{
if (CurrRec.dDimension != value)
@@ -75,17 +75,17 @@ namespace WebWindowComplex.Compo
}
}
private string SplitDimCss()
{
if(CurrRec.Parent is Split split)
{
if (split.SelSplitShape.Equals(Json.WindowConst.SplitShapes.GRID))
return "";
else
return "col-md-12 col-lg-6";
}
return "";
}
//private string SplitDimCss()
//{
// if(CurrRec.Parent is Split split)
// {
// if (split.SelSplitShape.Equals(Json.WindowConst.SplitShapes.GRID))
// return "";
// else
// return "col-md-12 col-lg-6";
// }
// return "";
//}
/// <summary>
/// Metodo per avere il numero di decimali da usare nella form-input
+4 -7
View File
@@ -222,11 +222,6 @@ namespace WebWindowComplex.Models
for(int i = 0; i < itemList.Count; i++)
ans.ElementAt(i).SetDimension(Math.Round(absoluteValue.ElementAt(i) / mcdList.FirstOrDefault()));
}
//int inedMin = absoluteValue.IndexOf(absoluteValue.Min());
//var mcd = CalculateMCD(absoluteValue.ElementAt(indexArea), absoluteValue.ElementAt(inedMin));
//itemList.ElementAt(inedMin).SetDimension(absoluteValue.ElementAt(inedMin) / mcd);
//itemList.ElementAt(indexArea).SetDimension(absoluteValue.ElementAt(indexArea) / mcd);
}
else
{
@@ -351,11 +346,13 @@ namespace WebWindowComplex.Models
if (sumPesi == 0) sumPesi = 1;
if (newType.Equals(MeasureTypes.ABSOLUTE))
{
return Math.Round(res / sumPesi * dDimension, 2);
return res / sumPesi * dDimension;
//return Math.Round(res / sumPesi * dDimension, 2);
}
else
{
return Math.Round((res / sumPesi * dDimension) / tot * 100);
return (res / sumPesi * dDimension) / tot * 100;
//return Math.Round((res / sumPesi * dDimension) / tot * 100, 2);
}
}
+1 -156
View File
@@ -6,7 +6,7 @@
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<Version>3.1.8.510</Version>
<Version>3.1.8.512</Version>
<Authors>Annamaria Sassi</Authors>
<Company>Egalware</Company>
<Description>Componente gestione Configurazioni avanzate Window per LUX</Description>
@@ -54,161 +54,6 @@
@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 37">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #92908d;
stroke-miterlimit: 10;
stroke-width: .85px;
}
.cls-2 {
fill: #92908d;
}
</style>
</defs>
<line class="cls-1" x1="23.46" y1="13.92" x2="32.01" y2="13.92"/>
<line class="cls-1" x1="4.8" y1="13.92" x2="13.94" y2="13.92"/>
<line class="cls-1" x1="23.54" y1="22.67" x2="31.86" y2="22.67"/>
<line class="cls-1" x1="4.65" y1="22.67" x2="13.86" y2="22.67"/>
<line class="cls-1" x1="23.39" y1="31.42" x2="31.79" y2="31.42"/>
<line class="cls-1" x1="4.58" y1="31.42" x2="13.79" y2="31.42"/>
<path class="cls-2" d="M31.47.83v35.26H5.45V.83h26.02M32.32-.02H4.6v36.96h27.72V-.02h0Z"/>
<path class="cls-1" d="M23.44,13.47c0-2.64-2.14-4.78-4.78-4.78s-4.78,2.14-4.78,4.78h0s0,22.82,0,22.82h9.58V13.47"/>
<line class="cls-1" x1="18.66" y1="8.69" x2="18.66" y2=".44"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 37">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #92908d;
stroke-miterlimit: 10;
stroke-width: .85px;
}
.cls-2 {
fill: #92908d;
}
</style>
</defs>
<path class="cls-2" d="M31.47.83v35.26H5.45V.83h26.02M32.32-.02H4.6v36.96h27.72V-.02h0Z"/>
<line class="cls-1" x1="5.21" y1="8.55" x2="31.82" y2="8.55"/>
<line class="cls-1" x1="5.15" y1="18.01" x2="31.76" y2="18.01"/>
<line class="cls-1" x1="5.32" y1="27.47" x2="31.93" y2="27.47"/>
<line class="cls-1" x1="13.4" y1=".71" x2="13.4" y2="36.21"/>
<line class="cls-1" x1="22.83" y1="-.02" x2="22.83" y2="36.21"/>
</svg>

After

Width:  |  Height:  |  Size: 781 B

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 37">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #92908d;
stroke-miterlimit: 10;
stroke-width: .85px;
}
.cls-2 {
fill: #92908d;
}
</style>
</defs>
<path class="cls-2" d="M31.47.83v35.26H5.45V.83h26.02M32.32-.02H4.6v36.96h27.72V-.02h0Z"/>
<line class="cls-1" x1="5.21" y1="8.55" x2="31.82" y2="8.55"/>
<line class="cls-1" x1="5.15" y1="18.01" x2="31.76" y2="18.01"/>
<line class="cls-1" x1="5.32" y1="27.47" x2="31.93" y2="27.47"/>
</svg>

After

Width:  |  Height:  |  Size: 650 B

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 37">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #92908d;
stroke-miterlimit: 10;
stroke-width: .85px;
}
.cls-2 {
fill: #92908d;
}
</style>
</defs>
<path class="cls-2" d="M31.47.83v35.26H5.45V.83h26.02M32.32-.02H4.6v36.96h27.72V-.02h0Z"/>
<line class="cls-1" x1="13.4" y1=".71" x2="13.4" y2="36.21"/>
<line class="cls-1" x1="22.83" y1="-.02" x2="22.83" y2="36.21"/>
</svg>

After

Width:  |  Height:  |  Size: 582 B