index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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" ng-class="{'progress-bar-success': model.needBytes === 0, 'progress-bar-info': model.needBytes !== 0}" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {{100 * model.localFiles / (model.localFiles + model.needFiles) | number:2}}%;"></div>
  36. </div>
  37. <p class="pull-right">{{100 * model.localFiles / (model.localFiles + model.needFiles) | number:2}}%</p>
  38. <p ng-show="model.needBytes > 0">Need {{model.needFiles | alwaysNumber}} files, {{model.needBytes | binary}}B</p>
  39. </div>
  40. </div>
  41. <div class="row">
  42. <div class="col-md-6">
  43. <h1>Repository Status</h1>
  44. <p>Cluster contains {{model.globalFiles | alwaysNumber}} files, {{model.globalBytes | binary}}B
  45. <span class="text-muted">(+{{model.globalDeleted | alwaysNumber}} delete records)</span></p>
  46. <p>Local repository has {{model.localFiles | alwaysNumber}} files, {{model.localBytes | binary}}B
  47. <span class="text-muted">(+{{model.localDeleted | alwaysNumber}} delete records)</span></p>
  48. <div ng-show="model.needFiles > 0">
  49. <h2>Files to Synchronize</h2>
  50. <table class="table table-condesed table-striped">
  51. <tr ng-repeat="file in need track by $index">
  52. <td>{{file.Name}}</td>
  53. <td>{{file.Size | binary}}B</td>
  54. </tr>
  55. </table>
  56. </div>
  57. </div>
  58. <div class="col-md-6">
  59. <h1>Cluster Status</h1>
  60. <table class="table table-condensed">
  61. <tbody>
  62. <tr ng-repeat="(node, address) in config.nodes" ng-class="{'text-primary': !!connections[node]}">
  63. <td><abbr class="text-monospace" title="{{node}}">{{node | short}}</abbr></td>
  64. <td>
  65. <span ng-show="!!connections[node]">
  66. <span class="glyphicon glyphicon-link"></span>
  67. {{connections[node].Address}}
  68. </span>
  69. <span ng-hide="!!connections[node]">
  70. <span class="glyphicon glyphicon-cog"></span>
  71. {{address}}
  72. </span>
  73. </td>
  74. <td class="text-right">
  75. <abbr title="{{connections[node].InBytesTotal | binary}}B">{{connections[node].inbps | metric}}b/s</abbr>
  76. <span class="text-muted glyphicon glyphicon-cloud-download"></span>
  77. </td>
  78. <td class="text-right">
  79. <abbr title="{{connections[node].OutBytesTotal | binary}}B">{{connections[node].outbps | metric}}b/s</abbr>
  80. <span class="text-muted glyphicon glyphicon-cloud-upload"></span>
  81. </td>
  82. </tr>
  83. </tbody>
  84. </table>
  85. </div>
  86. </div>
  87. </div>
  88. <script src="angular.min.js"></script>
  89. <script src="jquery-2.0.3.min.js"></script>
  90. <script src="bootstrap/js/bootstrap.min.js"></script>
  91. <script src="app.js"></script>
  92. </body>
  93. </html>