strider/dist-lib/views/projects.html

Brilliant continuous deployment platform

{% extends "base.html" %}

{% block preTitle %}
  Projects -
{% endblock %}

{% pluginblock ExtraStyles %}
  <script>
    var providers = {{ providers | scriptjson | raw }};
    var accounts = {{ currentUser.accounts | scriptjson | raw }};
    var repos = {{ repos | scriptjson | raw }};
    var manualProjects = {{ manualProjects | scriptjson | raw }};
  </script>
{% endpluginblock %}


{% block bodyContent %}
  <h3>Projects</h3>

  <div class="projects-page" ng-app="projects" ng-controller="AlertsController">
    {% for messages in flash %}
      {% for message in messages %}
        <div class="alert alert-info">{{ message|raw }}</div>
      {% endfor %}
    {% endfor %}

    <div class="accounts-nav">
      <ul class="nav nav-tabs">
        {% for account in currentUser.accounts %}
          <li{% if loop.first %} class="active"{% endif %}>
            <a href="#account-{{ account.provider }}-{{ account.id }}" data-toggle="tab">
              {% if providers[account.provider].inline_icon %}<i class="fa fa-{{ providers[account.provider].inline_icon }}"></i>{% endif %}
              {{ account.title }}
            </a>
          </li>
        {% endfor %}

        <li class="pull-right">
          <a href="#manual-setup" data-toggle="tab"{% if !currentUser.accounts.length %} class="active"{% endif %}>Manual Add</a>
        </li>

        {% for provider in unconfigured %}
          <li>
            <a href="{{ provider.setupLink }}">
              {% if provider.inline_icon %}<i class="fa fa-{{ provider.inline_icon }}"></i>{% endif %} Setup {{ provider.title }}
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>
      <div class="notify-wrapper pull-right">
        <div id="notify" ng-class="{ visible: message.showing }" class="alert alert-[[ message.type ]]">
          <a type="button" class="close" ng-click="clearMessage()">&times;</a>
          <div class="message" ng-bind-html="message.text"></div>
        </div>
      </div>

    <div class="tab-content" ng-controller="ProjectsController">
      <div ng-repeat="account in accounts" id="account-[[ account.provider ]]-[[ account.id ]]" class="tab-pane" ng-class="{ active: $first }">

        {# TODO hide this if there is only one group #}
        <div class="span2">
          <ul class="nav nav-list nav-stacked groups-list">
            <li ng-repeat="(name, group) in repos[account.provider][account.id]"
                ng-class="{active: $first}">
              <a data-toggle="tab" href="#group-[[ account.provider ]]-[[ account.id ]]-[[ $index ]]">
                [[ name ]]
                <span class="label label-inverse pull-right" ng-show="group.configured">[[ group.configured ]]</span>
              </a>
            </li>
          </ul>

          <div class="refresh-account">
            <form action="/projects" method="post">
              <input type="hidden" name="refresh" value="[[ account.provider ]]" />
              <input type="hidden" name="aid" value="[[ account.id ]]" />
              <button class="refresh btn btn-warning" ng-click="submit()">
                Refresh Account <i class="fa fa-refresh"></i>
              </button>
            </form>
          </div>
        </div>

        <div class="tab-content span10">
          <ul ng-repeat="(name, group) in repos[account.provider][account.id]"
             id="group-[[ account.provider ]]-[[ account.id ]]-[[ $index ]]"
             class="tab-pane repo-list unstyled" ng-class="{ active: $first }">
            <li ng-repeat="repo in group.repos" class="repo" ng-class="{ configured: !!repo.project }">
              <div>
                <a href="[[ repo.display_url ]]" target="_blank" class="hosted-url">
                  <i class="fa fa-globe"></i>
                </a>

                <span ng-switch="!!repo.project">
                  <a class="view-jobs" ng-switch-when="true" href="/[[ repo.project.name ]]/">[[ repo.display_name ]]</a>
                  <span ng-switch-default>[[ repo.display_name ]]</span>
                </span>

                <span ng-if="repo.lastError">
                  <i class="fa fa-warning text-error"
                    title="[[repo.lastError]]"
                    data-placement="bottom"
                    data-toggle="tooltip"></i>
                </span>

                <div class="pull-right action" ng-switch="!!repo.project">
                  <span ng-switch-when="true">
                    <button ng-show="repo.really_remove" class="btn btn-danger" ng-click="removeProject(account, repo, group)" ng-disabled="repo.really_remove === 'removing'">
                      <i class="fa fa-refresh fa-spin" ng-show="repo.really_remove === 'removing'"></i>
                      Really remove
                    </button>

                    <a href="/[[ repo.project.name ]]/config" data-toggle="tooltip" title="Configure"><i class="fa fa-wrench"></i></a>

                    <span ng-switch="repo.really_remove">
                      <button ng-switch-default class="btn btn-warning" ng-click="toggleRemove(repo)" ng-disabled="repo.really_remove">Remove</button>
                      <button ng-switch-when="true" ng-disabled="!repo.really_remove" class="btn btn-default" ng-click="toggleRemoveCancel(repo)">Cancel</button>
                    </span>
                  </span>

                  <div ng-switch-default ng-switch="repo.adding">
                    <button ng-disabled="repo.adding" ng-switch-default class="btn add-repo btn-primary" ng-click="toggleAdd(repo)">Add</button>
                    <button ng-disabled="!repo.adding" ng-switch-when="pick-type" class="btn cancel-add-repo btn-default" ng-click="toggleAddCancel(repo)">Cancel</button>
                  </div>
                </div>

                <div class="adding-repo pull-right" ng-show="repo.adding" ng-switch="repo.adding">
                  <div class="pick-type" ng-switch-when="pick-type">
                    <span class="text">What type of project?</span>
                    {% for type in project_types %}
                      <div data-toggle="tooltip"
                           data-placement="bottom"
                           title="{{ type.description }}"
                           class="project-type btn"
                           ng-click="repo.adding = 'loading'; setupProject(account, repo, '{{ loop.key }}', group)">
                        {{ loop.key }}
                      </div>
                    {% endfor %}
                  </div>
                  <div ng-switch-when="loading" class="setting-up">
                    <span class="text">
                      Setting up
                      <i class="fa fa-refresh fa-spin"></i>
                    </span>
                  </div>
                  <div ng-switch-when="done">
                    <button type="button" class="close" ng-click="repo.adding=false">&times;</button>
                    <span class="text">Complete!</span>
                    <div class="btn btn-success" ng-click="startTest(repo)">
                      Start the first test
                    </div>
                    <a class="btn" href="/[[ repo.project.name ]]/config">
                      Configure
                    </a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="tab-pane" id="manual-setup">
        {% for item in manual %}
        <div id="manual-{{ loop.key }}" ng-controller="ManualController">
          <form name="create{{ loop.key }}">
            <h3>{{ item.provider.title }}</h3>
            <div class="general">
              <p>
              <small>Public projects are visible to unauthenticated users.</small>
              <div ng-model="public" class="btn public-btn" btn-checkbox>Public</div>
              </p>

              <p>
              <small>Provides a link in the UI if you put a url there, so you can easily jump to viewing the repo on github or wherever</small>
              <br/>
              <input type="text" ng-model="display_url" placeholder="Display Url">
              </p>

              <p>
              <small>A github-style namespace/name combination for the project. e.g. Strider-CD/strider</small>
              <br/>
              <input type="text" required ng-pattern="/[\w-]\/[\w-]/" ng-model="display_name" placeholder="Name">
              </p>
            </div>

            <div class="provider-specific">
              {{ item.provider.html | raw }}
            </div>
            <button ng-disabled="!create{{ loop.key }}.$valid" class="btn btn-primary" ng-click="create()">Create New</button>
          </form>
          <ul class="unstyled repo-list">
            <li class="repo" ng-repeat="project in projects">
              <div>
                <a ng-show="project.display_url" href="[[ project.display_url ]]" target="_blank" class="hosted-url">
                  <i class="fa fa-globe"></i>
                </a>
                <a class="view-jobs" href="/[[ project.name ]]/">[[ project.display_name ]]</a>
              <div class="pull-right">
                <button ng-show="project.really_remove" class="btn btn-danger" ng-click="remove(project)" ng-disabled="project.really_remove === 'removing'">
                  <i class="fa fa-refresh fa-spin" ng-show="project.really_remove === 'removing'"></i>
                  Really remove
                </button>
                <a href="/[[ project.name ]]/config" data-toggle="tooltip" title="Configure"><i class="fa fa-wrench"></i></a>
                <button class="btn btn-danger" ng-click="project.really_remove = true" ng-disabled="project.really_remove">Remove</button>
                <button ng-disabled="repo.adding" class="btn btn-primary" ng-click="repo.adding = 'pick-type'">Add</button>
              </div>
              </div>
            </li>
          </ul>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
{% endblock %}