HTMLify

Will_Call_Order_Locations.html
Views: 23 | Author: deweyduck6116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Will Call Order List</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }
  h2 {
    margin-bottom: 10px;
  }
  input[type="file"] {
    display: none;
  }
  button#loadBtn {
    padding: 5px 10px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 10px;
    border: none;
  }
  input[type="number"] {
    width: 150px;
    padding: 5px;
    -webkit-appearance: none;
    -moz-appearance: textfield;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    display: none;
  }
  button {
    padding: 5px 10px;
    margin-left: 10px;
  }
  #addedNumbers {
    margin-top: 10px;
    max-width: 400px;
  }
  #results {
    margin-top: 20px;
    white-space: pre-wrap;
  }
  #statusMessage {
    margin-top: 10px;
    font-weight: bold;
    color: green;
  }
  #instructions {
    margin-top: 10px;
    font-weight: normal;
    font-size: 14px;
  }
  #fileDate {
    margin-top: 5px;
    font-style: italic;
    font-size: 13px;
  }
</style>
</head>
<body>

<h2>Will Call Order List</h2>

<div id="instructions">
  Please click on the blue &amp; white button below to load the inventory data from <strong>export.xls</strong>.
</div>

<div style="margin-top:10px;"></div> <!-- blank space -->

<button id="loadBtn">Load Inventory Data file: export.xls</button>
<input type="file" id="fileInput" accept=".xls,.xlsx" />

<div id="statusMessage"></div>
<div id="fileDate"></div>

<br />

<div>
  <input type="number" id="singleNumber" placeholder="Enter number to add" />
</div>

<div id="addedNumbers">
  <strong>Numbers to search:</strong>
  <ul id="numberList"></ul>
</div>

<button id="searchAllBtn" disabled>Get Results for All</button>

<div id="results"></div>

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
<script>
  let dataMap = new Map();
  const numberSet = new Set();
  let dataLoaded = false;

  const fileInput = document.getElementById('fileInput');
  const loadBtn = document.getElementById('loadBtn');
  const searchAllBtn = document.getElementById('searchAllBtn');
  const singleNumberInput = document.getElementById('singleNumber');
  const statusDiv = document.getElementById('statusMessage');
  const fileDateDiv = document.getElementById('fileDate');

  loadBtn.addEventListener('click', () => {
    fileInput.click();
  });
  fileInput.addEventListener('change', handleFile, false);
  document.getElementById('searchAllBtn').addEventListener('click', getAllResults, false);
  singleNumberInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      if (dataLoaded && singleNumberInput.value.trim() !== '') {
        addNumber();
      }
    }
  });

  function handleFile(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();

    reader.onload = function(e) {
      const data = e.target.result;
      const workbook = XLSX.read(data, { type: 'binary' });
      const sheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[sheetName];
      const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
      dataMap.clear();
      numberSet.clear();
      document.getElementById('numberList').innerHTML = '';

      for(let i = 1; i < jsonData.length; i++) {
        const row = jsonData[i];
        const colA = row[0];
        const colB = row[1];

        if (colA !== undefined && colB !== undefined) {
          if (!dataMap.has(colB)) {
            dataMap.set(colB, []);
          }
          dataMap.get(colB).push(colA);
        }
      }

      dataLoaded = true;
      document.getElementById('searchAllBtn').disabled = false;
      statusDiv.textContent = 'Data loaded successfully!';

      if (file.lastModifiedDate) {
        const dateStr = file.lastModifiedDate.toLocaleString();
        document.getElementById('fileDate').textContent = `File last modified date: ${dateStr}`;
      } else {
        document.getElementById('fileDate').textContent = `File last modified date: N/A`;
      }
    };

    reader.onerror = function(ex) {
      console.error(ex);
      statusDiv.textContent = 'Error loading data.';
      statusDiv.style.color = 'red';
    };

    reader.readAsBinaryString(file);
  }

  function addNumber() {
    if (!dataLoaded) return;
    const input = document.getElementById('singleNumber');
    const num = input.value.trim();
    if (!num) {
      alert('Please enter a number.');
      return;
    }
    if (numberSet.has(num)) {
      alert('Number already added.');
      return;
    }
    numberSet.add(num);
    updateNumberList();
    input.value = '';
  }

  function updateNumberList() {
    const ul = document.getElementById('numberList');
    ul.innerHTML = '';
    numberSet.forEach(n => {
      const li = document.createElement('li');
      li.textContent = n;
      ul.appendChild(li);
    });
  }

  function getAllResults() {
    if (!dataLoaded) return;
    const resultDiv = document.getElementById('results');
    if (numberSet.size === 0) {
      resultDiv.textContent = 'No numbers added for search.';
      return;
    }
    let output = '';
    const allEntries = [];
    const results = {};
    numberSet.forEach(n => {
      if (dataMap.has(n)) {
        const values = dataMap.get(n);
        results[n] = [...new Set(values)];
        allEntries.push(...values);
      } else {
        results[n] = [];
      }
    });
    const duplicateCounts = {};
    allEntries.forEach(val => {
      duplicateCounts[val] = (duplicateCounts[val] || 0) + 1;
    });
    for (const n of Object.keys(results)) {
      if (results[n].length > 0) {
        const dupValues = results[n].filter(val => duplicateCounts[val] > 1);
        const nonDupValues = results[n].filter(val => duplicateCounts[val] <= 1);
        dupValues.sort();
        nonDupValues.sort();
        const sortedValues = [...dupValues, ...nonDupValues];
        output += formatLine(n, sortedValues, duplicateCounts);
        output += '\n\n';
      } else {
        output += formatLine(n, [], duplicateCounts);
        output += '\n\n';
      }
    }
    resultDiv.innerHTML = output.trim();

    function formatLine(number, values, dupCounts) {
      let line = `<span style="color:red; font-weight:bold;">${number}</span>: `;
      const formattedValues = values.map(val => {
        if (dupCounts[val] > 1) {
          return `<span style="color:purple; font-weight:bold;">${val}</span>`;
        } else {
          return val;
        }
      });
      line += formattedValues.join('; ');
      return line;
    }
  }
</script>
</body>
</html>
HTMLify

Share this file:
