Skip to content

Commit

Permalink
done
Browse files Browse the repository at this point in the history
  • Loading branch information
@neozhu
neozhu committed Dec 16, 2024
1 parent 248b158 commit 4c62541
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 42 deletions.
44 changes: 5 additions & 39 deletions src/CleanAspire.ClientApp/Components/OfflineSyncStatus.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,19 @@
<div class="d-flex justify-center align-center flex-row gap-2">
@if (OfflineSyncService.CurrentStatus == SyncStatus.Idle)
{
<MudIcon>
<svg width="24" height="24" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- 第1个圆点 (蓝色) -->
<circle cx="50" cy="30" r="5" fill="#3498db">
<animate attributeName="r" values="5;7;5" dur="1.2s" repeatCount="indefinite" begin="0s" />
</circle>

<!-- 第2个圆点 (红色) -->
<circle cx="50" cy="50" r="5" fill="#e74c3c">
<animate attributeName="r" values="5;7;5" dur="1.2s" repeatCount="indefinite" begin="0.2s" />
</circle>

<!-- 第3个圆点 (黄色) -->
<circle cx="50" cy="70" r="5" fill="#f1c40f">
<animate attributeName="r" values="5;7;5" dur="1.2s" repeatCount="indefinite" begin="0.4s" />
</circle>

<!-- 第4个圆点 (绿色) -->
<circle cx="50" cy="90" r="5" fill="#2ecc71">
<animate attributeName="r" values="5;7;5" dur="1.2s" repeatCount="indefinite" begin="0.6s" />
</circle>
</svg>
</MudIcon>
<MudIconButton Icon="@Icons.Material.Outlined.MoreVert" Color="Color.Inherit" />
}
else if (OfflineSyncService.CurrentStatus == SyncStatus.Completed)
{
<MudText Typo="Typo.caption">@OfflineSyncService.StatusMessage</MudText>
<MudIcon>
<svg width="24" height="24" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- 绿色圆圈边框 -->
<circle cx="50" cy="50" r="45" stroke="#2ecc71" stroke-width="8" fill="none">
<!-- 动画：逐渐画出圆圈 -->
<animate attributeName="stroke-dasharray" from="0, 283" to="283, 283" dur="1s" fill="freeze" />
<circle cx="50" cy="50" r="45" stroke="#2ecc71" stroke-width="9" fill="none">
<animate attributeName="stroke-dasharray" from="0, 283" to="283, 283" dur="0.6s" fill="freeze" />
</circle>

<!-- 对勾路径 -->
<path d="M30 50 L45 65 L70 35" stroke="#2ecc71" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"
<path d="M30 50 L45 65 L70 35" stroke="#2ecc71" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-dasharray="50, 50" stroke-dashoffset="50">
<!-- 动画：逐渐画出对勾 -->
<animate attributeName="stroke-dashoffset" from="50" to="0" dur="0.8s" begin="1s" fill="freeze" />
<animate attributeName="stroke-dashoffset" from="50" to="0" dur="0.4s" begin="0.6s" fill="freeze" />
</path>
</svg>
</MudIcon>
Expand All @@ -51,22 +24,15 @@
<MudText Typo="Typo.caption">@OfflineSyncService.StatusMessage</MudText>
<MudIcon>
<svg width="24" height="24" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" transform="matrix(-1.8369701987210297e-16,-1,1,-1.8369701987210297e-16,0,0)">
<!-- 第1个圆点 (蓝色) -->
<circle cx="50" cy="20" r="7" fill="#3498db">
<animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.5s" repeatCount="indefinite"></animateTransform>
</circle>

<!-- 第2个圆点 (红色) -->
<circle cx="80" cy="50" r="7" fill="#e74c3c">
<animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.5s" begin="0.2s" repeatCount="indefinite"></animateTransform>
</circle>

<!-- 第3个圆点 (黄色) -->
<circle cx="50" cy="80" r="7" fill="#f1c40f">
<animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.5s" begin="0.4s" repeatCount="indefinite"></animateTransform>
</circle>

<!-- 第4个圆点 (绿色) -->
<circle cx="20" cy="50" r="7" fill="#2ecc71">
<animateTransform attributeType="XML" attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.5s" begin="0.6s" repeatCount="indefinite"></animateTransform>
</circle>
Expand Down
6 changes: 3 additions & 3 deletions src/CleanAspire.ClientApp/Services/Proxies/ProductServiceProxy.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ public async Task SyncOfflineCachedDataAsync()
var count = cachedCreateProductCommands.Count;
var processedCount = 0;
_offlineSyncService.SetSyncStatus(SyncStatus.Syncing, $"Starting sync: 0/{count} ...", count, processedCount);
await Task.Delay(300);
await Task.Delay(500);
foreach (var command in cachedCreateProductCommands)
{
var result = await CreateProductAsync(command);
Expand All @@ -200,10 +200,10 @@ public async Task SyncOfflineCachedDataAsync()
processedCount++;
_offlineSyncService.SetSyncStatus(SyncStatus.Syncing, $"Syncing {processedCount}/{count} Failed ({apiException.Message}).", count, processedCount);
});
await Task.Delay(300);
await Task.Delay(500);
}
_offlineSyncService.SetSyncStatus(SyncStatus.Completed, $"Sync completed: {processedCount}/{count} processed.", count, processedCount);
await Task.Delay(500);
await Task.Delay(1500);
await _indexedDbCache.DeleteDataAsync(IndexedDbCache.DATABASENAME, OFFLINECREATECOMMANDCACHEKEY);
_offlineSyncService.SetSyncStatus(SyncStatus.Idle, "", 0, 0);
}
Expand Down

0 comments on commit 4c62541

Please sign in to comment.