wewqeqwewqe

by velo_ninja

HTML

<div class="app-container">
  <div class="app-header">
    <h1>🌡️ Temperature Manager</h1>
  </div>
  <div class="div_sectionControls"></div>

  <!-- Top wrapper: controls -->
  <div class="wrapperTop" id="wrapperTop"></div>

  <!-- Center wrapper: table -->
  <div class="wrapperCenter">
    <div id="tableContainer" class="control-section">
      <h3>Temperature Table</h3>
      <p style="color: #64748b;">Configure components above to generate the table</p>
    </div>
  </div>

  <!-- Bottom wrapper: JSON input and preview -->
  <div class="wrapperBottom">
    <div class="json-section">
      <h3>📥 Dataset JSON Input</h3>
      <textarea id="datasetInput" placeholder="Paste JSON dataset here..."></textarea>
      <div class="button-group">
        <button id="applyJSONBtn">Apply JSON</button>
        <button id="resetManualBtn">Reset Manual Mode</button>
      </div>
    </div>

    <div class="json-section">
      <h3>📄 Live JSON Preview</h3>
      <textarea id="jsonPreview" readonly></textarea>
    </div>
  </div>
</div>

CSS

/* ==================== CSS VARIABLES ==================== */
:root {
    --primary-blue: #0a2c76;
    --secondary-blue: #3b82f6;
    --accent-blue: #a4c2e5;
    --light-blue: #dbeafe;
    --primary-green: #10b981;
    --accent-green: #afffe6;
    --accent-red: #f84949;
    --accent-orange: #f68002;
    --accent-yellow: #f6ff00;
    --accent-teal: #0891b2;
    --accent-purple: #8b5cf6;
    --accent-pink: #ec4899;
    --accent-lime: #84cc16;
    --accent-cyan: #06b6d4;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;
    --accent-indigo: #6366f1;
    --accent-sky: #2c79fdd6;
    --highlight-marker-table-value: rgba(161, 212, 249, 0.5);
    --highlight-marker-table-comment: rgba(240, 255, 144, 0.5);
    --highlight-marker-table-crosshair: rgba(187, 249, 132, 0.5);
    --highlight-marker-table-crosshair-cell: rgba(102, 205, 12, 0.5);
    --bgc-body: #ffffff92;
    --bgc-modal: rgba(255, 255, 255, 0.98);
    --bgc-table: #ebe3db;
    --bgc-table-content: #7c8d9e;
    --bgc-table-header: #335581;
    --bgc-table-border: #c8ced5;
    --bgc-section: #7c9ac4;
    --bgc-section-sub: #f1f5f9;
    --bgc-input: #95c5d8;
    --bgc-input-focus: rgba(58, 97, 182, 0.05);
    --bgc-input-hover: rgba(37, 99, 235, 0.02);
    --bgc-input-disabled: rgba(126, 127, 128, 0.02);
    --background-section-light: rgba(241, 245, 249, 0.5);
    --border-light: #e2e8f0;
    --border-focus: #2563eb;
    --border-medium: #cbd5e1;
    --border-radius: 0.5rem;
    --border-color-section: #e2e8f0;
    --cbx-size: 16px;
    --font-color-base: #1e293b;
    --font-color-unit: #64748b;
    --font-color-label: #374151;
    --font-color-muted: #9ca3af;
    --font-color-content: #334155;
    --text-light: #dfe4e8;
    --text-dark: #1e293b;
    --font-size-icon: 1.35rem;
    --font-size-header: 0.90rem;
    --font-size-label: 0.85rem;
    --font-size-input: 0.80rem;
    --font-size-unit: 0.8rem;
    --gap-input-content: 1rem;
    --gap-xxs:...

JavaScript

/* ------------------- COMPONENTS ------------------- */
const COMPONENTS = [
  { key: 'heads', label: 'Heads' },
  { key: 'extruders', label: 'Extruders' },
  { key: 'hotRunners', label: 'Hot Runners' },
  { key: 'flanges', label: 'Flanges' }
];

/* ------------------- UTILITY ------------------- */
function escapeHTML(str) {
  return String(str).replace(/[&<>"']/g, match => ({"&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"}[match]));
}

/* ------------------- TEMP MANAGER ------------------- */
class TempManager {
  constructor() {
    this.containerTop = document.getElementById('wrapperTop');
    this.tableContainer = document.getElementById('tableContainer');
    this.datasetInput = document.getElementById('datasetInput');
    this.jsonPreview = document.getElementById('jsonPreview');
    this.applyJSONBtn = document.getElementById('applyJSONBtn');
    this.resetManualBtn = document.getElementById('resetManualBtn');

    this.manualMode = true;
    this.dataset = [];
    this.isTransposed = true; // default: Zones rows, Components columns

    this.initControls();
    this.initTableControls();
    this.initResetButton();

    this.applyJSONBtn.onclick = () => this.applyJSON();
    this.resetManualBtn.onclick = () => this.updateTable(true);

    if (!this.loadFromSession()) this.fullReset();
    else this.updateTable(false);
  }

  /* ------------------- SESSION STORAGE ------------------- */
  saveToSession() {
    try {
      sessionStorage.setItem('tempManagerDataset', JSON.stringify({
        dataset: this.dataset,
        isTransposed: this.isTransposed,
        zoneCount: this.zoneInput.value,
        componentCounts: COMPONENTS.reduce((acc, c) => { acc[c.key] = this.componentInputs[c.key].value; return acc; }, {})
      }));
    } catch (e) {
      console.warn('Could not save dataset:', e.message);
    }
  }

  loadFromSession() {
    try {
      const stored =...