SystemCardComponent.razor 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. @typeparam TSystem where TSystem : RackPeek.Domain.Resources.SystemResources.SystemResource
  2. <div class="border border-zinc-800 rounded p-4 bg-zinc-900">
  3. <div class="flex justify-between items-center mb-3">
  4. <div class="text-zinc-100">
  5. @System.Name
  6. </div>
  7. <div class="flex gap-3 text-xs">
  8. @if (!_isEditing)
  9. {
  10. <button class="text-zinc-400 hover:text-zinc-200"
  11. @onclick="BeginEdit">
  12. Edit
  13. </button>
  14. }
  15. else
  16. {
  17. <button class="text-emerald-400 hover:text-emerald-300"
  18. @onclick="Save">
  19. Save
  20. </button>
  21. <button class="text-zinc-500 hover:text-zinc-300"
  22. @onclick="Cancel">
  23. Cancel
  24. </button>
  25. }
  26. </div>
  27. </div>
  28. <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
  29. <!-- Type -->
  30. <div>
  31. <div class="text-zinc-400 mb-1">Type</div>
  32. @if (_isEditing)
  33. {
  34. <input class="input"
  35. @bind="_edit.Type"/>
  36. }
  37. else if (!string.IsNullOrWhiteSpace(System.Type))
  38. {
  39. <div class="text-zinc-300">@System.Type</div>
  40. }
  41. </div>
  42. <!-- OS -->
  43. <div>
  44. <div class="text-zinc-400 mb-1">OS</div>
  45. @if (_isEditing)
  46. {
  47. <input class="input"
  48. @bind="_edit.Os"/>
  49. }
  50. else if (!string.IsNullOrWhiteSpace(System.Os))
  51. {
  52. <div class="text-zinc-300">@System.Os</div>
  53. }
  54. </div>
  55. <!-- Cores -->
  56. <div>
  57. <div class="text-zinc-400 mb-1">Cores</div>
  58. @if (_isEditing)
  59. {
  60. <input type="number"
  61. class="input"
  62. @bind="_edit.Cores"/>
  63. }
  64. else if (System.Cores.HasValue)
  65. {
  66. <div class="text-zinc-300">@System.Cores</div>
  67. }
  68. </div>
  69. <!-- RAM -->
  70. <div>
  71. <div class="text-zinc-400 mb-1">RAM (GB)</div>
  72. @if (_isEditing)
  73. {
  74. <input type="number"
  75. class="input"
  76. @bind="_edit.Ram"/>
  77. }
  78. else if (System.Ram.HasValue)
  79. {
  80. <div class="text-zinc-300">@System.Ram GB</div>
  81. }
  82. </div>
  83. <!-- Runs On -->
  84. <div>
  85. <div class="text-zinc-400 mb-1">Runs On</div>
  86. @if (_isEditing)
  87. {
  88. <input class="input"
  89. @bind="_edit.RunsOn"/>
  90. }
  91. else if (!string.IsNullOrWhiteSpace(System.RunsOn))
  92. {
  93. <NavLink href="@($"/resources/hardware/{System.RunsOn}")"
  94. class="text-emerald-400 text-sm">
  95. @System.RunsOn
  96. </NavLink>
  97. }
  98. </div>
  99. <!-- Drives (read-only) -->
  100. @if (!_isEditing && System.Drives?.Any() == true)
  101. {
  102. <div>
  103. <div class="text-zinc-400 mb-1">Drives</div>
  104. @foreach (var drive in System.Drives)
  105. {
  106. <div class="text-zinc-300">
  107. @drive.Type — @drive.Size GB
  108. </div>
  109. }
  110. </div>
  111. }
  112. </div>
  113. </div>
  114. @code {
  115. [Parameter] [EditorRequired] public TSystem System { get; set; } = default!;
  116. [Parameter] public EventCallback<SystemEditModel> OnSave { get; set; }
  117. private bool _isEditing;
  118. private SystemEditModel _edit = new();
  119. void BeginEdit()
  120. {
  121. _edit = SystemEditModel.From(System);
  122. _isEditing = true;
  123. }
  124. async Task Save()
  125. {
  126. _isEditing = false;
  127. await OnSave.InvokeAsync(_edit);
  128. }
  129. void Cancel()
  130. {
  131. _isEditing = false;
  132. }
  133. }