anonymous_github/public/partials/dashboard.htm

<div class="container page dashboard-page paper-page">
  <div class="row">
    <div class="w-100">
      <div class="paper-crumbs">My work &nbsp;/&nbsp; <span class="here">Dashboard</span></div>
      <div class="d-flex align-items-end justify-content-between flex-wrap" style="gap: 12px;">
        <div>
          <h1 class="paper-page-title">Your <em>anonymizations</em></h1>
          <p class="paper-page-lede">Every repository and pull request you&rsquo;ve mirrored, with live status and stats.</p>
        </div>
        <a href="/anonymize" class="btn btn-ink">
          <i class="fa fa-plus-circle mr-1" aria-hidden="true"></i> New anonymization
        </a>
      </div>

      <!-- Quota bars -->
      <div class="quota-row" ng-show="quota">
        <div class="quota-item">
          <div class="quota-header">
            <span class="quota-label">Repositories</span>
            <span class="quota-value" ng-show="quota">{{quota.repository.used | number}}/{{quota.repository.total}}</span>
          </div>
          <div class="progress quota-progress">
            <div
              class="progress-bar"
              ng-class="{'bg-success': quota.repository.percent < 25 || quota.repository.total == 0, 'bg-danger': quota.repository.percent > 95 && quota.repository.total > 0, 'bg-warning': quota.repository.percent > 75 && quota.repository.total > 0 }"
              role="progressbar"
              style="width: {{quota.repository.percent}}%;"
              aria-valuenow="{{quota.repository.used}}"
              aria-valuemin="0"
              aria-valuemax="{{quota.repository.total}}"
            ></div>
          </div>
        </div>
        <div class="quota-item">
          <div class="quota-header">
            <span class="quota-label">Storage</span>
            <span class="quota-value" ng-show="quota">{{quota.storage.used | humanFileSize}}/{{quota.storage.total | humanFileSize}}</span>
          </div>
          <div class="progress quota-progress">
            <div
              class="progress-bar"
              ng-class="{'bg-success': quota.storage.percent < 25 || quota.storage.total == 0, 'bg-danger': quota.storage.percent > 95 && quota.storage.total > 0, 'bg-warning': quota.storage.percent > 75 && quota.storage.total > 0 }"
              role="progressbar"
              style="width: {{quota.storage.percent}}%;"
              aria-valuenow="{{quota.storage.used}}"
              aria-valuemin="0"
              aria-valuemax="{{quota.storage.total}}"
            ></div>
          </div>
        </div>
        <div class="quota-item">
          <div class="quota-header">
            <span class="quota-label">Files</span>
            <span class="quota-value" ng-show="quota">{{quota.file.used | number}}/{{quota.file.total || "&#8734;"}}</span>
          </div>
          <div class="progress quota-progress">
            <div
              class="progress-bar"
              ng-class="{'bg-success': quota.file.percent < 25 || quota.file.total == 0, 'bg-danger': quota.file.percent > 95 && quota.file.total > 0, 'bg-warning': quota.file.percent > 75 && quota.file.total > 0 }"
              role="progressbar"
              style="width: {{quota.file.percent}}%;"
              aria-valuenow="{{quota.file.used}}"
              aria-valuemin="0"
              aria-valuemax="{{quota.file.total}}"
            ></div>
          </div>
        </div>
      </div>

      <!-- Search + filters row -->
      <form class="w-100 dashboard-filter-row" aria-label="Dashboard" accept-charset="UTF-8">
        <div class="search-wrap">
          <input
            type="search"
            id="search"
            class="form-control"
            aria-label="Search..."
            placeholder="Search anonymizations…"
            autocomplete="off"
            ng-model="search"
          />
        </div>
        <div class="d-flex flex-wrap" style="gap: 8px">
            <!-- Type filter -->
            <div class="btn-group btn-group-sm" role="group">
              <button type="button" class="btn" ng-class="{'btn-primary': typeFilter === 'all'}" ng-click="typeFilter = 'all'">All</button>
              <button type="button" class="btn" ng-class="{'btn-primary': typeFilter === 'repo'}" ng-click="typeFilter = 'repo'">Repos</button>
              <button type="button" class="btn" ng-class="{'btn-primary': typeFilter === 'pr'}" ng-click="typeFilter = 'pr'">PRs</button>
              <button type="button" class="btn" ng-class="{'btn-primary': typeFilter === 'gist'}" ng-click="typeFilter = 'gist'">Gists</button>
            </div>

            <div class="dropdown">
              <button
                class="btn btn-sm 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="_name" ng-model="orderBy" />
                  <label class="form-check-label" for="sortFullName">Name</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">
              <button
                class="btn btn-sm 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" 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" 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" id="statusRemoved" value="removed" ng-model="filters.status.removed" />
                  <label class="form-check-label" for="statusRemoved">Removed</label>
                </div>
              </div>
            </div>
          </div>
      </form>

      <!-- Active filter chips -->
      <div class="d-flex flex-wrap mt-2" style="gap: 6px" ng-show="filters.status.ready === false || filters.status.expired === false || filters.status.removed === false">
        <span class="filter-chip" ng-show="!v" ng-repeat="(f, v) in filters.status">
          {{f | title}}
          <button type="button" class="filter-chip-close" aria-label="Remove filter" ng-click="filters.status[f] = true;">
            &times;
          </button>
        </span>
      </div>
    </div>

    <!-- Table -->
    <div class="paper-table w-100" role="table" aria-label="Anonymizations">
      <div class="paper-table-head" role="row">
        <div role="columnheader">Anonymization</div>
        <div role="columnheader">Conference</div>
        <div role="columnheader">Status</div>
        <div role="columnheader" class="num">Views</div>
        <div role="columnheader">Expires</div>
        <div role="columnheader" aria-label="Actions"></div>
      </div>
      <div
        class="paper-table-row"
        role="row"
        ng-class="{'repo-inactive': item.status == 'expired' || item.status == 'removed' || item.status == 'error'}"
        ng-repeat="item in items | filter:itemFilter | orderBy:orderBy as filteredItems"
      >
        <div class="cell-anon" role="cell">
          <span class="type-badge" ng-class="{'type-repo': item._type === 'repo', 'type-pr': item._type === 'pr', 'type-gist': item._type === 'gist'}">{{item._type === 'repo' ? 'Repo' : item._type === 'pr' ? 'PR' : 'Gist'}}</span>
          <span class="type-badge type-coauthor" ng-if="item.role === 'coauthor'" title="You are a co-author on this anonymization">Co-author</span>
          <div class="anon-text">
            <a ng-href="{{item._viewUrl}}" class="repo-name" ng-bind="item._name"></a>
            <div class="anon-sub">
              <a ng-if="item._type === 'repo'" href="https://github.com/{{item.source.fullName}}/" ng-bind="item.source.fullName"></a><span ng-if="item._type === 'repo' && item.options.update">&nbsp;&middot;&nbsp;<a href="https://github.com/{{item.source.fullName}}/tree/{{item.source.branch}}" ng-bind="item.source.branch"></a><span ng-if="item.source.commit">&nbsp;&middot;&nbsp;@<a href="https://github.com/{{item.source.fullName}}/tree/{{item.source.commit}}" ng-bind="item.source.commit.substring(0, 8)"></a></span></span><span ng-if="item._type === 'repo' && !item.options.update">&nbsp;&middot;&nbsp;@<a href="https://github.com/{{item.source.fullName}}/tree/{{item.source.commit}}" ng-bind="item.source.commit.substring(0, 8)"></a></span>
              <a ng-if="item._type === 'pr'" href="https://github.com/{{item.source.repositoryFullName}}/pull/{{item.source.pullRequestId}}" ng-bind="item._source"></a>
              <a ng-if="item._type === 'gist'" href="https://gist.github.com/{{item.source.gistId}}" ng-bind="item._source"></a>
            </div>
          </div>
        </div>
        <div class="cell-conf" role="cell">
          <span ng-if="item.conference" ng-bind="item.conference"></span>
          <span class="empty-dash" ng-if="!item.conference">&mdash;</span>
        </div>
        <div class="cell-status" role="cell">
          <div class="status-line">
            <span
              class="status-dot"
              ng-class="{'status-removed': item.status == 'removed' || item.status == 'expired' || item.status == 'removing' || item.status == 'expiring', 'status-preparing': item.status == 'preparing' || item.status == 'download', 'status-ready': item.status == 'ready', 'status-error': item.status == 'error'}"
            ></span>
            <span ng-bind="item.status | title"></span>
          </div>
          <div class="status-sub" ng-if="item.anonymizeDate" title="Last anonymized {{item.anonymizeDate | humanTime}}" ng-bind="item.anonymizeDate | humanTime"></div>
        </div>
        <div class="cell-views num" role="cell" ng-bind="item.pageView | number"></div>
        <div class="cell-expires" role="cell">
          <span ng-if="item.options.expirationMode !== 'never' && item.status == 'ready'" ng-bind="item.options.expirationDate | humanTime"></span>
          <span class="empty-dash" ng-if="!(item.options.expirationMode !== 'never' && item.status == 'ready')">&mdash;</span>
        </div>
        <div class="cell-actions" role="cell">
          <div class="dropdown">
            <button
              class="btn btn-icon-dots"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              aria-label="Actions"
            >
              <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" ng-href="{{item._editUrl}}">
                <i class="far fa-edit" aria-hidden="true"></i> Edit
              </a>
              <a class="dropdown-item" href="#" ng-show="item.status == 'ready' || item.status == 'error'" ng-click="refreshItem(item)">
                <i class="fas fa-sync"></i> Force update
              </a>
              <a class="dropdown-item" href="#" ng-show="item.status == 'removed'" ng-click="refreshItem(item)">
                <i class="fas fa-check-circle"></i> Enable
              </a>
              <a class="dropdown-item" href="#" ng-show="(item.status == 'ready' || item.status == 'expired' || item.status == 'error') && item.role !== 'coauthor'" ng-click="removeItem(item)">
                <i class="fas fa-trash-alt"></i> Remove
              </a>
              <a class="dropdown-item" ng-href="{{item._viewUrl}}">
                <i class="fa fa-eye" aria-hidden="true"></i> View
              </a>
              <a class="dropdown-item" href="/w/{{item.repoId}}/" target="_self" ng-if="item._type === 'repo' && item.options.page && item.status == 'ready'">
                <i class="fas fa-globe"></i> View Page
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="paper-table-empty" ng-if="filteredItems.length == 0">
        <i class="fas fa-inbox"></i>
        <span>Nothing to display.</span>
      </div>
    </div>
  </div>
</div>