index.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="syncthing">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
  10. <title>syncthing</title>
  11. <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  12. <style type="text/css">
  13. body {
  14. padding-top: 20px;
  15. padding-bottom: 20px;
  16. }
  17. .header {
  18. border-bottom: 1px solid #e5e5e5;
  19. padding-bottom: 10px;
  20. }
  21. .text-monospace {
  22. font-family: monospace;
  23. }
  24. </style>
  25. </head>
  26. <body ng-controller="SyncthingCtrl">
  27. <div class="container">
  28. <div class="header">
  29. <h3 class="text-muted">syncthing&emsp;<small>|</small>&emsp;<small>{{version}}</small></h3>
  30. </div>
  31. <div class="row">
  32. <div class="col-md-12">
  33. <h2>Synchronization</h2>
  34. <div class="progress">
  35. <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
  36. ng-class="{'progress-bar-success': model.needBytes === 0, 'progress-bar-info': model.needBytes !== 0}"
  37. style="width: {{100 * model.inSyncBytes / model.globalBytes | number:2}}%;">
  38. {{100 * model.inSyncBytes / model.globalBytes | number:0}}%
  39. </div>
  40. </div>
  41. <p ng-show="model.needBytes > 0">Need {{model.needFiles | alwaysNumber}} files, {{model.needBytes | binary}}B</p>
  42. </div>
  43. </div>
  44. <div class="row">
  45. <div class="col-md-6">
  46. <h1>Repository Status</h1>
  47. <p>Cluster contains {{model.globalFiles | alwaysNumber}} files, {{model.globalBytes | binary}}B
  48. <span class="text-muted">(+{{model.globalDeleted | alwaysNumber}} delete records)</span></p>
  49. <p>Local repository has {{model.localFiles | alwaysNumber}} files, {{model.localBytes | binary}}B
  50. <span class="text-muted">(+{{model.localDeleted | alwaysNumber}} delete records)</span></p>
  51. <div ng-show="model.needFiles > 0">
  52. <h2>Files to Synchronize</h2>
  53. <table class="table table-condensed table-striped">
  54. <tr ng-repeat="file in need track by $index">
  55. <td><abbr title="{{file.Name}}">{{file.ShortName}}</abbr></td>
  56. <td class="text-right">{{file.Size | binary}}B</td>
  57. </tr>
  58. </table>
  59. </div>
  60. </div>
  61. <div class="col-md-6">
  62. <h1>Cluster Status</h1>
  63. <table class="table table-condensed">
  64. <tbody>
  65. <tr ng-repeat="(node, address) in config.nodes" ng-class="{'text-primary': !!connections[node]}">
  66. <td><abbr class="text-monospace" title="{{node}}">{{node | short}}</abbr></td>
  67. <td>
  68. <span ng-show="!!connections[node]">
  69. <span class="glyphicon glyphicon-link"></span>
  70. {{connections[node].Address}}
  71. </span>
  72. <span ng-hide="!!connections[node]">
  73. <span class="glyphicon glyphicon-cog"></span>
  74. {{address}}
  75. </span>
  76. </td>
  77. <td class="text-right">
  78. <abbr title="{{connections[node].InBytesTotal | binary}}B">{{connections[node].inbps | metric}}b/s</abbr>
  79. <span class="text-muted glyphicon glyphicon-cloud-download"></span>
  80. </td>
  81. <td class="text-right">
  82. <abbr title="{{connections[node].OutBytesTotal | binary}}B">{{connections[node].outbps | metric}}b/s</abbr>
  83. <span class="text-muted glyphicon glyphicon-cloud-upload"></span>
  84. </td>
  85. </tr>
  86. </tbody>
  87. </table>
  88. </div>
  89. </div>
  90. </div>
  91. <script src="angular.min.js"></script>
  92. <script src="jquery-2.0.3.min.js"></script>
  93. <script src="bootstrap/js/bootstrap.min.js"></script>
  94. <script src="app.js"></script>
  95. </body>
  96. </html>