Show sourcecode

The following files exists in this folder. Click to view.

public_html/crumbs/order/

api.php
neworder.php
vieworders.php

`vieworders.php`

129 lines UTF-8 Windows (CRLF)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129


<?php

$basePath = '../';

$pageTitle = 'Dina Beställningar';

$activePage = 'vieworders';

include('../includes/header.php');

?>



<div class="page-header">

  <div class="page-header-text">

    <h1>Dina Beställningar</h1>

    <p>Se status och historik för dina beställningar. <span id="update-indicator" class="muted">Uppdateras automatiskt...</span></p>

  </div>

</div>



<div id="orders-container">

  <p class="muted">Laddar beställningar...</p>

</div>



<script>

  const statusLabels = {

    'pending': 'Väntar',

    'preparing': 'Tillagas',

    'done': 'Klar att hämtas',

    'delivered': 'Levererad'

  };



  const statusClasses = {

    'pending': 'status-pending',

    'preparing': 'status-preparing',

    'done': 'status-done',

    'delivered': 'status-delivered'

  };



  function escapeHtml(text) {

    const div = document.createElement('div');

    div.textContent = text;

    return div.innerHTML;

  }



  function buildOrderCard(order) {

    const chips = order.items.map(item =>

      `<span class="order-item-chip"><span class="item-qty">${item.amount}x</span> ${escapeHtml(item.name)}</span>`

    ).join('');



    const instructions = order.custom_instructions ?

      `<span class="order-instructions"><span class="material-symbols-rounded" style="font-size:16px;vertical-align:middle">edit_note</span> ${escapeHtml(order.custom_instructions)}</span>` :

      '<span></span>';



    const padded = String(order.order_id).padStart(4, '0');



    return `

  <div class="card order-card ${statusClasses[order.status]}" data-order-id="${order.order_id}">

    <div class="order-header">

      <div>

        <h3>Beställning #${order.order_id}</h3>

        <span class="order-meta">${escapeHtml(order.order_time)}</span>

      </div>

      <span class="status-badge ${statusClasses[order.status]}">${statusLabels[order.status]}</span>

    </div>

    <div style="background:var(--bg);border:2px solid var(--border);border-radius:8px;padding:12px 16px;margin:12px 0;display:flex;align-items:center;gap:12px;">

      <span class="material-symbols-rounded" style="font-size:22px;color:var(--primary)">confirmation_number</span>

      <div>

        <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px">Orderkod – visa i kassan</div>

        <div style="font-size:22px;font-weight:700;letter-spacing:.18em;color:var(--text)">${padded}</div>

      </div>

    </div>

    <div class="order-items-compact">${chips}</div>

    <div class="order-footer">

      ${instructions}

      <span class="order-total">${escapeHtml(String(order.total_price))} kr</span>

    </div>

  </div>`;

  }



  function renderOrders(orders) {

    const container = document.getElementById('orders-container');

    const archiveOpen = container.querySelector('details')?.open ?? false;



    if (orders.length === 0) {

      container.innerHTML = '<div class="alert alert-warning"><span class="material-symbols-rounded" style="font-size:18px">info</span> Du har inga beställningar ännu. <a href="neworder.php" style="color:var(--primary);text-decoration:underline;">Lägg en ny beställning</a></div>';

      return;

    }



    const active = orders.filter(o => o.status !== 'delivered');

    const delivered = orders.filter(o => o.status === 'delivered');



    let html = '';



    if (active.length === 0) {

      html += '<div class="alert alert-warning" style="margin-bottom:16px"><span class="material-symbols-rounded" style="font-size:18px">info</span> Inga aktiva beställningar.</div>';

    } else {

      active.forEach(o => {

        html += buildOrderCard(o);

      });

    }



    if (delivered.length > 0) {

      html += `

    <details${archiveOpen ? ' open' : ''} style="margin-top:24px">

      <summary style="cursor:pointer;font-weight:600;color:var(--muted);padding:8px 0;list-style:none;display:flex;align-items:center;gap:8px;user-select:none;">

        <span class="material-symbols-rounded" style="font-size:18px">inventory_2</span>

        Arkiverade beställningar (${delivered.length})

      </summary>

      <div style="margin-top:12px">

        ${delivered.map(o => buildOrderCard(o)).join('')}

      </div>

    </details>`;

    }



    container.innerHTML = html;

  }



  function fetchOrders() {

    fetch('api.php')

      .then(res => res.json())

      .then(orders => {

        renderOrders(orders);

        document.getElementById('update-indicator').textContent = 'Senast uppdaterad: ' + new Date().toLocaleTimeString('sv-SE');

      })

      .catch(err => {

        console.error('Kunde inte hämta beställningar:', err);

      });

  }



  fetchOrders();

  setInterval(fetchOrders, 5000);

</script>



<?php include('../includes/footer.php'); ?>