mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-24 14:50:50 +01:00
65 lines
4.2 KiB
Text
65 lines
4.2 KiB
Text
@using Microsoft.AspNetCore.Mvc.TagHelpers
|
|
@model BTCPayServer.Plugins.PointOfSale.Models.ViewPointOfSaleViewModel
|
|
|
|
<form id="app" method="post" asp-action="ViewPointOfSale" asp-route-appId="@Model.AppId" asp-antiforgery="false" data-buy v-on:submit="handleFormSubmit" class="d-flex flex-column gap-4 my-auto" v-cloak>
|
|
<input id="posdata" type="hidden" name="posdata" v-model="posdata">
|
|
<div ref="display" class="d-flex flex-column align-items-center px-4 mb-auto">
|
|
<div class="fw-semibold text-muted">{{srvModel.currencyCode}}</div>
|
|
<div class="fw-bold lh-sm" ref="amount" v-bind:style="{ fontSize: `${fontSize}px` }">{{ formatCurrency(total, false) }}</div>
|
|
<div class="text-muted text-center mt-2" id="Calculation" v-if="srvModel.showDiscount || srvModel.enableTips">{{ calculation }}</div>
|
|
</div>
|
|
<div id="ModeTabs" class="tab-content mb-n2" v-if="srvModel.showDiscount || srvModel.enableTips">
|
|
<div id="Mode-Discount" class="tab-pane fade px-2" :class="{ show: mode === 'discount', active: mode === 'discount' }" role="tabpanel" aria-labelledby="ModeTablist-Discount" v-if="srvModel.showDiscount">
|
|
<div class="h4 fw-semibold text-muted text-center">
|
|
<span class="h3 text-body me-1">{{discountPercent || 0}}%</span> discount
|
|
</div>
|
|
</div>
|
|
<div id="Mode-Tip" class="tab-pane fade px-2" :class="{ show: mode === 'tip', active: mode === 'tip' }" role="tabpanel" aria-labelledby="ModeTablist-Tip" v-if="srvModel.enableTips">
|
|
<div class="btcpay-pills d-flex flex-wrap align-items-center justify-content-center gap-2">
|
|
<template v-if="srvModel.customTipPercentages">
|
|
<button
|
|
type="button"
|
|
class="btcpay-pill"
|
|
:class="{ active: !tipPercent }"
|
|
v-on:click.prevent="tipPercent = null">
|
|
<template v-if="tip && tip > 0">{{formatCurrency(tip, true)}}</template>
|
|
<template v-else>Custom</template>
|
|
</button>
|
|
<button
|
|
v-for="percentage in srvModel.customTipPercentages"
|
|
type="button"
|
|
class="btcpay-pill"
|
|
:class="{ active: tipPercent == percentage }"
|
|
v-on:click.prevent="tipPercentage(percentage)">
|
|
{{ percentage }}%
|
|
</button>
|
|
</template>
|
|
<div v-else class="h5 fw-semibold text-muted text-center">
|
|
Amount<template v-if="tip">: {{formatCurrency(tip, true)}}</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="ModeTablist" class="nav btcpay-pills align-items-center justify-content-center mb-n2 pb-1" role="tablist" v-if="modes.length > 1">
|
|
<template v-for="m in modes" :key="m.value">
|
|
<input :id="`ModeTablist-${m.type}`" name="mode" :value="m.type" type="radio" role="tab" data-bs-toggle="pill" :data-bs-target="`#Mode-${m.type}`" :disabled="m.type != 'amount' && amountNumeric == 0" :aria-controls="`Mode-${m.type}`" :aria-selected="mode === m.type" :checked="mode === m.type" v-on:click="mode = m.type">
|
|
<label :for="`ModeTablist-${m.type}`">{{ m.title }}</label>
|
|
</template>
|
|
</div>
|
|
<div class="keypad">
|
|
<button v-for="k in keys" :key="k" v-on:click.prevent="keyPressed(k)" type="button" class="btn btn-secondary btn-lg" :data-key="k">
|
|
<template v-if="k === 'del'"><vc:icon symbol="caret-right"/></template>
|
|
<template v-else>{{ k }}</template>
|
|
</button>
|
|
</div>
|
|
<div class="actions px-4 gap-4">
|
|
<button class="btn btn-lg btn-secondary" type="reset" v-on:click.prevent="clear">Clear</button>
|
|
<button class="btn btn-lg btn-primary" type="submit" :disabled="payButtonLoading" id="pay-button">
|
|
<div v-if="payButtonLoading" class="spinner-border spinner-border-sm" id="pay-button-spinner" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
<template v-else>Charge</template>
|
|
</button>
|
|
</div>
|
|
<input class="form-control" type="hidden" name="amount" v-model="totalNumeric">
|
|
</form>
|