{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12">
    <q-card>
      <q-card-section class="row items-center justify-between">
        <div>
          <span class="text-h6">Kitchen display</span>
          <span class="text-caption text-grey-6 q-ml-md" v-text="restaurant.name"></span>
        </div>
        <q-btn flat dense icon="refresh" @click="fetchActive"></q-btn>
      </q-card-section>
    </q-card>

    <div class="row q-col-gutter-md q-mt-md">
      <div
        v-for="order in active"
        :key="order.id"
        class="col-12 col-sm-6 col-md-4 col-lg-3"
      >
        <q-card
          :class="cardClass(order)"
          flat
          bordered
          style="height: 100%"
        >
          <q-card-section>
            <div class="row items-center justify-between">
              <div class="text-h6" v-text="'#' + order.id.slice(0,6)"></div>
              <q-badge :color="statusColor(order.status)" :label="order.status"></q-badge>
            </div>
            <div class="text-caption text-grey-6 q-mt-xs">
              <span v-text="LNbits.utils.formatTimestamp(order.time)"></span>
              <span class="q-ml-sm" v-if="order.note" title="Order note">
                <q-icon name="notes"></q-icon>
              </span>
            </div>
          </q-card-section>
          <q-separator></q-separator>
          <q-card-section
            :style="{'font-size': cookingMode(order) ? '1.25rem' : '1rem'}"
          >
            <div v-for="line in order._items || []" :key="line.id">
              <div>
                <strong v-text="line.quantity + 'x'"></strong>
                <span class="q-ml-sm" v-text="line.name"></span>
              </div>
              <div
                v-if="line.selected_modifiers && line.selected_modifiers.length"
                class="text-caption text-grey-7 q-pl-md"
                :style="cookingMode(order) ? 'font-size: 1.15rem; font-weight: 500; color: inherit' : ''"
              >
                <span
                  v-for="(m, i) in line.selected_modifiers"
                  :key="i"
                >
                  <span v-if="i > 0">, </span>
                  <span v-text="m.name"></span>
                </span>
              </div>
              <div
                v-if="line.note"
                class="text-caption text-amber-9 q-pl-md"
                :style="cookingMode(order) ? 'font-size: 1.15rem; font-weight: 500' : ''"
              >
                <q-icon name="info" size="xs"></q-icon>
                <span v-text="line.note"></span>
              </div>
            </div>
          </q-card-section>
          <q-card-actions align="around">
            <q-btn
              v-if="['paid','pending'].includes(order.status)"
              size="sm"
              color="primary"
              @click="transition(order, 'accepted')"
              label="Accept"
            ></q-btn>
            <q-btn
              v-if="order.status === 'accepted'"
              size="sm"
              color="amber-8"
              @click="transition(order, 'ready')"
              label="Ready"
            ></q-btn>
            <q-btn
              v-if="order.status === 'ready'"
              size="sm"
              color="teal"
              @click="transition(order, 'completed')"
              label="Done"
            ></q-btn>
          </q-card-actions>
        </q-card>
      </div>
      <div v-if="active.length === 0" class="col-12 text-center text-grey-6 q-pa-xl">
        Nothing in the queue.
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  window.RESTAURANT_BOOTSTRAP = {{ restaurant | tojson | safe }}
</script>
<script src="{{ static_url_for('restaurant/static', path='js/api.js') }}"></script>
<script src="{{ static_url_for('restaurant/static', path='js/kds.js') }}"></script>
{% endblock %}