home.html

{% extends "page.html" %}

{% block main %}

<div class="container" style="margin-top: 3%;">
  <div class="row">
    <div class="text-center">
      <p>You are currently logged in through <strong>{{ login_service }}</strong>.</p>
      {% if user.running %}
        <p>
          Currently checked out repository: <a href="{{ repourl }}">{{ repourl }}</a><br>
          You are on branch <strong>{{ branch_name }}</strong>, commit <strong>{{ commit_sha }}</strong>
        </p>
        {% if fork_exists %}
          <p>You have a repository with the same name, which we can push to!</p>
          {% if repository_changed %}
            <p>You have made changes. Do you want to <a id="fork" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored small-button" href="/hub/home?do_push=1">push</a>?</p>
          {% else %}
            <p>But you have to make changes to the checked out repository before you can push.</p>
          {% endif %}
        {% else %}
          <p>You don't have a repository with the same name. Do you want to <a id="push" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored small-button" href="/hub/home?do_fork=1">fork</a> it?</p>
        {% endif %}
          <p>Also you can <a id="commit-container" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored small-button" href="/hub/home?do_commit_container=1">save container</a> to easily restore your work later.</p>
      {% endif %}
     </div>
  </div>
  <div class="row">
    <div class="text-center">
      {% if user.running %}
        <a id="stop" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Stop My Server</a>
      {% endif %}
      {% if not user.stop_pending %}
        <a id="start" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"
         {% if user.running %}
         href="/user/{{user.name}}/"
         {% else %}
         href="{{base_url}}spawn"
         {% endif %}
        >
        {% if not user.running %}
          Launch a notebook
        {% else %}
          Return to notebook
        {% endif %}
        </a>
      {% endif %}
      {% if user.admin %}
        <a id="admin" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored small-button" href="{{base_url}}admin">Admin</a>
      {% endif %}
    </div>
  </div>
  {% if user.running or user.stop_pending %}
    <div class="row" id="wait" style="margin-top: 2%; font-size: larger;
      {% if not user.stop_pending %}
        display: none;
      {% endif %}
      ">
      <div class="text-center">
        <img src="{{ static_url("images/loading.gif") }}">
        Stopping server... Please, wait.
      </div>
    </div>
  {% endif %}
  <div id="notif" style="margin-top: 1%; color:
    {% if not 'Successfully' in notify_message %}
    red"
    {% else %}
    green"
    {% endif %}
  >
    {{notify_message}}
  </div>
  {% if notify_url_to_image %}
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width: 700px">
        <input class="mdl-textfield__input" type="text" id="notify-url" value="{{notify_url_to_image}}" readonly>
        <label class="mdl-textfield__label" for="notify-url">Your link to restore state</label>
    </div>
    <button class="mdl-button mdl-js-button mdl-button--icon notify-url--button" data-clipboard-target="#notify-url" title="Copy to clipboard">
      <i class="material-icons">content_copy</i>
    </button>
  {% endif %}
</div>

{% endblock %}

{% block script %}
<script type="text/javascript">
  require(["home", "clipboard"], function (home, Clipboard) {
    new Clipboard('.notify-url--button');
  });
</script>
{% endblock %}