writing.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. <html lang="zh-CN">
  2. <head>
  3. <meta charset="utf-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <meta name="author" content="jie">
  7. <title>Backup-X</title>
  8. <!-- Bootstrap CSS -->
  9. <link rel="stylesheet" href="/static/bootstrap.min.css">
  10. <link rel="stylesheet" href="/static/common.css">
  11. <script src="/static/jquery-3.5.1.min.js"></script>
  12. <script src="/static/bootstrap.min.js"></script>
  13. </head>
  14. <body>
  15. <header>
  16. <div class="navbar navbar-dark bg-dark shadow-sm">
  17. <div class="container d-flex justify-content-between">
  18. <a href="/" class="navbar-brand d-flex align-items-center">
  19. <strong>Backup-X</strong>
  20. </a>
  21. <a href="https://github.com/jeessy2/backup-x" target="_blank" style="color: white">
  22. <strong>Github | Backup-X</strong>
  23. <span class="badge badge-secondary">
  24. {{.Version}}
  25. </span>
  26. </a>
  27. </div>
  28. </div>
  29. </header>
  30. <main role="main" style="margin-top: 30px">
  31. <div class="row">
  32. <div class="col-md-6 offset-md-3">
  33. <form>
  34. <button class="btn btn-primary submit_btn" style="margin-bottom: 15px;">Save</button>
  35. <button class="btn btn-primary submit_btn_backup_idx" style="margin-bottom: 15px;margin-left: 15px;">Save & 立即备份选中</button>
  36. <button class="btn btn-warning submit_btn_backup_all" style="margin-bottom: 15px;margin-left: 15px;">Save & 立即备份全部</button>
  37. <div class="alert" style="display: none;">
  38. <strong id="resultMsg"></strong>
  39. </div>
  40. <div class="portlet">
  41. <h5 class="portlet__head">备份设置</h5>
  42. <div class="portlet__body">
  43. <nav>
  44. <div class="nav nav-tabs" id="nav-tab" role="tablist">
  45. {{range $i, $v := .BackupConfig}}
  46. <a class="nav-item nav-link {{if eq $i 0}}active{{end}}" id="id_{{$i}}" data-toggle="tab" href="#content_{{$i}}" onclick="contentChange('{{$i}}')" role="tab">
  47. {{if eq $v.ProjectName ""}}
  48. {{$i}}
  49. {{else}}
  50. {{$v.ProjectName}}
  51. {{end}}
  52. {{if ne $v.Enabled 0}}
  53. <span class="badge badge-pill badge-warning">停用</span>
  54. {{end}}
  55. </a>
  56. {{end}}
  57. </div>
  58. </nav>
  59. <div class="tab-content" id="nav-tabContent">
  60. {{range $i, $v := .BackupConfig}}
  61. <div class="tab-pane fade {{if eq $i 0}}show active{{end}}" id="content_{{$i}}" role="tabpanel">
  62. <br/>
  63. <div class="form-group row">
  64. <label for="ProjectName_{{$i}}" class="col-sm-2 col-form-label">项目名称</label>
  65. <div class="col-sm-10">
  66. <input class="form-control" name="ProjectName" id="ProjectName_{{$i}}" rows="3" value="{{$v.ProjectName}}" onchange="projectNameChange(this)" aria-describedby="ProjectName_help">
  67. <small id="ProjectName_help" class="form-text text-muted">请输入项目名称,一般取数据库名称,并确保名称不重复</small>
  68. </div>
  69. </div>
  70. <div class="form-group row">
  71. <label for="Command_{{$i}}" class="col-sm-2 col-form-label">备份脚本</label>
  72. <div class="col-sm-10">
  73. <textarea class="form-control" name="Command" id="Command_{{$i}}" rows="3" aria-describedby="Command_help">{{$v.Command}}</textarea>
  74. <small id="Command_help" class="form-text text-muted">
  75. 日期变量 #{DATE} ,密码变量 #{PWD} ,对象存储变量: #{Endpoint} #{AccessKey} #{SecretKey} #{BucketName}
  76. <br/>例: mysqldump -h192.168.1.11 -uroot -p#{PWD} db-name > #{DATE}.sql <a target="blank" href="https://github.com/jeessy2/backup-x#备份脚本参考">备份脚本参考</a>
  77. </small>
  78. </div>
  79. </div>
  80. <div class="form-group row">
  81. <label for="Pwd_{{$i}}" class="col-sm-2 col-form-label">密码变量</label>
  82. <div class="col-sm-10">
  83. <input type="password" class="form-control" name="Pwd" id="Pwd_{{$i}}" value="{{$v.Pwd}}">
  84. </div>
  85. </div>
  86. <div class="form-group row">
  87. <label for="Enabled_{{$i}}" class="col-sm-2">是否启用</label>
  88. <div class="col-sm-4">
  89. <select class="form-control" name="Enabled" id="Enabled_{{$i}}" value="{{$v.Enabled}}" onchange="enabledChange(this)">
  90. <option value="0" {{if eq $v.Enabled 0}}selected{{end}}>启用</option>
  91. <option value="1" {{if eq $v.Enabled 1}}selected{{end}}>停用</option>
  92. </select>
  93. </div>
  94. <label for="BackupType_{{$i}}" class="col-sm-2">备份类型</label>
  95. <div class="col-sm-4">
  96. <select class="form-control" name="BackupType" id="BackupType_{{$i}}" value="{{$v.BackupType}}">
  97. <option value="0" {{if eq $v.BackupType 0}}selected{{end}}>备份数据库</option>
  98. <option value="1" {{if eq $v.BackupType 1}}selected{{end}}>同步文件</option>
  99. </select>
  100. </div>
  101. </div>
  102. <div class="form-group row">
  103. <label for="SaveDays_{{$i}}" class="col-sm-2 col-form-label">本地保存(天)</label>
  104. <div class="col-sm-4">
  105. <input type="number" class="form-control" name="SaveDays" id="SaveDays_{{$i}}" value="{{$v.SaveDays}}" min="1">
  106. </div>
  107. <label for="SaveDaysS3_{{$i}}" class="col-sm-2 col-form-label">对象存储保存(天)</label>
  108. <div class="col-sm-4">
  109. <input type="number" class="form-control" name="SaveDaysS3" id="SaveDaysS3_{{$i}}" value="{{$v.SaveDaysS3}}" min="1">
  110. </div>
  111. </div>
  112. <div class="form-group row">
  113. <label for="StartTime_{{$i}}" class="col-sm-2 col-form-label">备份起始时间</label>
  114. <div class="col-sm-4">
  115. <select class="form-control" name="StartTime" id="StartTime_{{$i}}" value="{{$v.StartTime}}">
  116. <option value="0" {{if eq $v.StartTime 0}}selected{{end}}>0:00</option>
  117. <option value="1" {{if eq $v.StartTime 1}}selected{{end}}>1:00</option>
  118. <option value="2" {{if eq $v.StartTime 2}}selected{{end}}>2:00</option>
  119. <option value="3" {{if eq $v.StartTime 3}}selected{{end}}>3:00</option>
  120. <option value="4" {{if eq $v.StartTime 4}}selected{{end}}>4:00</option>
  121. <option value="5" {{if eq $v.StartTime 5}}selected{{end}}>5:00</option>
  122. <option value="6" {{if eq $v.StartTime 6}}selected{{end}}>6:00</option>
  123. <option value="7" {{if eq $v.StartTime 7}}selected{{end}}>7:00</option>
  124. <option value="8" {{if eq $v.StartTime 8}}selected{{end}}>8:00</option>
  125. <option value="9" {{if eq $v.StartTime 9}}selected{{end}}>9:00</option>
  126. <option value="10" {{if eq $v.StartTime 10}}selected{{end}}>10:00</option>
  127. <option value="11" {{if eq $v.StartTime 11}}selected{{end}}>11:00</option>
  128. <option value="12" {{if eq $v.StartTime 12}}selected{{end}}>12:00</option>
  129. <option value="13" {{if eq $v.StartTime 13}}selected{{end}}>13:00</option>
  130. <option value="14" {{if eq $v.StartTime 14}}selected{{end}}>14:00</option>
  131. <option value="15" {{if eq $v.StartTime 15}}selected{{end}}>15:00</option>
  132. <option value="16" {{if eq $v.StartTime 16}}selected{{end}}>16:00</option>
  133. <option value="17" {{if eq $v.StartTime 17}}selected{{end}}>17:00</option>
  134. <option value="18" {{if eq $v.StartTime 18}}selected{{end}}>18:00</option>
  135. <option value="19" {{if eq $v.StartTime 19}}selected{{end}}>19:00</option>
  136. <option value="20" {{if eq $v.StartTime 20}}selected{{end}}>20:00</option>
  137. <option value="21" {{if eq $v.StartTime 21}}selected{{end}}>21:00</option>
  138. <option value="22" {{if eq $v.StartTime 22}}selected{{end}}>22:00</option>
  139. <option value="23" {{if eq $v.StartTime 23}}selected{{end}}>23:00</option>
  140. </select>
  141. </div>
  142. <label for="Period_{{$i}}" class="col-sm-2 col-form-label">备份周期(分钟)</label>
  143. <div class="col-sm-4">
  144. <input type="number" class="form-control" name="Period" id="Period_{{$i}}" value="{{$v.Period}}" min="1">
  145. </div>
  146. </div>
  147. </div>
  148. {{end}}
  149. </div>
  150. </div>
  151. </div>
  152. <div class="portlet">
  153. <h5 class="portlet__head">服务配置</h5>
  154. <div class="portlet__body">
  155. <div class="form-group row">
  156. <label for="Username" class="col-sm-2 col-form-label">登录用户名</label>
  157. <div class="col-sm-10">
  158. <input class="form-control" name="Username" id="Username" value="{{.Username}}" aria-describedby="Username_help" required>
  159. <small id="Username_help" class="form-text text-muted">必须输入</small>
  160. </div>
  161. </div>
  162. <div class="form-group row">
  163. <label for="Password" class="col-sm-2 col-form-label">登录密码</label>
  164. <div class="col-sm-10">
  165. <input class="form-control" type="password" name="Password" id="Password" value="{{.Password}}" aria-describedby="password_help" required>
  166. <small id="password_help" class="form-text text-muted">必须输入</small>
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. <div class="portlet">
  172. <h5 class="portlet__head">Webhook通知</h5>
  173. <div class="portlet__body">
  174. <div class="form-group row">
  175. <label for="WebhookURL" class="col-sm-2 col-form-label">URL</label>
  176. <div class="col-sm-10">
  177. <input class="form-control" name="WebhookURL" id="WebhookURL" value="{{.WebhookURL}}" aria-describedby="WebhookURL_help">
  178. <small id="WebhookURL_help" class="form-text text-muted">
  179. <a target="blank" href="https://github.com/jeessy2/backup-x#webhook">点击参考官方Webhook说明</a><br/>
  180. 支持的变量#{projectName}, #{fileName}, #{fileSize}, #{result},
  181. </small>
  182. </div>
  183. </div>
  184. <div class="form-group row">
  185. <label for="WebhookRequestBody" class="col-sm-2 col-form-label">RequestBody</label>
  186. <div class="col-sm-10">
  187. <textarea class="form-control" id="WebhookRequestBody" name="WebhookRequestBody" rows="3" aria-describedby="WebhookRequestBody_help">
  188. {{- .WebhookRequestBody -}}
  189. </textarea>
  190. <small id="WebhookRequestBody_help" class="form-text text-muted">
  191. RequestBody为空GET请求,不为空POST请求。支持的变量同上
  192. </small>
  193. </div>
  194. </div>
  195. <div class="form-group row">
  196. <label class="col-sm-2 col-form-label"></label>
  197. <div class="col-sm-10">
  198. <button class="btn btn-primary btn-sm" id="webhookTestBtn" aria-describedby="webhookTestBtn_help">模拟测试Webhook</button>
  199. <small id="webhookTestBtn_help" class="form-text text-muted"></small>
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. <div class="portlet">
  205. <h5 class="portlet__head">对象存储配置</h5>
  206. <div class="portlet__body">
  207. <div class="form-group row">
  208. <label for="Endpoint" class="col-sm-2 col-form-label">Endpoint</label>
  209. <div class="col-sm-10">
  210. <input class="form-control" name="Endpoint" id="Endpoint" value="{{.Endpoint}}" aria-describedby="Endpoint_help">
  211. </div>
  212. </div>
  213. <div class="form-group row">
  214. <label for="AccessKey" class="col-sm-2 col-form-label">AccessKey</label>
  215. <div class="col-sm-10">
  216. <input class="form-control" name="AccessKey" id="AccessKey" value="{{.AccessKey}}" aria-describedby="AccessKey_help">
  217. </div>
  218. </div>
  219. <div class="form-group row">
  220. <label for="SecretKey" class="col-sm-2 col-form-label">SecretKey</label>
  221. <div class="col-sm-10">
  222. <input class="form-control" type="password" name="SecretKey" id="SecretKey" value="{{.SecretKey}}" aria-describedby="SecretKey_help">
  223. </div>
  224. </div>
  225. <div class="form-group row">
  226. <label for="BucketName" class="col-sm-2 col-form-label">BucketName</label>
  227. <div class="col-sm-10">
  228. <input class="form-control" name="BucketName" id="BucketName" value="{{.BucketName}}" aria-describedby="BucketName_help">
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. <button class="btn btn-primary submit_btn" style="margin-bottom: 15px;">Save</button>
  234. <button class="btn btn-primary submit_btn_backup_idx" style="margin-bottom: 15px;margin-left: 15px;">Save & 立即备份选中</button>
  235. <button class="btn btn-warning submit_btn_backup_all" style="margin-bottom: 15px;margin-left: 15px;">Save & 立即备份全部</button>
  236. </form>
  237. </div>
  238. <div class="col-md-3">
  239. <div class="nav nav-tabs" role="tablist" style="margin-top: 50px;">
  240. <a class="nav-item nav-link active" href="#x0" data-toggle="tab" onclick="changeLog(1)" role="tab">
  241. 备份日志
  242. </a>
  243. <a class="nav-item nav-link" href="#x1" data-toggle="tab" onclick="changeLog(2)" role="tab">
  244. 登录日志
  245. </a>
  246. <a class="nav-item nav-link" href="#x2" data-toggle="tab" onclick="changeLog(0)" role="tab">
  247. 全部日志
  248. </a>
  249. </div>
  250. <p class="font-weight-light text-break" style="margin-top: 10px;font-size: 13px;" id="logs"></p>
  251. <button type="button" class="btn btn-outline-primary btn-sm" id="clearLogBtn">清空日志</button>
  252. </div>
  253. </div>
  254. </main>
  255. <script>
  256. let contentIdx = 0
  257. let logList = [] // 0:所有日志;1:日常日志;2:登录日志
  258. function contentChange(i) {
  259. contentIdx = i
  260. }
  261. function changeLog(type = 0) {
  262. const curLogList = logList[type]
  263. const totalLogList = logList[0]
  264. const failedCount = totalLogList.filter(one => one.includes('登录失败')).length
  265. const backupCount = totalLogList.filter(one => one.includes('正在备份项目')).length
  266. const html = `备份执行次数:${backupCount}次<br/>历史登录失败:${failedCount}个<br/><br/>` + curLogList.join('<br/>')
  267. $("#logs").html(html)
  268. }
  269. $(function(){
  270. $(".submit_btn,.submit_btn_backup_all,.submit_btn_backup_idx").on('click',function(e) {
  271. e.preventDefault();
  272. $('body').animate({ scrollTop: 0 }, 300);
  273. let url = "/save"
  274. if(e.target.classList.contains("submit_btn_backup_all")) {
  275. url += "?backupAll=true"
  276. }
  277. if(e.target.classList.contains("submit_btn_backup_idx")) {
  278. url += "?backupIdx="+contentIdx
  279. }
  280. $.ajax({
  281. method: "POST",
  282. url: url,
  283. data: $('form').serialize(),
  284. success: function (result) {
  285. $('.alert').css("display", "block");
  286. if (result !== "ok") {
  287. $('.alert').addClass("alert-danger").removeClass("alert-success")
  288. $('#resultMsg').html(result)
  289. } else {
  290. // ok
  291. $('.alert').addClass("alert-success").removeClass("alert-danger")
  292. $('#resultMsg').html("保存成功")
  293. setTimeout(function(){
  294. $('.alert').css("display", "none");
  295. }, 3000)
  296. }
  297. },
  298. error: function(jqXHR) {
  299. alert(jqXHR.statusText);
  300. }
  301. })
  302. })
  303. })
  304. // projectNameChange
  305. function projectNameChange(that) {
  306. let id = $(that).attr("id").split("_")[1]
  307. let name = $(that).val()
  308. let enabled = $("#Enabled_"+id).val()
  309. $("#id_"+id).html(enabled === 0?name:name+'<span class="badge badge-pill badge-warning">停用</span>')
  310. }
  311. // enabledChange
  312. function enabledChange(that) {
  313. let id = $(that).attr("id").split("_")[1]
  314. let name = $("#ProjectName_"+id).val()
  315. let enabled = $(that).val()
  316. $("#id_"+id).html(enabled === 0?name:name+'<span class="badge badge-pill badge-warning">停用</span>')
  317. }
  318. </script>
  319. <script>
  320. function getLogs() {
  321. $.get("/logs", function(result){
  322. const curList = result.split("<br/>").filter(one => one.length)
  323. logList[0] = curList.map(one => one)
  324. logList[1] = curList.filter(one => !one.includes("登录"))
  325. logList[2] = curList.filter(one => one.includes("登录"))
  326. changeLog(1)
  327. })
  328. }
  329. getLogs()
  330. setInterval(getLogs, 5 * 1000)
  331. $(function(){
  332. $("#clearLogBtn").on("click", function(e) {
  333. e.preventDefault();
  334. $.ajax({
  335. method: "GET",
  336. url: "/clearLog",
  337. success: function() {
  338. getLogs()
  339. },
  340. error: function(jqXHR) {
  341. alert(jqXHR.statusText);
  342. }
  343. })
  344. })
  345. })
  346. </script>
  347. <script>
  348. $(function(){
  349. $("#webhookTestBtn").on("click", function(e) {
  350. e.preventDefault();
  351. $.ajax({
  352. method: "POST",
  353. url: "/webhookTest",
  354. data: {"URL": $("#WebhookURL").val(), "RequestBody": $("#WebhookRequestBody").val()},
  355. success: function() {
  356. $("#webhookTestBtn_help").text("提交模拟测试成功, 如修改记得保存配置")
  357. setTimeout(function(){
  358. $("#webhookTestBtn_help").text("")
  359. }, 5000)
  360. },
  361. error: function(jqXHR) {
  362. alert(jqXHR.statusText);
  363. }
  364. })
  365. })
  366. })
  367. </script>
  368. </html>