Commit be2c75f1 authored by vertighel's avatar vertighel
Browse files

Fase 4 Jinja/HTML (parziale): <var> -> <data> rename, pulizia cruft 



- <var> -> <data> su tutte le 27 occorrenze in noctua/web/pages/
  (control_panel.html, widgets.html, viewer_panel.html), stesso
  commit dei 3 controlli tag-name in status-view.js (createElement,
  2x tagName) + 2 commenti aggiornati, come richiesto dal layer
  boundary rule in dev/conventions/html.md. viewer_panel.html incluso
  su richiesta esplicita (non era nell'audit originale "18 var
  data-status" del documento, ma selezionato per classe non per tag
  in explore-stats.js, quindi sicuro).
- Cancellati sequencer.html~, webcam.html~, synoptic.html~,
  subsystem.html~, status-stream.js~ (gitignored). Macro morta
  widget_telemetry_card (zero chiamanti) rimossa da widgets.html.
  <select> commentato in control_panel.html:326-332 rimosso.
  Placeholder "asd" in control_panel.html:467 -> "—".
- Sass migration (item 3 della fase) deliberatamente rimandata, non
  iniziata -- decisione utente, blast-radius warning gia' nel
  documento delle convenzioni.
- Verificato con parsing Jinja su tutte le pagine/macro toccate e
  dipendenti, controllo sintassi Node su status-view.js.
- PLAN.md aggiornato.

Co-Authored-By: default avatarClaude Sonnet 5 <noreply@anthropic.com>
parent e911f051

dev/refactor/PLAN.md

+48 −8
Original line number Diff line number Diff line
@@ -386,19 +386,55 @@ of changes — no import errors, all expected routes (including 


### 4. Jinja/HTML



- [ ] `<var>` → `<data>` rename, coordinated with the 3 tag-name

**Scope decision (this pass):** Sass migration (item 3 below) explicitly

deferred to its own pass, per the blast-radius warning already in

`dev/conventions/html.md` — not started.



- [x] `<var>` → `<data>` rename, coordinated with the 3 tag-name

      checks in `status-view.js` in the **same commit** (see

      `dev/conventions/html.md`).

- [ ] Delete repo cruft: stray editor backup files, the dead

      `widget_telemetry_card` macro, the commented-out `<select>` at

      `control_panel.html:328`, the `asd` placeholder at

      `control_panel.html:467`.

      `dev/conventions/html.md`). Renamed all 27 occurrences

      (`control_panel.html`'s 17, `widgets.html`'s 4, all

      `data-status`-driven or the one dynamically-populated bare

      `<var>`, plus `viewer_panel.html`'s 6 `stat-*` ones — not part

      of `dev/conventions/html.md`'s originally-audited "18 live var

      data-status" count, confirmed separately via `explore-stats.js`

      that they're selected by class not tag name, then included on

      the user's go-ahead) plus the JS tag checks (`status-view.js:34`

      `createElement`, `:159`/`:209` `tagName` comparisons, plus 2

      comments mentioning `<var>`). No more `<var>` elements left

      anywhere in `noctua/web/pages/`. Checked `style.css`'s `var {

      font-style: normal; }` rule: now unused (nothing left to match

      it) but harmless to leave — `<data>` has no italic default

      needing an override either way, so didn't touch it.

- [x] Delete repo cruft: `sequencer.html~`, `webcam.html~`,

      `synoptic.html~`, `subsystem.html~`, `status-stream.js~`

      deleted (all gitignored, not tracked by git — plain `rm`).

      `macros/#widgets.html#` no longer exists, already gone before

      this pass. The dead `widget_telemetry_card` macro

      (`widgets.html`, was lines 233-304, zero callers confirmed)

      deleted. The commented-out `<select>` at

      `control_panel.html:326-332` deleted. The `asd` placeholder at

      `control_panel.html:467` fixed to `—`, matching the majority of

      sibling telemetry values in the same file (some use `N/A`

      instead — picked `—` since it's used by more occurrences).

      Note: many *other* `.py~`/`.js~`/`.svg~` backup files exist

      under `noctua/web/` beyond the 5 the conventions doc named

      (`control.html~`, `base.html~`, `status.html~`, `init.html~`,

      several `.js~`, `synoptic.svg~`, `stream.py~`, `__init__.py~`)

      — left alone, not in the audited/named list, a candidate for a

      future cleanup pass if the user wants it.

      Verified with a Jinja parse check on every touched/dependent

      template (`control.html`, `init.html`, `sequencer.html`,

      `webcam.html`, `synoptic.html`, `subsystem.html`, `status.html`,

      `viewer.html`, plus the two edited macro files) and a Node

      syntax check on `status-view.js` — all clean.

- [ ] Sass migration for the universal tag+class combos (checkbox,

      select, number/text input, fieldset, small) — see

      `dev/conventions/html.md` for exact scope/outliers per element.

      Do NOT attempt a `<button>` tag selector (confirmed not

      universal). Treat as its own careful sub-phase given the

      blast-radius risk of a tag-selector mistake.

      blast-radius risk of a tag-selector mistake. **Deferred, not

      started this pass — user's call.**



### 5. JavaScript
@@ -456,4 +492,8 @@ checklist, not lost). 


Phase 3 (API) done, full scope this time (no reduced scope).



**Phase 4 (Jinja/HTML) not started.**
 
Phase 4 (Jinja/HTML) partly done: `<var>`→`<data>` rename and repo

cruft cleanup closed. Sass migration (its own sub-phase per the

blast-radius warning) deferred, not started.



**Phase 5 (JavaScript) not started.**

noctua/web/pages/macros/control_panel.html

+17 −25
Original line number Diff line number Diff line
@@ -26,15 +26,15 @@ 
    </fieldset>



    <aside class="row">

      <small class="col-4 mt-1 text-success">ra: <var data-status="telescope-coordinates-radec-0" data-display="plain">N/A</var></small>

      <small class="col-4 mt-1 text-success">dec: <var data-status="telescope-coordinates-radec-1" data-display="plain">N/A</var></small>

      <small class="col-4 mt-1 text-success">ha: <var data-status="telescope-coordinates-ha" data-display="plain">N/A</var></small>

      <small class="col-4 mt-1 text-success">ra: <data data-status="telescope-coordinates-radec-0" data-display="plain">N/A</data></small>

      <small class="col-4 mt-1 text-success">dec: <data data-status="telescope-coordinates-radec-1" data-display="plain">N/A</data></small>

      <small class="col-4 mt-1 text-success">ha: <data data-status="telescope-coordinates-ha" data-display="plain">N/A</data></small>

    </aside>



    <aside class="row">

      <small class="col-4 mt-1 text-success">alt: <var data-status="telescope-coordinates-altaz-0" data-display="plain" data-transform="round_3">N/A</var></small>

      <small class="col-4 mt-1 text-success">az: <var data-status="telescope-coordinates-altaz-1" data-display="plain" data-transform="round_3">N/A</var></small>

      <small class="col-4 mt-1 text-success">lst: <var data-status="telescope-coordinates-lst" data-display="plain">N/A</var></small>

      <small class="col-4 mt-1 text-success">alt: <data data-status="telescope-coordinates-altaz-0" data-display="plain" data-transform="round_3">N/A</data></small>

      <small class="col-4 mt-1 text-success">az: <data data-status="telescope-coordinates-altaz-1" data-display="plain" data-transform="round_3">N/A</data></small>

      <small class="col-4 mt-1 text-success">lst: <data data-status="telescope-coordinates-lst" data-display="plain">N/A</data></small>

    </aside>



  </div>
@@ -147,7 +147,7 @@ 
  </div>



  <div class="col-md-2">

    <small class="text-success">state: <var data-status="{{ cam_id }}-snapshot-state" data-display="pill" data-map="camera_state">—</var></small>

    <small class="text-success">state: <data data-status="{{ cam_id }}-snapshot-state" data-display="pill" data-map="camera_state">—</data></small>

  </div>

  

  <label class="col-md-2 col-form-label">Gain</label>
@@ -242,9 +242,9 @@ 


<!-- Telemetry -->

<aside class="row mt-1">

  <small class="col-4 text-success">guider: <var data-status="guider-active" data-display="pill" data-map="bool_yesno">—</var></small>

  <small class="col-4 text-success">Δx: <var data-status="guider-last-correction-0" data-display="plain" data-transform="round_1">—</var> px</small>

  <small class="col-4 text-success">Δy: <var data-status="guider-last-correction-1" data-display="plain" data-transform="round_1">—</var> px</small>

  <small class="col-4 text-success">guider: <data data-status="guider-active" data-display="pill" data-map="bool_yesno">—</data></small>

  <small class="col-4 text-success">Δx: <data data-status="guider-last-correction-0" data-display="plain" data-transform="round_1">—</data> px</small>

  <small class="col-4 text-success">Δy: <data data-status="guider-last-correction-1" data-display="plain" data-transform="round_1">—</data> px</small>

</aside>



{% endmacro %}
@@ -322,14 +322,6 @@ 
        <option value="Dark">Dark</option>

      </select>

    </div>



    <!-- <label class="col-md-2 col-form-label">Filter</label> -->

    <!-- <div class="col-md"> -->

    <!--   <select class="form-select form-select-sm bg-black" name="filter" -->

    <!--           data-load-from-storage="scicam3-filter"> -->

    <!--     <option value="FREE">Free</option> -->

    <!--   </select> -->

    <!-- </div> -->

  </fieldset>

</form>

{% endmacro %}
@@ -377,9 +369,9 @@ 
</fieldset>



<aside class="row mt-1">

  <small class="col-4 text-success">size: <var data-status="{{ camera_prefix }}-settings-size" data-display="plain">—</var></small>

  <small class="col-4 text-success">start: <var data-status="{{ camera_prefix }}-settings-xystart" data-display="plain">—</var></small>

  <small class="col-4 text-success">end: <var data-status="{{ camera_prefix }}-settings-xyend" data-display="plain">—</var></small>

  <small class="col-4 text-success">size: <data data-status="{{ camera_prefix }}-settings-size" data-display="plain">—</data></small>

  <small class="col-4 text-success">start: <data data-status="{{ camera_prefix }}-settings-xystart" data-display="plain">—</data></small>

  <small class="col-4 text-success">end: <data data-status="{{ camera_prefix }}-settings-xyend" data-display="plain">—</data></small>

</aside>



{% endmacro %}
@@ -443,10 +435,10 @@ 
</fieldset>



<aside class="row mt-1">

  <small class="col-4 text-success">T: <var data-status="{{ camera_prefix }}-settings-temperature" data-display="plain" data-transform="round_1">—</var>°C</small>

  <small class="col-4 text-success">state: <var data-status="{{ camera_prefix }}-snapshot-state" data-display="pill" data-map="camera_state">—</var></small>

  <small class="col-4 text-success">T: <data data-status="{{ camera_prefix }}-settings-temperature" data-display="plain" data-transform="round_1">—</data>°C</small>

  <small class="col-4 text-success">state: <data data-status="{{ camera_prefix }}-snapshot-state" data-display="pill" data-map="camera_state">—</data></small>

  {% if has_filter %}

  <small class="col-4 text-success">filter: <var data-status="{{ camera_prefix }}-filter" data-display="plain">—</var></small>

  <small class="col-4 text-success">filter: <data data-status="{{ camera_prefix }}-filter" data-display="plain">—</data></small>

  {% endif %}

</aside>
@@ -464,7 +456,7 @@ 
          <div class="input-group input-group-sm">



            <span class="col-md-2 input-group-text status-container">

              <var data-status="stage-position">asd</var>

              <data data-status="stage-position">—</data>

            </span>



            <input class="col-md form-control bg-black"

noctua/web/pages/macros/viewer_panel.html

+6 −6
Original line number Diff line number Diff line
@@ -73,14 +73,14 @@ 
    </figure>

    <aside class="explore-stats col-12 mt-1 font-monospace" style="font-size:.65rem;">

        <div class="d-flex gap-3">

            <span class="text-muted">xc: <var class="stat-xc text-light">—</var></span>

            <span class="text-muted">xfwhm: <var class="stat-xfwhm text-light">—</var></span>

            <span class="text-muted">amp: <var class="stat-amp text-light">—</var></span>

            <span class="text-muted">xc: <data class="stat-xc text-light">—</data></span>

            <span class="text-muted">xfwhm: <data class="stat-xfwhm text-light">—</data></span>

            <span class="text-muted">amp: <data class="stat-amp text-light">—</data></span>

        </div>

        <div class="d-flex gap-3">

            <span class="text-muted">yc: <var class="stat-yc text-light">—</var></span>

            <span class="text-muted">yfwhm: <var class="stat-yfwhm text-light">—</var></span>

            <span class="text-muted">bkg: <var class="stat-bkg text-light">—</var></span>

            <span class="text-muted">yc: <data class="stat-yc text-light">—</data></span>

            <span class="text-muted">yfwhm: <data class="stat-yfwhm text-light">—</data></span>

            <span class="text-muted">bkg: <data class="stat-bkg text-light">—</data></span>

        </div>

    </aside>

</div>

noctua/web/pages/macros/widgets.html

+8 −81
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ 
<fieldset class="widget-universal" id="onoff-{{ safe_id }}">

    <div class="input-group input-group-sm">

      <span class="col-md input-group-text status-container">

        <var class="badge bg-secondary w-100 font-monospace" data-status="{{ status }}" data-display="pill">Unk</var>

        <data class="badge bg-secondary w-100 font-monospace" data-status="{{ status }}" data-display="pill">Unk</data>

      </span>

      <button class="col-md btn btn-outline-primary btn-universal btn-onoff"

              data-method="PUT"
@@ -31,11 +31,11 @@ 
    <div class="input-group input-group-sm">

      {% if config.info %}

      <span class="col-md-2 input-group-text status-container">

        <var class="badge bg-secondary w-100 font-monospace"

        <data class="badge bg-secondary w-100 font-monospace"

             data-status="{{ config.info.strip('/') | replace('/', '-') }}"

             data-display="{{ config.display | default('pill') }}"

             {% if config.map %} data-map="{{ config.map }}"{% endif %}

             {% if config.transform %} data-transform="{{ config.transform }}"{% endif %}>Unk</var>

             {% if config.transform %} data-transform="{{ config.transform }}"{% endif %}>Unk</data>

      </span>

      {% endif %}
@@ -90,11 +90,11 @@ 


      {% if config.info %}

      <span class="col-md-2 input-group-text status-container">

        <var class="badge bg-secondary w-100 font-monospace"

        <data class="badge bg-secondary w-100 font-monospace"

             data-status="{{ config.info.strip('/') | replace('/', '-') }}"

             data-display="{{ config.display | default('pill') }}"

             {% if config.map %} data-map="{{ config.map }}"{% endif %}

             {% if config.transform %} data-transform="{{ config.transform }}"{% endif %}>Unk</var>

             {% if config.transform %} data-transform="{{ config.transform }}"{% endif %}>Unk</data>

      </span>

      {% endif %}
@@ -156,11 +156,11 @@ 
{% for item in items %}

<small class="col d-flex gap-2 align-items-center mt-1 text-success">

  {% if item.label %}{{ item.label }}:

  <var class="font-monospace text-light"

  <data class="font-monospace text-light"

       data-status="{{ item.status }}"

       data-display="{{ item.display | default('plain') }}"

       {% if item.map %} data-map="{{ item.map }}"{% endif %}

       {% if item.transform %} data-transform="{{ item.transform }}"{% endif %}>N/A</var>{% endif %}

       {% if item.transform %} data-transform="{{ item.transform }}"{% endif %}>N/A</data>{% endif %}

</small>

{% endfor %}

{% endmacro %}
@@ -227,78 +227,5 @@ 


<!-- WIDGET: Device var -->

{% macro monitor_val_template() %}

<var class="val-node text-light font-monospace text-end"></var>

{% endmacro %}



<!-- WIDGET: Telemetry -->

{% macro widget_telemetry_card(label, fields) %}

{% set safe_id = label | replace(' ', '-') | lower %}

<div class="col-md-6" id="container-{{ safe_id }}">

    <div class="card h-100 border-secondary shadow-sm">

        <div class="card-header bg-dark d-flex justify-content-between align-items-center">

            <span class="text-capitalize fw-bold">{{ label }}</span>

            <small class="text-muted timer">just now</small>

        </div>

        <div class="card-body p-0">

            <!-- Raw JSON pre-renderer -->

            <pre class="p-3 m-0 text-light bg-black d-none" id="data-{{ safe_id }}" style="font-size: 0.75rem; white-space: pre-wrap;"></pre>

            

            <div id="pretty-{{ safe_id }}" class="pretty-container">

                <table class="table table-dark mb-0 table-sm align-middle" style="font-size: 0.9rem;">

                    <thead>

                        <tr class="text-muted small border-bottom border-secondary">

                            <th class="ps-3" style="width: 35%;">parameter</th>

                            <th style="width: 50%;">status</th>

                            <th style="width: 15%;" class="text-center">err</th>

                        </tr>

                    </thead>

                    <tbody>

                        {% for field in fields %}

                        <tr class="border-bottom border-secondary border-opacity-25">

                            <td class="ps-3 fw-semibold py-2">{{ field.label }}</td>

                            <td class="py-2">

                                {% if field.subfields %}

                                    <!-- Nested Object: render subtable key-value -->

                                    <table class="table table-sm table-borderless m-0 p-0" style="background: transparent;">

                                        <tbody>

                                            {% for sub in field.subfields %}

                                            <tr>

                                                <td class="text-muted p-0 pe-2 small" style="width: 35%;">{{ sub.label }}</td>

                                                <td class="p-0">

                                                    {% if sub.is_array2 %}

                                                        <div class="d-flex gap-3 font-monospace">

                                                            <span data-status="{{ safe_id }}-{{ field.endpoint }}-{{ sub.key }}-0">N/A</span>

                                                            <span data-status="{{ safe_id }}-{{ field.endpoint }}-{{ sub.key }}-1">N/A</span>

                                                        </div>

                                                    {% else %}

                                                        <span data-status="{{ safe_id }}-{{ field.endpoint }}-{{ sub.key }}">N/A</span>

                                                    {% endif %}

                                                </td>

                                            </tr>

                                            {% endfor %}

                                        </tbody>

                                    </table>

                                {% else %}

                                    <!-- Flat Field -->

                                    {% if field.is_array2 %}

                                        <div class="d-flex gap-3 font-monospace">

                                            <span data-status="{{ safe_id }}-{{ field.endpoint }}-0">N/A</span>

                                            <span data-status="{{ safe_id }}-{{ field.endpoint }}-1">N/A</span>

                                        </div>

                                    {% else %}

                                        <span class="badge bg-secondary" data-status="{{ safe_id }}-{{ field.endpoint }}">N/A</span>

                                    {% endif %}

                                {% endif %}

                            </td>

                            <td class="text-center py-2">

                                <span class="badge bg-success" data-status="{{ safe_id }}-{{ field.endpoint }}-error">OK</span>

                            </td>

                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

<data class="val-node text-light font-monospace text-end"></data>

{% endmacro %}

noctua/web/static/js/status-view.js

+5 −5
Original line number Diff line number Diff line
@@ -31,7 +31,7 @@ document.addEventListener('DOMContentLoaded', () => { 
    }



    function makeVar(statusKey, displayMode = 'auto') {

        const varTag = document.createElement('var');

        const varTag = document.createElement('data');

        varTag.setAttribute('data-status', statusKey);

        varTag.setAttribute('data-display', displayMode);

        applyVarStatusStyles(varTag, 'N/A');
@@ -155,8 +155,8 @@ document.addEventListener('DOMContentLoaded', () => { 
                }

            }



            // Transition from flat <var> to subtable when value becomes an object

            const isFlatVar = el.tagName.toLowerCase() === 'var' && !resolved.subProperty;

            // Transition from flat <data> to subtable when value becomes an object

            const isFlatVar = el.tagName.toLowerCase() === 'data' && !resolved.subProperty;

            const isObject  = typeof finalValue === 'object' && finalValue !== null && !Array.isArray(finalValue);



            if (isFlatVar && isObject) {
@@ -181,7 +181,7 @@ document.addEventListener('DOMContentLoaded', () => { 


            if (finalValue === undefined || finalValue === null) finalValue = 'N/A';



            // Array-of-2: replace <var> with two sibling <var> elements

            // Array-of-2: replace <data> with two sibling <data> elements

            const isArray2 = Array.isArray(finalValue) && finalValue.length === 2 && resolved.parsed.index === null;

            if (isArray2) {

                const v0 = makeVar(`${statusKey}-0`);
@@ -206,7 +206,7 @@ document.addEventListener('DOMContentLoaded', () => { 


            el.textContent = displayValue;



            if (el.tagName.toLowerCase() === 'var') {

            if (el.tagName.toLowerCase() === 'data') {

                applyVarStatusStyles(el, finalValue);

            }