{% extends "baseprojectpage.html" %}
<!--
vim: expandtab tabstop=2
-->
{% load projecttags %}
{% load humanize %}
{% load static %}


{% block projectinfomain %}
<script src="{% static "js/angular.min.js" %}"></script>
<script src="{% static "js/angular-animate.min.js" %}"></script>
<script src="{% static "js/angular-cookies.min.js" %}"></script>
<script src="{% static "js/angular-route.min.js" %}"></script>
<script src="{% static "js/angular-sanitize.min.js" %}"></script>
<script src="{% static "js/ui-bootstrap-tpls-0.11.0.js" %}"></script>

{% if lvs_nos == 0 %}

  <div class="page-header">
    <h1> {{ project.name }} </h1>
  </div>
  <div class="alert alert-info lead">
	  <p>Toaster has no layer information. Without layer information, you cannot run builds. To generate layer information you can:</p>
		<ul>
			 <li> <a href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html#layer-source">Configure a layer source</a></li>
			 <li> <a href="{% url 'importlayer' project.id %}">Import a layer</a></li>
		</ul>
</div>

{%else%}

<div id="main" role="main" data-ng-app="project" data-ng-controller="prjCtrl" class="top-padded">

  <!-- project name -->
  <div class="page-header">
    <h1>{[project.name]}</h1>
  </div>

  <!-- alerts section 1-->
  <div data-ng-repeat="a in zone1alerts">
    <div class="alert alert-dismissible lead" role="alert" data-ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
      <span data-ng-bind-html="a.text"></span>
    </div>
  </div>

  <!-- custom templates for ng -->

  <script type="text/ng-template" id="suggestion_details">
    <a> {[match.model.name]} {[match.model.detail]} </a>
  </script>

  <!-- modal dialogs -->
  <script type="text/ng-template" id="dependencies_modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3><span data-ng-bind="layerAddName"></span> dependencies</h3>
    </div>
    <div class="modal-body">
        <p><strong>{[layerAddName]}</strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
        <ul class="unstyled">
            <li data-ng-repeat="ld in items">
                <label class="checkbox">
                    <input type="checkbox" data-ng-model="selectedItems[ld.id]"> {[ld.name]}
                </label>
            </li>
        </ul>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-ng-click="ok()">Add layers</button>
        <button class="btn" data-ng-click="cancel()">Cancel</button>
    </div>
    </form>
  </script>


  <script type="text/ng-template" id="change_version_modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3>Changing release to {[releaseDescription]}</h3>
      </div>
      <div class="modal-body">
        <p>The following project layers do not exist for the {[releaseDescription]} release:</p>
        <ul>
          <li data-ng-repeat="i in items"><span class="layer-info" data-toggle="tooltip" tooltip="{[i.detail]}">{[i.name]}</span></li>
        </ul>
        <p>If you change the release to {[releaseDescription]}, the above layers will be deleted from your project.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-ng-click="ok()">Change release and delete layers</button>
        <button class="btn" data-ng-click="cancel()">Cancel</button>
      </div>
  </script>

  <script type="text/ng-template" id="target_display">
      <div data-ng-switch on="t.task.length">
        <div data-ng-switch-when="0">{[t.target]}</div>
        <div data-ng-switch-default>{[t.target]}:{[t.task]}</div>
      </div>
  </script>


  <!-- build form -->
  <div class="well">
    <form class="build-form" data-ng-submit="buildNamedTarget()">
      <div class="input-append controls">
        <input type="text" class="huge input-xxlarge" placeholder="Type the recipe(s) you want to build" autocomplete="off" data-ng-model="targetName" data-typeahead="e.name for e in getAutocompleteSuggestions('targets', $viewValue)|filter:$viewValue" data-typeahead-template-url="suggestion_details" data-ng-disabled="!layers.length"/>
        <button type="submit" class="btn btn-large btn-primary" data-ng-disabled="!targetName.length">
        Build
        </button>
      </div>
      <i class="icon-question-sign get-help get-help-blue" title="Type the name of one or more recipes you want to build, separated by a space. You can also specify a task by appending a semicolon and a task name to a recipe name, like so: <code>core-image-minimal:do_build</code>"></i>
      <p>
        <a href="{% url 'all-targets' project.id %}">View all compatible recipes</a>
        <i class="icon-question-sign get-help get-help-blue heading-help" title="View all the recipes you can build with the release selected for this project, which is {[project.release.desc]}"></i>
        {% if completedbuilds.count %}
          | <a href="{% url 'projectbuilds' project.id %}">View all project builds ({{completedbuilds.count}})</a>
        {% endif %}
      </p>
    </form>
  </div>


  <!-- latest builds list -->

  <a id="buildslist"></a>
  <h2 class="air" data-ng-if="builds.length">Latest builds</h2>
  <div class="animate-repeat alert"  data-ng-repeat="b in builds track by b.id" data-ng-class="{'queued':'alert-info', 'deleted':'alert-info', 'in progress': 'alert-info', 'failed':'alert-error', 'completed':{'In Progress':'alert-info', 'Succeeded':'alert-success', 'Failed':'alert-error'}[b.build[0].status]}[b.status]">
    <div class="row-fluid">
        <switch data-ng-switch="b.status">

          <case data-ng-switch-when="failed">
            <div class="lead span3">
              <a data-ng-class="{'succeeded': 'success', 'failed': 'error'}[b.status]" href="{[b.br_page_url]}">
                <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>
              </a>
            </div>
            <div class="span2 lead">
              <ngif data-ng-if="b.updated - todaydate > 0">
                 {[b.updated|date:'HH:mm']}
              </ngif>
              <ngif data-ng-if="b.updated - todaydate < 0">
                 {[b.updated|date:'dd/MM/yy HH:mm']}
              </ngif>
            </div>
            <div class="span2">
              <ngif data-ng-if="b.errors.length">
                <span>
                  <i class="icon-minus-sign red lead"></i>
                  <a href="{[b.br_page_url]}#errors" class="lead error">{[b.errors.length]}
                  <ng-pluralize count="b.errors.length" when="{'1':'error','other':'errors'}"></ng-pluralize></a>
                </span>
              </ngif>
            </div>
            <div class="span2">
              <!-- we don't have warnings in this case -->
            </div>
            <div> <span class="lead">Build time: {[b.command_time|timediff]}</span>
                <button class="btn pull-right" data-ng-class="{'succeeded':  'btn-success', 'failed': 'btn-danger'}[b.status]"
                    data-ng-click="buildExistingTarget(b.targets)">Run again</button>

            </div>
          </case>

          <case data-ng-switch-when="queued">
            <div class="lead span5"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
            <div class="span4 lead" >Build queued
              <i title="This build will start as soon as a build server is available" class="icon-question-sign get-help get-help-blue heading-help" data-toggle="tooltip"></i>
            </div>
            <button class="btn pull-right btn-info" data-ng-click="buildCancel(b)">Cancel</button>
          </case>

          <case data-ng-switch-when="created">
            <div class="lead span5"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
            <div class="span4">
              <span class="lead">Creating build</span>
            </div>
            <button class="btn pull-right btn-info" data-ng-click="buildCancel(b)">Cancel</button>
          </case>

          <case data-ng-switch-when="deleted">
            <div class="lead span5"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
            <div class="span4" id="{[b.id]}-deleted" >
              <span class="lead">Build cancelled</span>
            </div>
            <button class="btn pull-right btn-info" data-ng-click="buildDelete(b)">Close</button>
          </case>


          <case data-ng-switch-when="in progress">
            <switch data-ng-switch="b.build.length">
              <case data-ng-switch-when="0">
                <div class="lead span5"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
                <div class="span4 lead">
                  Checking out layers
                </div>
              </case>
              <case data-ng-switch-default="">
                <div class="lead span3"> <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>   </div>
                <div class="span4 offset1" >
                  <div class="progress" style="margin-top:5px;" data-toggle="tooltip" tooltip="{[b.build[0].completeper]}% of tasks complete">
                      <div style="width: {[b.build[0].completeper]}%;" class="bar"></div>
                  </div>
                </div>
                <div class="text-right lead">{[b.build[0].completeper]}% tasks completed</div>
              </case>
          </case>


          <case data-ng-switch-when="completed">
            <div class="lead span3">
              <a data-ng-class="{'Succeeded': 'success', 'Failed': 'error'}[b.build[0].status]" href="{[b.build[0].build_page_url]}">
                <span data-ng-repeat="t in b.targets" data-ng-include src="'target_display'"></span>
              </a>
            </div>
            <div class="span2 lead">
              <ngif data-ng-if="b.build[0].completed_on - todaydate > 0">
                 {[b.build[0].completed_on|date:'HH:mm']}
              </ngif>
              <ngif data-ng-if="b.build[0].completed_on - todaydate < 0">
                 {[b.build[0].completed_on|date:'dd/MM/yy HH:mm']}
              </ngif>
            </div>
            <div class="span2">
              <ngif data-ng-if="b.build[0].errors">
                <span>
                  <i class="icon-minus-sign red lead"></i>
                  <a href="{[b.build[0].build_page_url]}#errors" class="lead error">{[b.build[0].errors]}
                  <ng-pluralize count="b.build[0].errors" when="{'1':'error','other':'errors'}"></ng-pluralize></a>
                </span>
              </ngif>
            </div>
            <div class="span2">
              <ngif data-ng-if="b.build[0].warnings">
                <span>
                  <i class="icon-warning-sign yellow lead"></i>
                  <a href="{[b.build[0].build_page_url]}#warnings" class="lead warning">{[b.build[0].warnings]}
                  <ng-pluralize count="b.build[0].warnings" when="{'1':'warning','other':'warnings'}"></ng-pluralize></a>
                </span>
              </ngif>
            </div>
            <div> <span class="lead">Build time: <a href="{[b.build[0].build_time_page_url]}">{[b.build[0].build_time|timediff]}</a></span>
                <button class="btn pull-right" data-ng-class="{'Succeeded':  'btn-success', 'Failed': 'btn-danger'}[b.build[0].status]"
                    data-ng-click="buildExistingTarget(b.targets)">Run again</button>

            </div>
          </case>


          <case data-ng-switch-default="">
          <div>FIXME!</div>
          </case>
        </switch>
      <div class="lead pull-right">
      </div>
    </div>
  </div>

  <h2 class="air">Project configuration</h2>

  <!-- alerts section 2 -->
  <div data-ng-repeat="a in zone2alerts">
    <div class="alert alert-dismissible lead" role="alert" data-ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
      <span data-ng-bind-html="a.text"></span>
    </div>
  </div>

  <div class="row-fluid">

    <!-- project layers -->
    <div id="layer-container" class="well well-transparent span4">
      <h3>
        Layers <span class="muted counter">({[layers.length]})</span>
        <i class="icon-question-sign get-help heading-help" title="Bitbake reads metadata files from modules called 'layers'. Layers allow you to isolate different types of customizations from each other. <a href='http://www.yoctoproject.org/docs/current/dev-manual/dev-manual.html#understanding-and-creating-layers' target='_blank'>More on layers</a>"></i>
      </h3>
      <div class="alert" data-ng-if="!layers.length">
        <b>You need to add some layers </b>
        <p>
        You can:
          <ul>
            <li> <a href="{% url 'all-layers' project.id %}">View all compatible layers available in Toaster</a>
            <li> <a href="{% url 'importlayer' project.id %}">Import a layer</a>
            <li> <a href="https://www.yoctoproject.org/docs/1.6.1/dev-manual/dev-manual.html#understanding-and-creating-layers" target="_blank">Read about layers in the manual</a>
          </ul>
        Or type a layer name below.
        </p>
      </div>
      <form data-ng-submit="layerAdd()">
        <div class="input-append">
          <input type="text" class="input-xlarge" id="layer" autocomplete="off" placeholder="Type a layer name" data-minLength="1" data-ng-model="layerAddName" data-typeahead="e.name for e in getAutocompleteSuggestions('layers', $viewValue)|filter:$viewValue" data-typeahead-template-url="suggestion_details" data-typeahead-on-select="onLayerSelect($item, $model, $label)" data-typeahead-editable="false" data-ng-class="{ 'has-error': layerAddName.$invalid }" />
          <input type="submit" id="add-layer" class="btn" value="Add" data-ng-disabled="!layerAddName.length"/>
        </div>
        {% csrf_token %}
      </form>
      <p>
        <a href="{% url 'all-layers' project.id %}">View all compatible layers</a>
        <i class="icon-question-sign get-help" title="View all the layers you can build with the release selected for this project, which is {[project.release.desc]}"></i>
        |
        <a href="{% url 'importlayer' project.id %}">Import layer</a></p>
      <ul class="unstyled configuration-list">
          <li data-ng-repeat="l in layers track by l.id" class="animate-repeat">
            <a href="{[l.layerdetailurl]}" class="layer-info" data-toggle="tooltip" tooltip-placement="right" tooltip="{[l.giturl]} | {[l.branch.name]}">{[l.name]}</a>
            <i class="icon-trash" data-ng-click="layerDel(l.id)" tooltip="Delete"></i>
                      </li>
      </ul>
    </div>


    <!-- project targets -->
    <div id="target-container" class="well well-transparent span4">
      <h3>
        Recipes
        <i class="icon-question-sign get-help heading-help" title="What you build, often an image recipe that produces a root file system file. Something like <code>core-image-minimal</code> or <code>core-image-sato</code>"></i>
      </h3>
        <form data-ng-submit="buildNamedTarget()">
          <div class="input-append">
            <input type="text" class="input-xlarge" placeholder="Type the recipe(s) you want to build" autocomplete="off" data-minLength="1"  data-ng-model="targetName1" data-typeahead="e.name for e in getAutocompleteSuggestions('targets', $viewValue)|filter:$viewValue" data-typeahead-template-url="suggestion_details" data-ng-disabled="!layers.length">
            <button type="submit" class="btn btn-primary" data-ng-disabled="!targetName1.length">
              Build </button>
          </div>
          {% csrf_token %}
        </form>
        <p>
          <a href="{% url 'all-targets' project.id %}">View all compatible recipes</a>
          <i class="icon-question-sign get-help" title="View all the recipes you can build with the release selected for this project, which is {[project.release.desc]}"></i>
        </p>
        <div data-ng-if="frequenttargets.length">
        <h4 class="air">
            Most built recipes
        </h4>
          <ul class="unstyled configuration-list {[mutedtargets]}">
          <li data-ng-repeat="t in frequenttargets">
            <label class="checkbox">
              <input type="checkbox" data-ng-model="mostBuiltTargets[t]" data-ng-disabled="disableBuildCheckbox(t)" data-ng-checked="mostBuiltTargets[t] && !disableBuildCheckbox(t)">{[t]}
            </label>
          </li>
        </ul>
        <button class="btn btn-large btn-primary" data-ng-disabled="enableBuildSelectedTargets()" data-ng-click="buildSelectedTargets()">Build selected recipes</button>
        </div>
    </div>

    <!-- project configuration -->
    <div id="machine-distro" class="well well-transparent span4">
      <h3>
        Machine
        <i class="icon-question-sign get-help heading-help" title="The machine is the hardware for which you want to build. You can only set one machine per project"></i>
      </h3>
      <p class="lead" id="select-machine-opposite">
        <span>{[machine.name]}</span>
        <i id="change-machine" class="icon-pencil" data-ng-click="toggle('#select-machine')"></i>
      </p>
      <div id="select-machine" style="display: none">
        <div class="alert alert-info">
          <strong>Machine changes have a big impact on build outcome.</strong>
              You cannot really compare the builds for the new machine with the previous ones.
        </div>
        <form data-ng-submit="editProjectSettings('#select-machine')" class="input-append">
              <input type="text" id="machine" autocomplete="off" data-ng-model="machineName" value="{[machine.name]}" data-typeahead="m.name for m in getAutocompleteSuggestions('machines', $viewValue)" data-typeahead-template-url="suggestion_details" />
              <input type="submit" id="apply-change-machine" class="btn" data-ng-disabled="machineName == machine.name || machineName.length == 0" value="Save"/>
              <input type="reset" id="cancel-machine" class="btn btn-link" data-ng-click="toggle('#select-machine')" value="Cancel"/>
              {% csrf_token %}
        </form>
        <p>
          <a href="{% url 'all-machines' project.id %}" class="link">View all compatible machines</a>
        <i class="icon-question-sign get-help" title="View all the machines you can set with the release selected for this project, which is {[project.release.desc]}"></i>
      </p>
      </div>
      <p class="link-action">
            <a href="{% url 'projectconf' project.id %}" class="link">Edit configuration variables</a>
            <i data-original-title="You can set other project configuration options here. Each option, like everything else in the build system, is a variable - value pair" class="icon-question-sign get-help heading-help" title=""></i>
            </p>
    </div>
  </div>


  <h2>Project details</h2>

  <!-- alerts section 3 -->
  <div data-ng-repeat="a in zone3alerts">
    <div class="alert alert-dismissible lead" role="alert" data-ng-class="a.type"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
      <span data-ng-bind-html="a.text"></span>
    </div>
  </div>


  <div id="project-details" class="well well-transparent">
    <h3>Project name</h3>
    <p class="lead" id="change-project-name-opposite">
      <span >{[project.name]}</span>
      <i class="icon-pencil" data-ng-click="toggle('#change-project-name')" ></i>
    </p>
    <div id="change-project-name" style="display:none;">
      <form data-ng-submit="editProjectSettings('#change-project-name')" class="input-append">
        <input type="text" class="input-xlarge" id="type-project-name" data-ng-model="projectName" value="{[project.name]}">
        <input type="submit" class="btn" value="Save" data-ng-disabled="project.name == projectName"/>
        <input type="reset" class="btn btn-link" value="Cancel" data-ng-click="toggle('#change-project-name')">
     </form>
    </div>

    <h3 data-ng-if="releases.length > 1">
      Release
      <i class="icon-question-sign get-help heading-help" title="The version of the build system you want to use"></i>
    </h3>
    <p data-ng-if="releases.length > 1" class="lead" id="change-project-version-opposite">
      <span id="project-version">{[project.release.desc]}</span>
      <i id="change-version" class="icon-pencil" data-ng-click="toggle('#change-project-version')" ></i>
    </p>
    <div class="div-inline" id="change-project-version" style="display:none;">
      <form data-ng-submit="testProjectSettingsChange('#change-project-version')" class="input-append">
        <select id="select-version" data-ng-model="projectVersion">
          <option data-ng-repeat="r in releases" value="{[r.id]}" data-ng-selected="r.id == project.release.id">{[r.description]}</option>
        </select>
        <input type="submit" class="btn" style="margin-left:5px;" value="Save" data-ng-disabled="project.release.id == projectVersion"/>
        <input type="reset"  class="btn btn-link" value="Cancel" data-ng-click="toggle('#change-project-version')"/>

      </form>
    </div>
  </div>

<!-- end main -->
</div>


<!-- load application logic !-->
<script src="{% static "js/projectapp.js" %}"></script>

<!-- dump initial data for use in the angular app -->
<script>
angular.element(document).ready(function() {
  scope = angular.element("#main").scope();
  scope.urls = {};
  scope.urls.xhr_build = "{% url 'xhr_projectbuild' project.id %}";
  scope.urls.xhr_edit = "{% url 'project' project.id %}?format=json";
  scope.urls.xhr_datatypeahead = "{% url 'xhr_datatypeahead' project.id %}";
  scope.urls.layers = "{% url 'all-layers' project.id %}";
  scope.urls.targets = "{% url 'all-targets' project.id %}";
  scope.urls.importlayer = "{% url 'importlayer' project.id %}";
  scope.urls.layer = "{% url 'base_layerdetails' project.id %}";
  scope.project = {{prj|json}};
  scope.builds = {{builds|json}};
  scope.layers = {{layers|json}};
  scope.targets = {{targets|json}};
  scope.frequenttargets = {{freqtargets|json}};
  scope.machine = {{machine|json}};
  scope.releases = {{releases|json}};
  scope.layerCount = scope.layers.length;
  scope.mutedtargets = (scope.layerCount == 0 ? "muted" : "")
  var now = (new Date()).getTime();
  scope.todaydate = now - (now % 86400000);

  scope.zone1alerts = [];
  scope.zone2alerts = [];
  scope.zone3alerts = [];

  scope.mostBuiltTargets = {};

  scope.updateDisplayWithCommands();
  scope.validateData();

  scope.init();
  scope.$digest();

  });
</script>

{% endif %} {# from lvs_nos check #}
{% endblock %}