add: new version of the dashboard

public/css/style.css

@@ -25,7 +25,7 @@
   color: var(--color);
 }
 body {
-  --canvas-bg-color: #dddddd;
+  --canvas-bg-color: #ffffff;
   --sidebar-bg-color: #ffffff;
   --header-bg-color: #4a507b;
   --header-color: #ffffff;
@@ -192,6 +192,10 @@ a:hover {
   min-height: 100%;
 }
 
+.badge {
+  font-size: 45%;
+}
+
 .dropdown-item:focus,
 .dropdown-item:hover {
   background-color: var(--hover-bg-color);
@@ -207,6 +211,7 @@ a:hover {
   border: 1px solid var(--border-color);
   background: transparent;
   border-radius: 4px;
+  white-space: nowrap;
 }
 
 .btn:hover,

public/partials/dashboard.htm

@@ -1,250 +1,323 @@
-<div class="container-fluid h-100">
+<div class="container page">
-  <div class="row h-100">
+  <div class="row">
-    <div class="leftCol sidePanel shadow p-1 overflow-auto">
+    <div class="border-bottom color-border-secondary py-3 w-100">
-      <div class="container">
+      <div class="d-flex flex-items-start w-100">
-        <div class="row">
+        <form class="w-100" aria-label="Repositories" accept-charset="UTF-8">
-          <div class="col-6 col-md-12 p-1">
+          <div class="d-flex flex-column flex-lg-row flex-auto">
-            <a class="btn btn-primary btn-block black_border" href="/anonymize">
+            <div class="mb-1 mb-md-0 mr-md-3">
-              <i class="fa fa-plus-circle" aria-hidden="true"></i> Anonymize
+              <input
-            </a>
+                type="search"
+                id="search"
+                class="form-control"
+                aria-label="Find a repository…"
+                placeholder="Find a repository…"
+                autocomplete="off"
+                ng-model="search"
+              />
+            </div>
+
+            <div class="d-flex flex-wrap">
+              <div class="dropdown mt-1 mt-lg-0 mr-1">
+                <button
+                  class="btn btn-secondary dropdown-toggle"
+                  type="button"
+                  id="dropdownSort"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  Sort
+                </button>
+                <div class="dropdown-menu" aria-labelledby="dropdownSort">
+                  <h6 class="dropdown-header">Select order</h6>
+                  <div class="form-check dropdown-item">
+                    <input
+                      class="form-check-input"
+                      type="radio"
+                      name="sort"
+                      id="sortFullName"
+                      value="fullName"
+                      ng-model="orderBy"
+                    />
+                    <label class="form-check-label" for="sortFullName">
+                      Repository
+                    </label>
+                  </div>
+                  <div class="form-check dropdown-item">
+                    <input
+                      class="form-check-input"
+                      type="radio"
+                      name="sort"
+                      id="sortAnonymizeDate"
+                      value="-anonymizeDate"
+                      ng-model="orderBy"
+                    />
+                    <label class="form-check-label" for="sortAnonymizeDate">
+                      Anonymize Date
+                    </label>
+                  </div>
+                  <div class="form-check dropdown-item">
+                    <input
+                      class="form-check-input"
+                      type="radio"
+                      name="sort"
+                      id="sortStatus"
+                      value="-status"
+                      ng-model="orderBy"
+                    />
+                    <label class="form-check-label" for="sortStatus">
+                      Status
+                    </label>
+                  </div>
+                  <div class="form-check dropdown-item">
+                    <input
+                      class="form-check-input"
+                      type="radio"
+                      name="sort"
+                      id="sortLastView"
+                      value="-lastView"
+                      ng-model="orderBy"
+                    />
+                    <label class="form-check-label" for="sortLastView">
+                      Last View
+                    </label>
+                  </div>
+                  <div class="form-check dropdown-item">
+                    <input
+                      class="form-check-input"
+                      type="radio"
+                      name="sort"
+                      id="sortPageView"
+                      value="-pageView"
+                      ng-model="orderBy"
+                    />
+                    <label class="form-check-label" for="sortPageView">
+                      Page View
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="dropdown mt-1 mt-lg-0 mr-1">
+                <button
+                  class="btn btn-secondary dropdown-toggle"
+                  type="button"
+                  id="dropdownStatus"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  Status
+                </button>
+                <div class="dropdown-menu" aria-labelledby="dropdownStatus">
+                  <h6 class="dropdown-header">Select status</h6>
+                  <div class="form-check dropdown-item">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      name="sort"
+                      id="statusReady"
+                      value="ready"
+                      ng-model="filters.status.ready"
+                    />
+                    <label class="form-check-label" for="statusReady">
+                      Ready
+                    </label>
+                  </div>
+                  <div class="form-check dropdown-item">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      name="sort"
+                      id="statusExpired"
+                      value="expired"
+                      ng-model="filters.status.expired"
+                    />
+                    <label class="form-check-label" for="statusExpired">
+                      Expired
+                    </label>
+                  </div>
+                  <div class="form-check dropdown-item">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      name="sort"
+                      id="statusRemoved"
+                      value="removed"
+                      ng-model="filters.status.removed"
+                    />
+                    <label class="form-check-label" for="statusRemoved">
+                      Removed
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="col-6 col-md-12 p-1">
+        </form>
-            <a
+        <div class="d-none d-md-flex flex-md-items-center flex-md-justify-end">
-              class="btn btn-block black_border"
+          <a href="/anonymize" class="text-center btn btn-primary ml-3">
-              href="/claim"
+            <i class="fa fa-plus-circle" aria-hidden="true"></i> Anonymize
-              title="Claim the ownership of an existing anonymized repository."
+          </a>
+          <a
+            title="Claim the ownership of an existing anonymized repository."
+            data-toggle="tooltip"
+            data-placement="bottom"
+            href="/claim"
+            class="text-center btn btn-secondary ml-3"
+          >
+            Claim
+          </a>
+        </div>
+      </div>
+    </div>
+    <ul class="p-0 m-0 w-100">
+      <li
+        class="col-12 d-flex px-0 py-3 border-bottom color-border-secondary"
+        ng-class="{'expired': repo.status == 'expired','removed': repo.status == 'removed' }"
+        ng-repeat="repo in repositories| filter:repoFiler| orderBy:orderBy as filteredRepositories"
+      >
+        <div class="w-100">
+          <div class="">
+            <h3>
+              <a ng-href="/r/{{repo.repoId}}" ng-bind="repo.repoId"></a>
+              <span
+                class="badge"
+                ng-class="{'badge-warning': repo.status == 'removed' || repo.status == 'expired', 'badge-success': repo.status == 'ready', 'badge-danger': ''}"
+                ng-bind="repo.status | title"
+              ></span>
+            </h3>
+            <span class="color-text-secondary mb-1">
+              <span class="repository">
+                <i class="fab fa-github" aria-hidden="true"></i>
+                <a
+                  href="https://github.com/{{repo.source.fullName}}/commit/{{repo.source.commit}}"
+                  class="fullName"
+                  ng-bind="repo.source.fullName"
+                ></a>
+              </span>
+              <span class="branch" ng-if="repo.options.update">
+                <i class="fas fa-code-branch" aria-hidden="true"></i>
+                <a
+                  href="https://github.com/{{repo.source.fullName}}/commit/{{repo.source.commit}}"
+                  class="branch"
+                  ng-bind="repo.source.branch"
+                ></a>
+              </span>
+              <span class="commit" ng-if="!repo.options.update">
+                @<a
+                  href="https://github.com/{{repo.source.fullName}}/commit/{{repo.source.commit}}"
+                  class="commit"
+                  ng-bind="repo.source.commit.substring(0, 8)"
+                ></a>
+              </span>
+              anonymized
+              {{repo.anonymizeDate | humanTime}}
+            </span>
+          </div>
+          <div class="color-text-secondary mt-2">
+            <span
+              class="ml-0 mr-3"
+              class="terms"
+              title="Terms: {{repo.options.terms.join(', ')}}"
               data-toggle="tooltip"
               data-placement="bottom"
             >
-              Claim repository
+              <i class="fas fa-shield-alt"></i>
-            </a>
+              {{repo.options.terms.length | number}}
+            </span>
+            <span
+              class="ml-0 mr-3"
+              title="Size: {{repo.size | humanFileSize}}"
+              data-toggle="tooltip"
+              data-placement="bottom"
+            >
+              <i class="fas fa-database"></i> {{repo.size |
+              humanFileSize}}</span
+            >
+            <span
+              class="ml-0 mr-3"
+              title="View: {{repo.pageView | number}}"
+              data-toggle="tooltip"
+              data-placement="bottom"
+            >
+              <i class="far fa-eye" aria-hidden="true"></i>
+              {{repo.pageView | number}}
+            </span>
+            <span
+              class="ml-0 mr-3"
+              title="Last view: {{repo.lastView | date}}"
+              data-toggle="tooltip"
+              data-placement="bottom"
+            >
+              <i class="far fa-calendar-alt" aria-hidden="true"></i>
+              Last view: {{repo.lastView | humanTime}}</span
+            >
+            <span
+              class="ml-0 mr-3"
+              ng-if="repo.options.expirationMode!='never' && repo.status == 'ready'"
+            >
+              <i class="far fa-clock" aria-hidden="true"></i>
+              Expire: {{repo.options.expirationDate | humanTime}}</span
+            >
           </div>
         </div>
-      </div>
+        <div class="d-flex">
-
+          <div class="dropdown">
-      <h3>Filters</h3>
+            <button
-      <div class="form-group">
+              class="btn black_border dropdown-toggle btn-sm"
-        <input
+              type="button"
-          type="search"
+              id="dropdownMenuButton"
-          class="form-control"
+              data-toggle="dropdown"
-          id="search"
+              aria-haspopup="true"
-          placeholder="Search..."
+              aria-expanded="false"
-          ng-model="search"
+            >
-        />
+              Actions
-      </div>
+            </button>
-      <div class="input-group">
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-        <div class="input-group-prepend">
+              <a class="dropdown-item" href="/anonymize/{{repo.repoId}}">
-          <label class="input-group-text" for="order">Sort</label>
+                <i class="far fa-edit" aria-hidden="true"></i> Edit
-        </div>
+              </a>
-        <select class="custom-select" ng-model="orderBy">
+              <a
-          <option value="repoId">Repository ID</option>
+                class="dropdown-item"
-          <option value="fullName">Repository</option>
+                href="#"
-          <option value="-anonymizeDate">Anonymize Date</option>
+                ng-show="repo.status == 'ready'"
-          <option value="-status">Status</option>
+                ng-click="updateRepository(repo)"
-          <option value="-lastView">Last View</option>
-          <option value="-pageView">Page View</option>
-        </select>
-      </div>
-      <h5>Status</h5>
-      <div class="form-check form-check-inline">
-        <input
-          class="form-check-input"
-          type="checkbox"
-          ng-model="filters.status.ready"
-          id="ready"
-        />
-        <label class="form-check-label" for="ready"> Ready </label>
-      </div>
-      <div class="form-check form-check-inline">
-        <input
-          class="form-check-input"
-          type="checkbox"
-          ng-model="filters.status.expired"
-          id="expired"
-        />
-        <label class="form-check-label" for="expired"> Expired </label>
-      </div>
-      <div class="form-check form-check-inline">
-        <input
-          class="form-check-input"
-          type="checkbox"
-          ng-model="filters.status.removed"
-          id="removed"
-        />
-        <label class="form-check-label" for="removed"> Removed </label>
-      </div>
-      <h5>Quota</h5>
-      {{quota.used | humanFileSize}}/{{quota.total| humanFileSize}}
-    </div>
-    <div class="col-md h-100 overflow-auto body">
-      <div class="row">
-        <div class="col p-0">
-          <table class="table repositories">
-            <thead>
-              <tr>
-                <th scope="col" class="d-none d-xl-table-cell">#</th>
-                <th scope="col">Repository ID</th>
-                <th scope="col">Anonymized repository</th>
-                <th scope="col" class="d-none d-lg-table-cell">Branch</th>
-                <!-- <th scope="col">Commit</th> -->
-                <th scope="col" class="text-center d-none d-lg-table-cell">
-                  # Terms
-                </th>
-                <th scope="col" class="text-center">Status</th>
-                <th scope="col" class="text-center d-none d-xl-table-cell">
-                  Expiration
-                </th>
-                <th scope="col" class="text-center d-none d-xl-table-cell">
-                  Anonymize date
-                </th>
-                <th scope="col" class="text-center d-none d-xl-table-cell">
-                  Size
-                </th>
-                <th scope="col" class="text-center d-none d-xl-table-cell">
-                  # Views
-                </th>
-                <th scope="col" class="text-center d-none d-xl-table-cell">
-                  Last view
-                </th>
-                <th scope="col" class="text-right">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                class="align-middle"
-                ng-repeat="repo in repositories| filter:repoFiler| orderBy:orderBy as filteredRepositories"
               >
-                <th scope="row" class="align-middle d-none d-xl-table-cell">
+                <i class="fas fa-sync"></i> Force update
-                  {{$index + 1}}
+              </a>
-                </th>
+              <a
-                <td class="align-middle">
+                class="dropdown-item"
-                  <a href="/r/{{repo.repoId}}">{{repo.repoId}}</a>
+                href="#"
-                </td>
+                ng-show="repo.status == 'removed'"
-                <td
+                ng-click="updateRepository(repo)"
-                  class="align-middle"
+              >
-                  title="Commit: {{repo.source.branch.commit}}"
+                <i class="fas fa-check-circle"></i>
-                  data-toggle="tooltip"
+                Enable
-                  data-placement="bottom"
+              </a>
-                >
+              <a
-                  <a
+                class="dropdown-item"
-                    href="https://github.com/{{repo.source.fullName}}/commit/{{repo.source.branch.commit}}"
+                href="#"
-                    >{{repo.source.fullName}}</a
+                ng-show="repo.status != 'removed'"
-                  >
+                ng-click="removeRepository(repo)"
-                </td>
+              >
-                <td
+                <i class="fas fa-trash-alt"></i> Remove
-                  title="Commit: {{repo.source.branch.commit}}"
+              </a>
-                  data-toggle="tooltip"
+              <a class="dropdown-item" href="/r/{{repo.repoId}}/">
-                  data-placement="bottom"
+                <i class="fa fa-eye" aria-hidden="true"></i> View Repo
-                  class="align-middle d-none d-lg-table-cell"
+              </a>
-                >
+              <a
-                  {{repo.source.branch.name}}
+                class="dropdown-item"
-                </td>
+                href="/w/{{repo.repoId}}/"
-                <!-- <td>{{repo.commit.substring(0, 6)}}</td> -->
+                target="_self"
-                <td class="text-center align-middle d-none d-lg-table-cell">
+                ng-if="repo.options.page"
-                  {{repo.options.terms.length}}
+              >
-                </td>
+                <i class="fas fa-globe"></i> View Page
-                <td
+              </a>
-                  class="text-center align-middle"
+            </div>
-                  ng-class="{'alert-danger': repo.status == 'expired', 'alert-warning': repo.status == 'removed'}"
+          </div>
-                >
-                  {{repo.status | title}}
-                </td>
-                <td
-                  class="text-center align-middle d-none d-xl-table-cell"
-                  title="Expiration Mode: {{repo.options.expirationMode | title}}"
-                  data-toggle="tooltip"
-                  data-placement="bottom"
-                  ng-bind="repo.options.expirationDate | date"
-                  ng-if="repo.options.expirationMode!='never'"
-                ></td>
-                <td
-                  class="text-center align-middle d-none d-xl-table-cell"
-                  ng-bind="repo.options.expirationMode | title"
-                  ng-if="repo.options.expirationMode=='never'"
-                ></td>
-                <td class="text-center align-middle d-none d-xl-table-cell">
-                  {{repo.anonymizeDate | date}}
-                </td>
-                <td class="text-center align-middle d-none d-xl-table-cell">
-                  {{repo.size | humanFileSize}}
-                </td>
-                <td class="text-center align-middle d-none d-xl-table-cell">
-                  {{repo.pageView}}
-                </td>
-                <td class="text-center align-middle d-none d-xl-table-cell">
-                  {{repo.lastView | date}}
-                </td>
-                <td class="text-right align-middle">
-                  <div class="dropdown">
-                    <button
-                      class="btn black_border dropdown-toggle btn-sm"
-                      type="button"
-                      id="dropdownMenuButton"
-                      data-toggle="dropdown"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                    >
-                      Actions
-                    </button>
-                    <div
-                      class="dropdown-menu"
-                      aria-labelledby="dropdownMenuButton"
-                    >
-                      <a
-                        class="dropdown-item"
-                        href="/anonymize/{{repo.repoId}}"
-                      >
-                        <i class="fa fa-edit" aria-hidden="true"></i> Edit
-                      </a>
-                      <a
-                        class="dropdown-item"
-                        href="#"
-                        ng-show="repo.status == 'ready'"
-                        ng-click="updateRepository(repo)"
-                      >
-                        <i class="fa fa-undo" aria-hidden="true"></i> Force
-                        update
-                      </a>
-                      <a
-                        class="dropdown-item"
-                        href="#"
-                        ng-show="repo.status == 'removed'"
-                        ng-click="updateRepository(repo)"
-                      >
-                        <i class="fa fa-check-circle" aria-hidden="true"></i>
-                        Enable
-                      </a>
-                      <a
-                        class="dropdown-item"
-                        href="#"
-                        ng-show="repo.status != 'removed'"
-                        ng-click="removeRepository(repo)"
-                      >
-                        <i class="fa fa-remove" aria-hidden="true"></i> Remove
-                      </a>
-                      <a class="dropdown-item" href="/r/{{repo.repoId}}/">
-                        <i class="fa fa-eye" aria-hidden="true"></i> View Repo
-                      </a>
-                      <a
-                        class="dropdown-item"
-                        href="/w/{{repo.repoId}}/"
-                        target="_self"
-                        ng-if="repo.options.page"
-                      >
-                        <i class="fa fa-globe" aria-hidden="true"></i> View Page
-                      </a>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-              <tr ng-hide="filteredRepositories.length">
-                <td></td>
-                <td>No Repository</td>
-              </tr>
-            </tbody>
-          </table>
         </div>
-      </div>
+      </li>
-    </div>
+    </ul>
   </div>
 </div>

public/partials/header.htm

@@ -47,7 +47,7 @@
           target="_blank"
           href="https://github.com/tdurieux/anonymous_github/"
           data-offset="30"
-          ><i class="fa fa-github" aria-hidden="true"></i
+          ><i class="fab fa-github" aria-hidden="true"></i
         ></a>
       </li>
       <li class="nav-item">

public/script/app.js

@@ -88,7 +88,7 @@ angular
       bytes = bytes / 8;
 
       if (Math.abs(bytes) < thresh) {
-        return bytes + " B";
+        return bytes + "B";
       }
 
       const units = si
@@ -102,7 +102,45 @@ angular
         ++u;
       } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
 
-      return bytes.toFixed(dp) + " " + units[u];
+      return bytes.toFixed(dp) + "" + units[u];
+    };
+  })
+  .filter("humanTime", function () {
+    return function humanTime(seconds) {
+      if (seconds instanceof Date)
+        seconds = Math.round((Date.now() - seconds) / 1000);
+      if (typeof seconds == "string")
+        seconds = Math.round((Date.now() - new Date(seconds)) / 1000);
+      var suffix = seconds < 0 ? "from now" : "ago";
+
+      // more than 2 days ago display Date
+      if (Math.abs(seconds) > 2 * 60 * 60 * 24) {
+        const now = new Date();
+        now.setSeconds(now.getSeconds() - seconds);
+        return "on " + now.toLocaleDateString();
+      }
+
+      seconds = Math.abs(seconds);
+
+      var times = [
+        seconds / 60 / 60 / 24 / 365, // years
+        seconds / 60 / 60 / 24 / 30, // months
+        seconds / 60 / 60 / 24 / 7, // weeks
+        seconds / 60 / 60 / 24, // days
+        seconds / 60 / 60, // hours
+        seconds / 60, // minutes
+        seconds, // seconds
+      ];
+      var names = ["year", "month", "week", "day", "hour", "minute", "second"];
+
+      for (var i = 0; i < names.length; i++) {
+        var time = Math.floor(times[i]);
+        var name = names[i];
+        if (time > 1) name += "s";
+
+        if (time >= 1) return time + " " + name + " " + suffix;
+      }
+      return "0 seconds " + suffix;
     };
   })
   .filter("title", function () {
@@ -515,6 +553,7 @@ angular
               if (!repo.lastView) {
                 repo.lastView = "";
               }
+              repo.options.terms = repo.options.terms.filter((f) => f);
             }
           },
           (err) => {
@@ -529,7 +568,7 @@ angular
           $scope.quota = res.data;
         }, console.error);
       }
-      getQuota();
+      // getQuota();
 
       $scope.removeRepository = (repo) => {
         if (
@@ -555,7 +594,7 @@ angular
 
         if ($scope.search.trim().length == 0) return true;
 
-        if (repo.fullName.indexOf($scope.search) > -1) return true;
+        if (repo.source.fullName.indexOf($scope.search) > -1) return true;
         if (repo.repoId.indexOf($scope.search) > -1) return true;
 
         return false;
@@ -839,7 +878,10 @@ angular
         if ($scope.readme) return $scope.readme;
         const o = parseGithubUrl($scope.repoUrl);
         const res = await $http.get(`/api/repo/${o.owner}/${o.repo}/readme`, {
-          params: { force: force === true ? "1" : "0", branch: $scope.branch },
+          params: {
+            force: force === true ? "1" : "0",
+            branch: $scope.source.branch,
+          },
         });
         $scope.readme = res.data;
       }
@@ -1068,17 +1110,6 @@ angular
         );
       }
 
-      function getStats() {
-        $http.get(`/api/repo/${$scope.repoId}/stats/`).then(
-          (res) => {
-            $scope.stats = res.data;
-          },
-          (err) => {
-            console.log(err);
-          }
-        );
-      }
-
       async function getOptions(callback) {
         $http.get(`/api/repo/${$scope.repoId}/options`).then(
           (res) => {
@@ -1261,10 +1292,6 @@ angular
         getOptions((options) => {
           getFiles(() => {
             updateContent();
-
-            if (options.mode == "GitHubDownload") {
-              getStats();
-            }
           });
         });
       }