inventory-app/inventory-app/templates/inventory_view.html

{% extends 'base.html' %}

{% block content %}
<div class="container">
<title>{% if item.get("shortener").slug %}/{{ item.get("shortener").slug }}{% else %}k6{% endif %}: {{ item.name }}</title>

<div class="horizontalRow">
  <div class="col s12"><a {% if not can_edit %} disabled="" {% endif %} href="/m/inventory/{{ item._id }}/edit" class="waves-effect waves-light btn">Edit</a></div>
  <div class="col s12"><a href="/m/inventory/{{ item._id }}/clone" class="waves-effect waves-light btn">Clone</a></div>
</div>

<table>
  <thead>
    <tr>
      <th>Key</th>
      <th>Value</th>
      <th>Key</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>

      <tr>
        <td>Location</td>
        <td>{% if item.location and (item.location | location_link) %}<a href="https://{{ item.location | location_link }}">🡼</a>{% else %}🮰{% endif %} {{ item.location }}</td>

        <td>Last audited</td>
        <td><div>
    <form onsubmit="return false;">
      <button
        data-item-id="{{ item._id }}"
        class="audit-button {{ item.inventory | audit_color }} waves-effect waves-light btn"
        {% if not can_audit %}disabled=""{% endif %}
      >
        {{item.inventory | audit_text}}
          </button>
        </form>{% if item.inventory.get("audit") %} by {{ item.inventory.audit.username }}{% endif %}
        </div>
      </tr>

      <tr>
        <td>Sticker</td>
        <td>
        {% if item.get("shortener").slug %}
          {{ item.get("shortener", {}).get("slug") | qr_code }}
          <a href="https://k6.ee/{{ item.get("shortener").slug }}">
            k6.ee/{{ item.get("shortener").slug }}
          </a>
        {% endif %}
        </td>
      </tr>

      <tr>
        <td>Type</td>
        <td>{{ item["type"] }}</td>

        <td class="tooltip" data-tooltip="Who can see the item">Visibility</td>
        <td>{{ item.inventory.visibility }}</td>
      </tr>

      <tr>
        <td>Vendor</td>
        <td>{{ item.get("hardware").vendor }}</td>

        <td>Serial number</td>
        <td>{{ item.get("hardware").serial }}</td>
      </tr>

      <tr>
        <td>Product</td>
        <td>{{ item.get("hardware").product }}</td>
      </tr>

      {% if item.mac %}
      <tr>
        <td>MAC address</td>
        <td>
          <span class="tooltipped" data-tooltip="Show IP usage in Grafana">
            <a href="{{ constants.MACADDRESS_OUTLINK_BASEURL }}{{ item.mac }}">
              {{ item.mac }}
            </a>
          </span>
        </td>
      </tr>
      {% endif %}

      <tr>
        <td>Name</td>
        <td>{{ item.name }}</td>
      </tr>

      <tr>
        <td>Comment</td>
        <td>{{ item.comment }}</td>
      </tr>

      <tr>
        <td>Owner</td>
        <td>{{ item | owner_link }}</td>

        <td>User</td>
        <td>{{ item | user_link }}</td>
      </tr>

<tr>
<td>Tags</td>
        <td>{% for tag in item.tags %}<div class="chip">{{ tag }}</div>{% endfor %}</td>
</tr>

  </tbody>
</table>

<div>
<h3>Photo</h3>
<form id="photo-form" action="/inventory/{{ item._id }}/upload-photo" method="post" enctype="multipart/form-data">
<div class="row placeholder-dark">
  <div class="file-field input-field col s6">
    <div class="btn">
      <span>Select</span>
      <input type="file" name="file" accept="image/jpeg" />
    </div>

    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload file" />
    </div>
  </div>
  <div class="file-field input-field col s6">
    <button class="btn waves-effect waves-light" type="submit" name="action">Upload
      <i class="material-icons right">add_a_photo</i>
    </button>
  </div>
</div>
</form>
{% if item.has_photo %}
<img src="{{ photo_url }}" alt="" style="max-width: 800px; width: 100%;">
{% endif %}
</div>

<div class="browser-default" id="contains">
<h3>Contains</h3>
<ul class="browser-default">
<li class="closed browser-default" data-name="{{ item.name }}" data-slug="{{ item.get("shortener", {}).get("slug") }}">
This item
</li>
</ul>
</div>

</div>

<script>
$(function() {
  var photoInput = $("#photo-form input[type=file]");
  photoInput.change(function () {
    var fileName = $.trim($(this).val());
    var button = $("#photo-form button[type=submit]");
    if (fileName === "") {
      button.prop("disabled", true);
    } else {
      button.prop("disabled", false);
    }
  });
  photoInput.change();

{% if can_audit %}
  var auditModal = $("div#audit-modal");
  var auditButton = $("button#audit-modal-send");
  var auditChecks = $("input.audit-check");
  auditModal.modal({
    onOpenStart() {
      auditChecks.prop('checked', false);
      auditButton.prop("disabled", true);
    }
  });
  auditChecks.on("change", function() {
    if (auditChecks.not(":checked").length == 0) {
      auditButton.prop("disabled", false);
    } else {
      auditButton.prop("disabled", true);
    }
  });
{% endif %}
  function slugLink(slug) {
    if (!slug) {
      return "";
    }
    var href = "k6.ee/" + slug;
    return $("<a/>").attr("href", "https://" + href).text(" " + href);
  }

  function expandLocation(e) {
    e.stopPropagation();
    var cur = $(this);
    var slug = cur.data("slug");
    var name = cur.data("name");
    if (cur.hasClass("empty")) {
      return;
    }
    if (!cur.hasClass("closed")) {
      cur.empty();
      cur.text(name);
      cur.append(slugLink(slug));
      cur.addClass("closed");
      return;
    }

    var expand = $("<ul/>").data("slug", slug);
    expand.attr("class", "browser-default");
    $.get("/m/inventory/contains", { slug }, function(data) {
      cur.removeClass("closed");
      if (!data.length) {
        cur.addClass("empty");
        return;
      }
      $.each(data, function(k, v) {
        var inner = $("<li/>").data("slug", v.shortener.slug);
        inner.text(v.name);
        inner.data("name", v.name);
        inner.on("click", expandLocation);
        inner.attr("class", "closed browser-default");
        inner.append(slugLink(v.shortener.slug));
        expand.append(inner);
      });
      cur.html(expand);
      cur.prepend(slugLink(slug));
      cur.prepend(name);
    });
  }
  var contains = $("div#contains li");
  contains.on("click", expandLocation);
});
</script>
<style>
div#contains {
  padding-bottom: 6em;
}

div#contains ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

div#contains li {
  padding-left: 16px;
}

div#contains li::before {
  content: "▼";
  padding-right: 8px;
}

div#contains li.closed::before {
  content: "►";
}

div#contains li.empty::before {
  content: "";
}
</style>
{% endblock %}