index.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ArduPilot Overlay Manager</title>
  6. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  8. <style>
  9. html, body { height: 100%; }
  10. body {
  11. display: flex;
  12. flex-direction: column;
  13. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  14. background-color: #f4f6f9;
  15. }
  16. .content-wrapper { flex: 1 0 auto; }
  17. .navbar-brand { font-size: 25px; }
  18. .card { border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: none;}
  19. .table-light { background-color: #f8f9fa; }
  20. footer { flex-shrink: 0; }
  21. .profile-list-item.active {
  22. background-color: #0d6efd;
  23. border-color: #0d6efd;
  24. color: white;
  25. }
  26. .profile-list-item.active .text-muted, .profile-list-item.active .text-secondary {
  27. color: rgba(255,255,255,0.8) !important;
  28. }
  29. .dropdown-item i { width: 20px; text-align: center; }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="content-wrapper">
  34. <nav class="navbar navbar-dark bg-dark shadow-sm py-2">
  35. <div class="container-fluid px-4">
  36. <div class="d-flex align-items-center">
  37. <a class="navbar-brand d-flex align-items-center" href="/">
  38. <img src="/static/images/ardupilot_logo.png" alt="ArduPilot" height="24" class="d-inline-block align-text-top me-2">
  39. <span class="text-white">Overlay Manager</span>
  40. </a>
  41. </div>
  42. <div class="ms-auto d-flex align-items-center">
  43. <a href="javascript:void(0);" onclick="window.location.href = window.location.protocol + '//' + window.location.hostname;" class="btn btn-outline-light">
  44. <i class="bi bi-arrow-left me-2"></i>Back to Main App
  45. </a>
  46. </div>
  47. </div>
  48. </nav>
  49. <div class="container-fluid px-4 mt-4">
  50. {% if success_msg %}
  51. <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
  52. <i class="bi bi-check-circle-fill me-2"></i>{{ success_msg }}
  53. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  54. </div>
  55. {% endif %}
  56. {% if error_msg %}
  57. <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
  58. <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ error_msg }}
  59. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  60. </div>
  61. {% endif %}
  62. <div class="row g-4">
  63. <div class="col-md-3">
  64. <div class="card mb-4">
  65. <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
  66. <h6 class="mb-0 fw-bold text-dark"><i class="bi bi-diagram-3-fill me-2 text-primary"></i>Overlay Profiles</h6>
  67. </div>
  68. <div class="list-group list-group-flush">
  69. {% for p in profiles %}
  70. <div class="list-group-item d-flex justify-content-between align-items-center profile-list-item {% if p.is_active %}active{% endif %}">
  71. <form action="/patch-manager/profile/activate" method="post" class="m-0 p-0 flex-grow-1 cursor-pointer" style="cursor: pointer;">
  72. <input type="hidden" name="profile_id" value="{{ p.id }}">
  73. <div onclick="this.parentNode.submit();" class="w-100 fw-bold">
  74. {{ p.name }}
  75. {% if p.is_readonly %}
  76. <i class="bi bi-shield-lock-fill ms-1" title="Read-Only System Profile"></i>
  77. {% elif p.is_locked %}
  78. <i class="bi bi-lock-fill text-warning ms-1" title="User Locked"></i>
  79. {% endif %}
  80. {% if p.is_active %}<i class="bi bi-check-circle-fill ms-2"></i>{% endif %}
  81. </div>
  82. </form>
  83. <div class="dropdown">
  84. <button class="btn btn-sm btn-link p-0 text-decoration-none {% if p.is_active %}text-white{% else %}text-secondary{% endif %}" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Profile Options">
  85. <i class="bi bi-three-dots-vertical fs-5"></i>
  86. </button>
  87. <ul class="dropdown-menu shadow-sm dropdown-menu-end">
  88. {% if p.is_locked %}
  89. <li>
  90. <a class="dropdown-item" href="javascript:void(0)" onclick="openUnlockModal({{ p.id }}, '{{ p.name|escape }}')">
  91. <i class="bi bi-unlock-fill me-2 text-warning"></i>Unlock Profile
  92. </a>
  93. </li>
  94. {% elif not p.is_readonly %}
  95. <li>
  96. <a class="dropdown-item" href="javascript:void(0)" onclick="openRenameModal({{ p.id }}, '{{ p.name|escape }}')">
  97. <i class="bi bi-pencil-square me-2 text-primary"></i>Rename Profile
  98. </a>
  99. </li>
  100. <li>
  101. <a class="dropdown-item" href="javascript:void(0)" onclick="openLockModal({{ p.id }}, '{{ p.name|escape }}')">
  102. <i class="bi bi-lock-fill me-2 text-warning"></i>Lock Profile
  103. </a>
  104. </li>
  105. {% endif %}
  106. <li>
  107. <form action="/patch-manager/profile/duplicate" method="post" class="m-0 p-0">
  108. <input type="hidden" name="profile_id" value="{{ p.id }}">
  109. <button type="submit" class="dropdown-item"><i class="bi bi-copy me-2 text-success"></i>Clone Profile</button>
  110. </form>
  111. </li>
  112. {% if not p.is_active and not p.is_readonly %}
  113. <li><hr class="dropdown-divider"></li>
  114. {% if p.is_locked %}
  115. <li>
  116. <a class="dropdown-item text-danger" href="javascript:void(0)" onclick="openDeleteLockedModal({{ p.id }}, '{{ p.name|escape }}')">
  117. <i class="bi bi-trash me-2"></i>Delete Profile
  118. </a>
  119. </li>
  120. {% else %}
  121. <li>
  122. <form action="/patch-manager/profile/delete" method="post" class="m-0 p-0" onsubmit="return confirm('Delete this profile completely?');">
  123. <input type="hidden" name="profile_id" value="{{ p.id }}">
  124. <button type="submit" class="dropdown-item text-danger"><i class="bi bi-trash me-2"></i>Delete Profile</button>
  125. </form>
  126. </li>
  127. {% endif %}
  128. {% endif %}
  129. </ul>
  130. </div>
  131. </div>
  132. {% endfor %}
  133. </div>
  134. <div class="card-footer bg-light p-3">
  135. <form action="/patch-manager/profile/create" method="post" class="input-group">
  136. <input type="text" class="form-control form-control-sm" name="name" placeholder="New profile name..." required>
  137. <button class="btn btn-primary btn-sm" type="submit"><i class="bi bi-plus"></i> Add</button>
  138. </form>
  139. </div>
  140. </div>
  141. {% if is_compiling %}
  142. <div class="card bg-danger text-white shadow border-0">
  143. <div class="card-body text-center p-4">
  144. <div class="spinner-border text-light mb-3" role="status" style="width: 3rem; height: 3rem;">
  145. <span class="visually-hidden">Loading...</span>
  146. </div>
  147. <h5 class="fw-bold">Build in Progress</h5>
  148. <p class="small text-white-75 mb-0">Another user is currently compiling. Deployment is locked to prevent overwriting files. Please wait.</p>
  149. </div>
  150. </div>
  151. {% else %}
  152. <div class="card bg-dark text-white shadow">
  153. <div class="card-body text-center p-4">
  154. <i class="bi bi-rocket-takeoff-fill display-4 text-warning mb-3 d-block"></i>
  155. <h5 class="fw-bold">Ready to Compile?</h5>
  156. <p class="small text-white-50">Pushing to the builder will wipe the staging directory and write the currently active profile.</p>
  157. <form action="/patch-manager/deploy" method="post" onsubmit="return confirm('This will deploy {{ active_profile.name }} to the builder. Are you sure?');">
  158. <button type="submit" class="btn btn-warning fw-bold w-100 py-2 fs-5">
  159. DEPLOY TO BUILDER
  160. </button>
  161. </form>
  162. </div>
  163. </div>
  164. {% endif %}
  165. </div>
  166. <div class="col-md-9">
  167. <div class="card shadow-sm border-0 mb-4">
  168. <div class="card-header bg-white py-3">
  169. <h6 class="card-title mb-0 fw-bold text-dark"><i class="bi bi-card-text text-warning me-2"></i>Profile Notes & Annotations</h6>
  170. </div>
  171. <div class="card-body p-3 bg-light">
  172. <form action="/patch-manager/profile/annotate" method="post" class="d-flex flex-column gap-2">
  173. <input type="hidden" name="profile_id" value="{{ active_profile.id }}">
  174. <textarea class="form-control" name="description" rows="3" {% if active_profile.is_readonly or active_profile.is_locked %}disabled{% endif %} placeholder="Add notes about this loadout (e.g., 'Aggressive PID tune, experimental VTX settings')">{{ active_profile.description }}</textarea>
  175. {% if not active_profile.is_readonly and not active_profile.is_locked %}
  176. <div class="text-end">
  177. <button type="submit" class="btn btn-warning btn-sm fw-bold"><i class="bi bi-save me-1"></i> Save Notes</button>
  178. </div>
  179. {% endif %}
  180. </form>
  181. </div>
  182. </div>
  183. <div class="card shadow-sm border-0 mb-4">
  184. <div class="card-header bg-white py-3">
  185. <h6 class="card-title mb-0 fw-bold text-dark"><i class="bi bi-cloud-arrow-up text-success me-2"></i>Upload File to Profile</h6>
  186. </div>
  187. {% if active_profile.is_readonly or active_profile.is_locked %}
  188. <div class="card-body p-4 bg-light text-center text-muted">
  189. <i class="bi bi-lock-fill fs-3 d-block mb-2"></i>
  190. {% if active_profile.is_readonly %}
  191. <p class="mb-0">This is a locked, unmodified base profile. You cannot upload files here.<br><strong>Clone this profile</strong> from the menu on the left to start making changes.</p>
  192. {% else %}
  193. <p class="mb-0">This profile is locked by a user. You cannot upload files here.<br><strong>Unlock this profile</strong> from the menu on the left if you know the password, or <strong>Clone this profile</strong> to make your own copy and start making changes.</p>
  194. {% endif %}
  195. </div>
  196. {% else %}
  197. <div class="card-body p-3 bg-light">
  198. <form action="/patch-manager/file/upload" method="post" enctype="multipart/form-data" class="row g-3 align-items-end">
  199. <input type="hidden" name="profile_id" value="{{ active_profile.id }}">
  200. <div class="col-md-4">
  201. <label class="form-label small fw-bold text-muted mb-1">1. Select File</label>
  202. <input class="form-control form-control-sm" type="file" name="file" required>
  203. </div>
  204. <div class="col-md-3">
  205. <label class="form-label small fw-bold text-muted mb-1">2. Existing Folder</label>
  206. <select class="form-select form-select-sm" name="existing_path" onchange="document.getElementById('new_path').value=''">
  207. <option value="">/ (Root Directory)</option>
  208. {% for d in dirs %}
  209. <option value="{{ d }}">{{ d }}</option>
  210. {% endfor %}
  211. </select>
  212. </div>
  213. <div class="col-md-3">
  214. <label class="form-label small fw-bold text-muted mb-1">...Or Create New Folder</label>
  215. <input type="text" class="form-control form-control-sm font-monospace" name="new_path" id="new_path" placeholder="e.g. libraries/AP_HAL" oninput="document.getElementsByName('existing_path')[0].value=''">
  216. </div>
  217. <div class="col-md-2">
  218. <button type="submit" class="btn btn-success btn-sm fw-bold w-100"><i class="bi bi-upload me-1"></i> Upload</button>
  219. </div>
  220. </form>
  221. </div>
  222. {% endif %}
  223. </div>
  224. <div class="card mb-5 border-0 shadow-sm">
  225. <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom-0">
  226. <h5 class="card-title mb-0 fw-bold text-dark">
  227. <i class="bi bi-folder2-open me-2 text-info"></i>Files for: <span class="text-primary">{{ active_profile.name }}</span>
  228. </h5>
  229. </div>
  230. <div class="card-body p-0">
  231. <div class="table-responsive">
  232. <table class="table table-hover align-middle mb-0">
  233. <thead class="table-light">
  234. <tr>
  235. <th class="ps-4 py-3">Target Path</th>
  236. <th class="text-end pe-4 py-3">Actions</th>
  237. </tr>
  238. </thead>
  239. <tbody>
  240. {% for file in files %}
  241. <tr>
  242. <td class="ps-4 font-monospace text-dark" style="font-size: 0.95rem;">
  243. <i class="bi bi-file-code me-2 text-secondary"></i>{{ file.filepath }}
  244. </td>
  245. <td class="text-end pe-4">
  246. <a href="/patch-manager/download?file_id={{ file.id }}" class="btn btn-sm btn-outline-info me-2" title="Download">
  247. <i class="bi bi-download"></i>
  248. </a>
  249. {% if not active_profile.is_readonly and not active_profile.is_locked %}
  250. <a href="/patch-manager/edit?file_id={{ file.id }}" class="btn btn-sm btn-outline-primary me-2">
  251. <i class="bi bi-pencil me-1"></i> Edit
  252. </a>
  253. <form action="/patch-manager/file/delete" method="post" class="d-inline" onsubmit="return confirm('Remove this file from the profile?');">
  254. <input type="hidden" name="file_id" value="{{ file.id }}">
  255. <button type="submit" class="btn btn-sm btn-outline-danger">
  256. <i class="bi bi-trash"></i>
  257. </button>
  258. </form>
  259. {% endif %}
  260. </td>
  261. </tr>
  262. {% else %}
  263. <tr>
  264. <td colspan="2" class="text-center py-5 text-muted">
  265. <i class="bi bi-inbox fs-1 d-block mb-3 text-black-50"></i>
  266. <h5>This profile is empty.</h5>
  267. <p>Deploying this profile will result in a clean, vanilla build.<br>Upload a file above to start creating overlays.</p>
  268. </td>
  269. </tr>
  270. {% endfor %}
  271. </tbody>
  272. </table>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279. </div>
  280. <div class="modal fade" id="renameModal" tabindex="-1" aria-hidden="true">
  281. <div class="modal-dialog">
  282. <div class="modal-content">
  283. <form action="/patch-manager/profile/rename" method="post">
  284. <div class="modal-header bg-light">
  285. <h5 class="modal-title fw-bold text-dark"><i class="bi bi-pencil-square me-2"></i>Rename Profile</h5>
  286. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  287. </div>
  288. <div class="modal-body p-4">
  289. <input type="hidden" name="profile_id" id="rename-profile-id">
  290. <div class="mb-3">
  291. <label class="form-label text-muted small fw-bold">Profile Name</label>
  292. <input type="text" class="form-control" name="new_name" id="rename-new-name" required>
  293. </div>
  294. </div>
  295. <div class="modal-footer bg-light d-flex justify-content-between">
  296. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
  297. <button type="submit" class="btn btn-primary fw-bold"><i class="bi bi-check-lg me-1"></i>Save Name</button>
  298. </div>
  299. </form>
  300. </div>
  301. </div>
  302. </div>
  303. <div class="modal fade" id="lockModal" tabindex="-1" aria-hidden="true">
  304. <div class="modal-dialog">
  305. <div class="modal-content">
  306. <form action="/patch-manager/profile/lock" method="post">
  307. <div class="modal-header bg-light">
  308. <h5 class="modal-title fw-bold text-dark"><i class="bi bi-lock-fill me-2 text-warning"></i>Lock Profile</h5>
  309. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  310. </div>
  311. <div class="modal-body p-4">
  312. <input type="hidden" name="profile_id" id="lock-profile-id">
  313. <p>Locking <strong id="lock-profile-name"></strong> will prevent it from being edited or deleted until the password is provided.</p>
  314. <div class="mb-3">
  315. <label class="form-label text-muted small fw-bold">Set Password</label>
  316. <input type="password" class="form-control" name="password" required>
  317. </div>
  318. </div>
  319. <div class="modal-footer bg-light d-flex justify-content-between">
  320. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
  321. <button type="submit" class="btn btn-warning fw-bold text-dark"><i class="bi bi-lock-fill me-1"></i>Lock Profile</button>
  322. </div>
  323. </form>
  324. </div>
  325. </div>
  326. </div>
  327. <div class="modal fade" id="unlockModal" tabindex="-1" aria-hidden="true">
  328. <div class="modal-dialog">
  329. <div class="modal-content">
  330. <form action="/patch-manager/profile/unlock" method="post">
  331. <div class="modal-header bg-light">
  332. <h5 class="modal-title fw-bold text-dark"><i class="bi bi-unlock-fill me-2 text-warning"></i>Unlock Profile</h5>
  333. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  334. </div>
  335. <div class="modal-body p-4">
  336. <input type="hidden" name="profile_id" id="unlock-profile-id">
  337. <p>Enter the password to unlock <strong id="unlock-profile-name"></strong>.</p>
  338. <div class="mb-3">
  339. <label class="form-label text-muted small fw-bold">Password</label>
  340. <input type="password" class="form-control" name="password" required>
  341. </div>
  342. </div>
  343. <div class="modal-footer bg-light d-flex justify-content-between">
  344. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
  345. <button type="submit" class="btn btn-warning fw-bold text-dark"><i class="bi bi-unlock-fill me-1"></i>Unlock Profile</button>
  346. </div>
  347. </form>
  348. </div>
  349. </div>
  350. </div>
  351. <div class="modal fade" id="deleteLockedModal" tabindex="-1" aria-hidden="true">
  352. <div class="modal-dialog">
  353. <div class="modal-content">
  354. <form action="/patch-manager/profile/delete" method="post">
  355. <div class="modal-header bg-light">
  356. <h5 class="modal-title fw-bold text-danger"><i class="bi bi-trash me-2"></i>Delete Locked Profile</h5>
  357. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  358. </div>
  359. <div class="modal-body p-4">
  360. <input type="hidden" name="profile_id" id="delete-locked-profile-id">
  361. <p>Enter the password to permanently delete <strong id="delete-locked-profile-name"></strong>.</p>
  362. <div class="mb-3">
  363. <label class="form-label text-muted small fw-bold">Password</label>
  364. <input type="password" class="form-control" name="password" required>
  365. </div>
  366. </div>
  367. <div class="modal-footer bg-light d-flex justify-content-between">
  368. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
  369. <button type="submit" class="btn btn-danger fw-bold"><i class="bi bi-trash me-1"></i>Delete Profile</button>
  370. </div>
  371. </form>
  372. </div>
  373. </div>
  374. </div>
  375. <footer class="py-3 bg-dark text-white-50 mt-auto">
  376. <div class="container-fluid px-4 d-flex justify-content-between">
  377. <div>
  378. <span class="mx-2">Credits:
  379. <a href="https://github.com/ArduPilot/CustomBuild/graphs/contributors" style="text-decoration: underline; color: white;">See Contributors</a>
  380. </span>|
  381. <span class="mx-2">Source:
  382. <a href="https://git.equalmass.com/Equalmass/ArdupilotCustomFirmwareBuilder" style="text-decoration: underline; color: white;">Ardupilot/CustomBuild</a>
  383. </span>
  384. </div>
  385. <span>ArduPilot Overlay Manager</span>
  386. </div>
  387. </footer>
  388. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  389. <script>
  390. function openRenameModal(profileId, profileName) {
  391. document.getElementById('rename-profile-id').value = profileId;
  392. document.getElementById('rename-new-name').value = profileName;
  393. new bootstrap.Modal(document.getElementById('renameModal')).show();
  394. }
  395. function openLockModal(profileId, profileName) {
  396. document.getElementById('lock-profile-id').value = profileId;
  397. document.getElementById('lock-profile-name').innerText = profileName;
  398. new bootstrap.Modal(document.getElementById('lockModal')).show();
  399. }
  400. function openUnlockModal(profileId, profileName) {
  401. document.getElementById('unlock-profile-id').value = profileId;
  402. document.getElementById('unlock-profile-name').innerText = profileName;
  403. new bootstrap.Modal(document.getElementById('unlockModal')).show();
  404. }
  405. function openDeleteLockedModal(profileId, profileName) {
  406. document.getElementById('delete-locked-profile-id').value = profileId;
  407. document.getElementById('delete-locked-profile-name').innerText = profileName;
  408. new bootstrap.Modal(document.getElementById('deleteLockedModal')).show();
  409. }
  410. </script>
  411. </body>
  412. </html>