SystemCardComponent.razor 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. @using RackPeek.Domain.Resources.Models
  2. @using RackPeek.Domain.Resources.SystemResources
  3. @using RackPeek.Domain.Resources.SystemResources.UseCases
  4. @inject UpdateSystemUseCase UpdateSystemUseCase
  5. @inject GetSystemUseCase GetSystemUseCase
  6. @inject AddSystemDriveUseCase AddSystemDriveUseCase
  7. @inject RemoveSystemDriveUseCase RemoveSystemDriveUseCase
  8. @inject UpdateSystemDriveUseCase UpdateSystemDriveUseCase
  9. @inject DeleteSystemUseCase DeleteSystemUseCase
  10. @inject CloneSystemUseCase CloneSystemUseCase
  11. @inject NavigationManager Nav
  12. @inject RenameSystemUseCase RenameSystemUseCase
  13. <div class="border border-zinc-800 rounded p-4 bg-zinc-900">
  14. <div class="flex justify-between items-center mb-3">
  15. <NavLink href="@($"resources/systems/{System.Name}")" class="block">
  16. <div class="text-zinc-100 hover:text-emerald-300">
  17. @System.Name
  18. </div>
  19. </NavLink>
  20. <div class="flex gap-3 text-xs">
  21. @if (!_isEditing)
  22. {
  23. <button class="text-zinc-400 hover:text-zinc-200"
  24. @onclick="BeginEdit">
  25. Edit
  26. </button>
  27. <button class="text-xs text-blue-400 hover:text-blue-300 transition"
  28. title="Rename service"
  29. @onclick="OpenRename">
  30. Rename
  31. </button>
  32. <button
  33. class="text-xs text-emerald-400 hover:text-emerald-300 transition"
  34. title="Clone service"
  35. @onclick="OpenClone">
  36. Clone
  37. </button>
  38. <button
  39. class="text-xs text-red-400 hover:text-red-300 transition"
  40. title="Delete server"
  41. @onclick="ConfirmDelete">
  42. Delete
  43. </button>
  44. }
  45. else
  46. {
  47. <button class="text-emerald-400 hover:text-emerald-300"
  48. @onclick="Save">
  49. Save
  50. </button>
  51. <button class="text-zinc-500 hover:text-zinc-300"
  52. @onclick="Cancel">
  53. Cancel
  54. </button>
  55. }
  56. </div>
  57. </div>
  58. <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
  59. <!-- Type -->
  60. <!-- Type -->
  61. <div>
  62. <div class="text-zinc-400 mb-1">Type</div>
  63. @if (_isEditing)
  64. {
  65. <select class="w-full px-3 py-2 rounded-md
  66. bg-zinc-800 text-zinc-100
  67. border border-zinc-600
  68. placeholder-zinc-500
  69. focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  70. hover:border-zinc-400
  71. transition-colors duration-150
  72. cursor-text"
  73. @bind="_edit.Type">
  74. @foreach (var type in SystemResource.ValidSystemTypes)
  75. {
  76. <option value="@type">@type</option>
  77. }
  78. </select>
  79. }
  80. else if (!string.IsNullOrWhiteSpace(System.Type))
  81. {
  82. <div class="text-zinc-300">@System.Type</div>
  83. }
  84. </div>
  85. <!-- OS -->
  86. <div>
  87. <div class="text-zinc-400 mb-1">OS</div>
  88. @if (_isEditing)
  89. {
  90. <input
  91. class="w-full px-3 py-2 rounded-md
  92. bg-zinc-800 text-zinc-100
  93. border border-zinc-600
  94. placeholder-zinc-500
  95. focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  96. hover:border-zinc-400
  97. transition-colors duration-150
  98. cursor-text"
  99. @bind="_edit.Os"/>
  100. }
  101. else if (!string.IsNullOrWhiteSpace(System.Os))
  102. {
  103. <div class="text-zinc-300">@System.Os</div>
  104. }
  105. </div>
  106. <!-- Cores -->
  107. <div>
  108. <div class="text-zinc-400 mb-1">Cores</div>
  109. @if (_isEditing)
  110. {
  111. <input type="number"
  112. class="w-full px-3 py-2 rounded-md
  113. bg-zinc-800 text-zinc-100
  114. border border-zinc-600
  115. placeholder-zinc-500
  116. focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  117. hover:border-zinc-400
  118. transition-colors duration-150
  119. cursor-text"
  120. @bind="_edit.Cores"/>
  121. }
  122. else if (System.Cores.HasValue)
  123. {
  124. <div class="text-zinc-300">@System.Cores</div>
  125. }
  126. </div>
  127. <!-- RAM -->
  128. <div>
  129. <div class="text-zinc-400 mb-1">RAM (GB)</div>
  130. @if (_isEditing)
  131. {
  132. <input type="number"
  133. class="w-full px-3 py-2 rounded-md
  134. bg-zinc-800 text-zinc-100
  135. border border-zinc-600
  136. placeholder-zinc-500
  137. focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
  138. hover:border-zinc-400
  139. transition-colors duration-150
  140. cursor-text"
  141. @bind="_edit.Ram"/>
  142. }
  143. else if (System.Ram.HasValue)
  144. {
  145. <div class="text-zinc-300">@System.Ram GB</div>
  146. }
  147. </div>
  148. <!-- Runs On -->
  149. <div>
  150. <div class="text-zinc-400 mb-1">Runs On</div>
  151. @if (_isEditing)
  152. {
  153. <button
  154. class="hover:text-emerald-400"
  155. title="Edit Runs On"
  156. @onclick="() => _selectParentOpen = true">
  157. @if (!string.IsNullOrWhiteSpace(System.RunsOn))
  158. {
  159. @($"{System.RunsOn} +")
  160. }
  161. else
  162. {
  163. @("Edit parent")
  164. }
  165. </button>
  166. }
  167. else if (!string.IsNullOrWhiteSpace(System.RunsOn))
  168. {
  169. <NavLink href="@($"resources/hardware/{System.RunsOn}")"
  170. class="text-emerald-400 text-sm">
  171. @System.RunsOn
  172. </NavLink>
  173. }
  174. </div>
  175. <div>
  176. <div class="flex items-center justify-between mb-1 group">
  177. <div class="text-zinc-400">Drives
  178. <button
  179. class="hover:text-emerald-400 group-hover:opacity-100 transition"
  180. title="Add Drive"
  181. @onclick="OpenAddDrive">
  182. +
  183. </button>
  184. </div>
  185. </div>
  186. @if (System.Drives?.Any() == true)
  187. {
  188. @foreach (var drive in System.Drives)
  189. {
  190. <div
  191. class="flex items-center justify-between text-zinc-300 group hover:bg-zinc-800/40 rounded px-1 py-0.5">
  192. <div class="flex gap-2 group-hover:opacity-100 transition">
  193. <button
  194. class="hover:text-emerald-400"
  195. title="Edit Drive"
  196. @onclick="() => OpenEditDrives(drive)">
  197. @drive.Type — @drive.Size GB
  198. </button>
  199. </div>
  200. </div>
  201. }
  202. }
  203. </div>
  204. </div>
  205. </div>
  206. <HardwareSelectionModal
  207. IsOpen="@_selectParentOpen"
  208. IsOpenChanged="v => _selectParentOpen = v"
  209. Title="Select a parent"
  210. Value="@SelectedParentName"
  211. OnAccept="HandleParentSelected"/>
  212. <DriveModal
  213. IsOpen="@_driveModalOpen"
  214. IsOpenChanged="v => _driveModalOpen = v"
  215. Value="@_editingDrive"
  216. OnSubmit="HandleDriveSubmit"
  217. OnDelete="HandleDriveDelete"/>
  218. <ConfirmModal
  219. IsOpen="_confirmDeleteOpen"
  220. IsOpenChanged="v => _confirmDeleteOpen = v"
  221. Title="Delete service"
  222. ConfirmText="Delete"
  223. ConfirmClass="bg-red-600 hover:bg-red-500"
  224. OnConfirm="DeleteServer">
  225. Are you sure you want to delete <strong>@System.Name</strong>?
  226. <br/>
  227. This will detach all dependent systems.
  228. </ConfirmModal>
  229. <StringValueModal
  230. IsOpen="_cloneOpen"
  231. IsOpenChanged="v => _cloneOpen = v"
  232. Title="Clone system"
  233. Description="Enter a name for the cloned system"
  234. Label="New system name"
  235. Value="@($"{System.Name}-copy")"
  236. OnSubmit="HandleCloneSubmit" />
  237. @code {
  238. [Parameter] [EditorRequired] public SystemResource System { get; set; } = default!;
  239. [Parameter] public EventCallback<SystemEditModel> OnSave { get; set; }
  240. private bool _isEditing;
  241. private SystemEditModel _edit = new();
  242. void BeginEdit()
  243. {
  244. _edit = SystemEditModel.From(System);
  245. _isEditing = true;
  246. }
  247. async Task Save()
  248. {
  249. _isEditing = false;
  250. await OnSave.InvokeAsync(_edit);
  251. }
  252. void Cancel()
  253. {
  254. _isEditing = false;
  255. }
  256. bool _selectParentOpen;
  257. string? SelectedParentName;
  258. async Task HandleParentSelected(string? name)
  259. {
  260. SelectedParentName = name;
  261. await UpdateSystemUseCase.ExecuteAsync(
  262. System.Name,
  263. System.Type,
  264. System.Os,
  265. System.Cores,
  266. System.Ram,
  267. name);
  268. System = await GetSystemUseCase.ExecuteAsync(System.Name);
  269. _edit = SystemEditModel.From(System);
  270. }
  271. #region Drives
  272. bool _driveModalOpen;
  273. int _editingDriveIndex;
  274. Drive? _editingDrive;
  275. void OpenAddDrive()
  276. {
  277. _editingDriveIndex = -1;
  278. _editingDrive = null;
  279. _driveModalOpen = true;
  280. }
  281. void OpenEditDrives(Drive drive)
  282. {
  283. _editingDrive = drive;
  284. System.Drives ??= new List<Drive>();
  285. _editingDriveIndex = System.Drives.IndexOf(drive);
  286. ;
  287. _driveModalOpen = true;
  288. }
  289. async Task HandleDriveSubmit(Drive drive)
  290. {
  291. System.Drives ??= new List<Drive>();
  292. if (_editingDriveIndex < 0)
  293. {
  294. await AddSystemDriveUseCase.ExecuteAsync(System.Name, drive.Type ?? "hdd", drive.Size ?? 0);
  295. }
  296. else
  297. {
  298. await UpdateSystemDriveUseCase.ExecuteAsync(System.Name, _editingDriveIndex, drive.Type ?? "hdd", drive.Size ?? 0);
  299. }
  300. System = await GetSystemUseCase.ExecuteAsync(System.Name);
  301. StateHasChanged();
  302. }
  303. async Task HandleDriveDelete(Drive drive)
  304. {
  305. await RemoveSystemDriveUseCase.ExecuteAsync(System.Name, _editingDriveIndex);
  306. System = await GetSystemUseCase.ExecuteAsync(System.Name);
  307. StateHasChanged();
  308. }
  309. #endregion
  310. }
  311. <StringValueModal
  312. IsOpen="_renameOpen"
  313. IsOpenChanged="v => _renameOpen = v"
  314. Title="Rename system"
  315. Description="Enter a new name for this system"
  316. Label="New system name"
  317. Value="@System.Name"
  318. OnSubmit="HandleRenameSubmit" />
  319. @code {
  320. private bool _confirmDeleteOpen;
  321. [Parameter] public EventCallback<string> OnDeleted { get; set; }
  322. void ConfirmDelete()
  323. {
  324. _confirmDeleteOpen = true;
  325. }
  326. async Task DeleteServer()
  327. {
  328. _confirmDeleteOpen = false;
  329. await DeleteSystemUseCase.ExecuteAsync(System.Name);
  330. if (OnDeleted.HasDelegate)
  331. await OnDeleted.InvokeAsync(System.Name);
  332. }
  333. }
  334. @code
  335. {
  336. bool _cloneOpen;
  337. void OpenClone()
  338. {
  339. _cloneOpen = true;
  340. }
  341. async Task HandleCloneSubmit(string newName)
  342. {
  343. await CloneSystemUseCase.ExecuteAsync(System.Name, newName);
  344. Nav.NavigateTo($"resources/systems/{newName}");
  345. }
  346. }
  347. @code
  348. {
  349. bool _renameOpen;
  350. void OpenRename()
  351. {
  352. _renameOpen = true;
  353. }
  354. async Task HandleRenameSubmit(string newName)
  355. {
  356. await RenameSystemUseCase.ExecuteAsync(System.Name, newName);
  357. Nav.NavigateTo($"resources/systems/{newName}");
  358. }
  359. }