Inventory

by Grant

HTML

<div id="main" style="transition:height 1s ease">
  <p id="ts" style="position:fixed;width:auto;background:rgba(255,255,255,.5)"></p>

  <input type="button" style="width:32%" id="createItem" value="Create Item">
  <input type="button" style="width:32%" id="createContainer" value="Create Container">
  <input type="button" style="width:32%" id="editItemTypes" value="Edit Item Types">

  <br>
  <br>

  <div id="div">
    <table id="containerTable" bgcolor="white" style="position:absolute;left:100%;">
      <tr>
        <th style="border-left:2px solid blue;background:blue;">ID</th>
        <th style="background:blue">Name</th>
        <th style="background:blue">Location</th>
        <th style="border-right:2px solid blue;background:blue;">Details</th>
      </tr>
    </table>
  </div>
  <table id="itemTable" bgcolor="white">
    <tr>
      <th style="border-left: 2px solid limegreen;">ID</th>
      <th>Name</th>
      <th>Count</th>
      <th style="border-right: 2px solid limegreen;">Details</th>
    </tr>
  </table>


  <div id="popUp" style="background: linear-gradient(rgba(50,0,150,1),rgba(50,0,100,0));position:fixed;width:80%;left:10%;top:25%;border-radius:10px" hidden>
    <input id="x" type="button" value="X" style="position:absolute;right:0;color:red;border:none;font-weight:bold;border-top-right-radius:10px">
    <input id="name" placeholder="No Name Found" style="background:transparent;border:none;font-size:32px;width:100%">
    <div style="width:90%;margin:0 auto">
      <p id="parentText">Parent:</p>
      <select id="type"></select>
      <br>
      <div id="locField" hidden>
        <p>
          Location:
          <select id="loc"></select>
        </p>
      </div>
      <table id="containerDetailTable" class="noBorderTable oppositeAlign">
        <tr>
          <th style="background:maroon;color:white">Container</th>
          <th style="background:maroon;color:white">Count</th>
        </tr>
      </table>
      <span id="location"></span>
     ...

CSS

body {
  background: cyan;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}

table:not(.noBorderTable) th {
  color: white;
  background: limegreen;
  //border-right: 2px solid green;
  border-bottom: 2px solid yellow;
}

table:not(.noBorderTable) > tr {
  border-left: 2px solid limegreen;
  border-right: 2px solid limegreen;
}

table.oppositeAlign th {
  text-align: left
}

table.oppositeAlign th:nth-of-type(2) {
  text-align: right
}

table.oppositeAlign td {
  text-align: left
}

table.oppositeAlign td:nth-of-type(2) {
  text-align: right
}

.justify {
  display: flex;
  justify-content: space-around;
}

input {
  font-size: inherit;
}

input:disabled {
  color: black;
}

td > input:not([value^=More]) {
  background: transparent;
  border-color: transparent;
  text-align: center;
  width: 100%;
}

p {
  width: 100%;
  display: inline;
  text-align: center
}

tr {
  background: white;
}

tr:nth-of-type(odd) {
  background: lightgrey
}

a {
  color: yellow
}

div > select {
  width: 100%
}

p > select {
  float: right
}

img {
  height: 100%;
}

JavaScript

TS = 100 //Current zoom level
var TSB = 100 //Zoom preview while zooming
var TSwitchPg //Page focus
var olD = 0 //Distance between fingers when zooming was started
var itemData = []
var itemNumber = 0
var containerNumber = 0
var itemTypeNumber = 0
var containerData = []
itemTypeData = []
var fileReader = new FileReader()
var imageData = []
var detailObj = {}
var currentImage;


//|===Mobile Zoom Helper===|
window.ontouchstart = function(e) {
  if (e.touches.length == 2) {
    e.preventDefault();
    TSB = TS;
    var arr = [e.touches.item(0), e.touches.item(1)];
    olD = Math.sqrt(Math.pow(arr[0].screenX - arr[1].screenX, 2) + Math.pow(arr[0].screenY - arr[1].screenY, 2));
  }
}

window.ontouchmove = function(e) {
  if (e.touches.length == 2) {
    e.preventDefault();

    var arr = [0, 0, e.touches.item(0), e.touches.item(1)];

    var neD = Math.sqrt(Math.pow(arr[2].screenX - arr[3].screenX, 2) + Math.pow(arr[2].screenY - arr[3].screenY, 2));

    TS = TSB + (neD - olD);

    document.getElementById("ts").innerHTML = Math.floor(TS) + "%";
    document.body.style.fontSize = TS + "%";

  }
}

window.ontouchend = function(e) {
  if (e.touches.length < 2) {
    document.getElementById("ts").innerHTML = "";
  }
}

//|=====Item Handler=====|

function item(d) {
  var val = {
    id: itemNumber,
    itemType: 0,
    containers: [],
    count: [],
    name: "Untitled Item",
    pics: [],
    icon: null
  };
  Object.assign(val, d);
  Object.assign(this, val)
  this.type = "item"
  this.updateTable = function() {
    addCol("itemTable", this.getTableData(), this.id)
  }

  this.getCount = function() {
    var c = 0;
    for (var i = 0; i < this.count.length; i++) {
      c += this.count[i];
    }
    return c;
  }

  this.valueOf = this.getCount;

  this.getTableData = function() {
    return {
      id: this.id,
      name: this.name+" "+itemTypeData[this.itemType].getNameUnit(),
      count: this.getCount(),
      unit: itemTypeData[this.itemType].getCountUnit()
   ...