Skip to content

Commit f1c3773

Browse files
mateofmateof
committed
feat: improve webdav info
1 parent cfa2983 commit f1c3773

2 files changed

Lines changed: 474 additions & 71 deletions

File tree

‎TelegramDownloader/Pages/WebDavInfo.razor‎

Lines changed: 105 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,115 @@
1-
@page "/webdavinfo"
2-
@* @model TelegramDownloader.Pages.WebDavInfoModel *@
1+
@page "/webdavinfo"
32
@using Microsoft.AspNetCore.Components.Forms
43
@using TelegramDownloader.Data.db
54
@using TelegramDownloader.Models
65

76
@inject IDbService db
87
@inject ToastService toastService
98

9+
<PageTitle>WebDAV Configuration</PageTitle>
10+
1011
@if(model != null) {
11-
<EditForm Model="model" OnValidSubmit="OnSave">
12-
<div class="card mt-4" style="max-width: 500px; margin:auto;">
13-
<div class="card-body">
14-
<h5 class="card-title">WebDAV</h5>
15-
<div class="card-text">
16-
<div class="mb-3">
17-
<label class="form-label">Host</label>
18-
<InputText class="form-control" @bind-Value="model.webDav.Host" />
19-
</div>
20-
<div class="mb-3">
21-
<label class="form-label">TFM port</label>
22-
<NumberInput TValue="int" @bind-Value="model.webDav.PuertoEntrada" Min="1" Max="65535" EnableMinMax="true" class="form-control" id="tfmport" placeholder="Telegram File Manager Port" />
23-
</div>
24-
<div class="mb-3">
25-
<label class="form-label">Output port</label>
26-
<NumberInput TValue="int" @bind-Value="model.webDav.PuertoSalida" Min="1" Max="65535" EnableMinMax="true" class="form-control" id="wdport" placeholder="WebDav Port" />
12+
<div class="webdav-page">
13+
<!-- Header -->
14+
<div class="webdav-header">
15+
<h1><i class="bi bi-hdd-network"></i> WebDAV Server</h1>
16+
<p>Configure your WebDAV server to access Telegram files from any file manager</p>
17+
</div>
18+
19+
<!-- Cards Grid -->
20+
<div class="webdav-grid">
21+
<!-- Configuration Card -->
22+
<div class="webdav-card">
23+
<div class="webdav-card-header">
24+
<i class="bi bi-gear"></i>
25+
<h3>Configuration</h3>
26+
</div>
27+
<div class="webdav-card-body">
28+
<EditForm Model="model" OnValidSubmit="OnSave">
29+
<div class="form-group">
30+
<label><i class="bi bi-globe"></i> Host Address</label>
31+
<InputText class="form-control" @bind-Value="model.webDav.Host" placeholder="localhost or 0.0.0.0" />
32+
<div class="input-hint">Use 0.0.0.0 to allow external connections</div>
33+
</div>
34+
35+
<div class="form-group">
36+
<label><i class="bi bi-box-arrow-in-right"></i> TFM Port</label>
37+
<NumberInput TValue="int" @bind-Value="model.webDav.PuertoEntrada" Min="1" Max="65535" EnableMinMax="true" class="form-control" placeholder="5000" />
38+
<div class="input-hint">Telegram File Manager internal port</div>
39+
</div>
40+
41+
<div class="form-group">
42+
<label><i class="bi bi-box-arrow-right"></i> WebDAV Port</label>
43+
<NumberInput TValue="int" @bind-Value="model.webDav.PuertoSalida" Min="1" Max="65535" EnableMinMax="true" class="form-control" placeholder="5005" />
44+
<div class="input-hint">Port exposed for WebDAV connections</div>
45+
</div>
46+
47+
<button type="submit" class="btn-save">
48+
<i class="bi bi-check-lg"></i>
49+
Save Configuration
50+
</button>
51+
</EditForm>
52+
53+
<div class="info-box">
54+
<div class="info-box-header">
55+
<i class="bi bi-info-circle"></i>
56+
<span>How to connect</span>
57+
</div>
58+
<p>
59+
Use any WebDAV client (Windows Explorer, macOS Finder, Cyberduck, etc.)
60+
and connect to the WebDAV URL shown in the status panel.
61+
</p>
2762
</div>
28-
<button type="submit" class="btn btn-primary">Save</button>
2963
</div>
3064
</div>
31-
</div>
32-
</EditForm>
3365

34-
<div class="card mt-4" style="max-width: 300px; margin:auto;">
35-
<div class="card-body text-center">
36-
<div class="mb-3">
37-
<span style="display:inline-block; width:40px; height:40px; border-radius:50%; background-color:@GetStatusColor(); border:2px solid #ccc;"></span>
38-
</div>
39-
<div class="mb-3">
40-
<p style="display:inline-block; ">@(status == StatusColor.Rojo ? "Stopped" : "Active") </p>
41-
</div>
42-
<div>
43-
<button class="btn btn-success me-2" @onclick="Start">Start</button>
44-
<button class="btn btn-warning me-2" @onclick="Stop">Stop</button>
45-
<button class="btn btn-danger" @onclick="Reset">Reset</button>
66+
<!-- Status Card -->
67+
<div class="webdav-card status-card">
68+
<div class="webdav-card-header">
69+
<i class="bi bi-activity"></i>
70+
<h3>Server Status</h3>
71+
</div>
72+
<div class="webdav-card-body">
73+
<!-- Status Indicator -->
74+
<div class="status-indicator">
75+
<div class="status-circle @(IsRunning ? "active" : "stopped")">
76+
<i class="bi @(IsRunning ? "bi-check-lg" : "bi-x-lg")"></i>
77+
</div>
78+
</div>
79+
80+
<!-- Status Text -->
81+
<div class="status-text @(IsRunning ? "active" : "stopped")">
82+
<h4>@(IsRunning ? "Running" : "Stopped")</h4>
83+
<p>@(IsRunning ? "WebDAV server is accepting connections" : "Server is not running")</p>
84+
</div>
85+
86+
<!-- Control Buttons -->
87+
<div class="control-buttons">
88+
<button class="btn-control start" @onclick="Start" disabled="@IsRunning">
89+
<i class="bi bi-play-fill"></i>
90+
Start
91+
</button>
92+
<button class="btn-control stop" @onclick="Stop" disabled="@(!IsRunning)">
93+
<i class="bi bi-stop-fill"></i>
94+
Stop
95+
</button>
96+
<button class="btn-control reset" @onclick="Reset">
97+
<i class="bi bi-arrow-clockwise"></i>
98+
Restart
99+
</button>
100+
</div>
101+
102+
<!-- Connection Info -->
103+
@if(IsRunning)
104+
{
105+
<div class="connection-info">
106+
<h5>Connection URL</h5>
107+
<div class="connection-url">
108+
http://@(model.webDav.Host):@(model.webDav.PuertoSalida)/
109+
</div>
110+
</div>
111+
}
112+
</div>
46113
</div>
47114
</div>
48115
</div>
@@ -51,75 +118,42 @@
51118

52119
@code {
53120
private GeneralConfig model { get; set; }
54-
55-
private StatusColor status = StatusColor.Rojo;
121+
private bool IsRunning => model?.webDav?.webDavService?.IsRunning ?? false;
56122

57123
protected override async Task OnInitializedAsync() {
58-
59124
model = null;
60125
await loadModel();
61-
62126
}
63127

64128
private async Task loadModel()
65129
{
66130
model ??= await GeneralConfigStatic.Load(db);
67-
checkStatusColor();
68131
await InvokeAsync(StateHasChanged);
69132
}
70133

71134
private async Task OnSave()
72135
{
73136
await GeneralConfigStatic.SaveChanges(db, model);
74-
toastService.Notify(new(ToastType.Success, $"The webdav configuration has been saved") { Title = "Success", AutoHide = true });
137+
toastService.Notify(new(ToastType.Success, $"WebDAV configuration has been saved") { Title = "Success", AutoHide = true });
75138
}
76139

77140
private async Task Start()
78141
{
79142
model.webDav.start();
80-
checkStatusColor();
81143
await InvokeAsync(StateHasChanged);
82144
}
145+
83146
private async Task Stop()
84147
{
85148
model.webDav.stop();
86-
checkStatusColor();
87149
await InvokeAsync(StateHasChanged);
88150
}
151+
89152
private async Task Reset()
90153
{
91154
model.webDav.stop();
92-
checkStatusColor();
93-
await InvokeAsync(StateHasChanged);
155+
await Task.Delay(500);
94156
model.webDav.start();
95-
checkStatusColor();
96157
await InvokeAsync(StateHasChanged);
97158
}
98-
99-
private string GetStatusColor() => status switch
100-
{
101-
StatusColor.Verde => "green",
102-
StatusColor.Amarillo => "yellow",
103-
StatusColor.Rojo => "red",
104-
_ => "gray"
105-
};
106-
107-
private void checkStatusColor()
108-
{
109-
if (model.webDav.webDavService.IsRunning)
110-
{
111-
status = StatusColor.Verde;
112-
} else
113-
{
114-
status = StatusColor.Rojo;
115-
}
116-
117-
}
118-
119-
private enum StatusColor
120-
{
121-
Verde,
122-
Amarillo,
123-
Rojo
124-
}
125159
}

0 commit comments

Comments
 (0)