PoS app to show POS view for easy setup (#5825)

* PoS app to show POS view for easy setup

* update selenium test

* Updates

* Add QR code icon

---------

Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
This commit is contained in:
Chukwuleta Tobechi 2024-03-14 08:52:33 +01:00 committed by GitHub
parent 3a00d32ce0
commit f1ff913cbe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 26 additions and 3 deletions

View file

@ -15,12 +15,20 @@
@section PageHeadContent {
<link href="~/vendor/highlightjs/default.min.css" rel="stylesheet" asp-append-version="true">
<link href="~/vendor/summernote/summernote-bs5.css" rel="stylesheet" asp-append-version="true" />
<link href="~/vendor/vue-qrcode-reader/vue-qrcode-reader.css" rel="stylesheet" asp-append-version="true" />
}
@section PageFootContent {
<partial name="_ValidationScriptsPartial" />
<script src="~/vendor/summernote/summernote-bs5.js" asp-append-version="true"></script>
<script src="~/vendor/vuejs/vue.min.js" asp-append-version="true"></script>
<script src="~/vendor/vue-qrcode/vue-qrcode.min.js" asp-append-version="true"></script>
<script src="~/pos/admin.js" asp-append-version="true"></script>
<script>
const qrApp = initQRShow({ title: "Scan to view the Point of Sale" });
const posViewUrl = @Safe.Json($"{Context.Request.GetAbsoluteRoot()}{Url.Action("ViewPointOfSale", "UIPointOfSale", new { appId = Model.Id })}");
delegate('click', '#displayQRCode', () => { qrApp.showData(posViewUrl); });
</script>
}
<form method="post">
@ -34,7 +42,12 @@
}
else
{
<div class="btn-group" role="group" aria-label="View Point of Sale">
<a class="btn btn-secondary" asp-controller="UIPointOfSale" asp-action="ViewPointOfSale" asp-route-appId="@Model.Id" id="ViewApp" target="_blank">View</a>
<button type="button" class="btn btn-secondary px-3 d-inline-flex align-items-center" id="displayQRCode">
<vc:icon symbol="qr-code" />
</button>
</div>
}
</div>
</div>
@ -320,3 +333,7 @@
</div>
<partial name="_Confirm" model="@(new ConfirmModel("Delete app", "This app will be removed from this store.", "Delete"))" />
<partial name="ShowQR" />

View file

@ -32,7 +32,6 @@
{
<link href="~/vendor/vue-qrcode-reader/vue-qrcode-reader.css" rel="stylesheet" asp-append-version="true"/>
<style>
.btn .icon-scan-qr { --btn-icon-size: 1.1875rem; }
.crypto-fee-link { padding-left: 1rem; padding-right: 1rem; }
.btn-group > .crypto-fee-link:last-of-type {
border-top-right-radius: .2rem !important;

View file

@ -63,6 +63,7 @@
<symbol id="pos-print" viewBox="0 0 24 24" fill="none"><path d="M5 6v13.543l2.333-.914L9.667 20 12 18.629 14.333 20l2.334-1.371 2.333.914V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2Z" stroke="currentColor" stroke-width="1.6"/><path d="M8.5 8h7M8.5 11.5h7M8.5 15h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></symbol>
<symbol id="pos-static" viewBox="0 0 24 24" fill="none"><path d="M19.05 10.266v6.265a2.244 2.244 0 0 1-2.238 2.238H7.246a2.244 2.244 0 0 1-2.238-2.238v-6.265" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/><path d="M9.455 5.262v3.833c0 1.174-.951 2.153-2.126 2.153h-.42a2.613 2.613 0 0 1-2.405-3.664l.56-1.315A1.702 1.702 0 0 1 6.63 5.234l2.825.028ZM14.547 5.258V9.09c0 1.175.95 2.154 2.126 2.154h.42c1.901 0 3.16-1.93 2.405-3.665l-.56-1.314a1.721 1.721 0 0 0-1.566-1.007h-2.825ZM12.002 11.499A2.525 2.525 0 0 1 9.484 8.98V5.29h5.063v3.692c0 1.399-1.147 2.518-2.545 2.518Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"/></symbol>
<symbol id="pull-payments" viewBox="0 0 24 24" fill="none"><path d="M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-15.19a7.2 7.2 0 0 0 0 14.38A7.2 7.2 0 0 0 12 4.8Z" fill="currentColor" stroke="currentColor" stroke-width=".6"/><path d="M9.48 14.85a.44.44 0 0 1-.3-.14c-.14-.16-.14-.43.05-.57l5.02-4.31c.16-.14.43-.14.57.05.14.17.14.44-.05.57l-5.05 4.29c-.05.08-.16.1-.24.1Z" fill="currentColor" stroke="currentColor" stroke-width=".6"/><path d="M14.39 14.28a.4.4 0 0 1-.41-.4l.1-3.42-3.08-.17a.4.4 0 0 1-.38-.43c0-.22.19-.4.43-.38l3.47.19c.22 0 .38.19.38.4l-.13 3.83c.02.19-.17.38-.38.38Z" fill="currentColor" stroke="currentColor" stroke-width=".6"/></symbol>
<symbol id="qr-code" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 11.1111H11.1111V4H4V11.1111ZM5.77778 5.77778H9.33333V9.33333H5.77778V5.77778ZM4 20H11.1111V12.8889H4V20ZM5.77778 14.6667H9.33333V18.2223H5.77778V14.6667ZM12.8887 11.1111V4H19.9998V11.1111H12.8887ZM14.6664 9.33333H18.222V5.77778H14.6664V9.33333ZM19.9999 18.2222L18.2224 18.2222V16.4445L19.9999 16.4445V14.6667L18.2224 14.6667V12.8889H16.4446V14.6667L14.667 14.6667V16.4445L16.4446 16.4445V18.2222L14.667 18.2222V20H16.4448V18.2222H18.2222V20H19.9999V18.2222ZM18.2222 14.6667H16.4448V16.4445H18.2222V14.6667ZM12.8887 12.8889H14.6665V14.6667H12.8887V12.8889ZM12.8887 16.4445H14.6665V18.2222H12.8887V16.4445Z" fill="currentColor"/></symbol>
<symbol id="refresh" viewBox="0 0 24 24" fill="none"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></g></symbol>
<symbol id="remove" viewBox="0 0 24 24" fill="none"><path d="M17 11H13V7C13 6.45 12.55 6 12 6C11.45 6 11 6.45 11 7V11H7C6.45 11 6 11.45 6 12C6 12.55 6.45 13 7 13H11V17C11 17.55 11.45 18 12 18C12.55 18 13 17.55 13 17V13H17C17.55 13 18 12.55 18 12C18 11.45 17.55 11 17 11Z" fill="currentColor" transform="rotate(45 12 12)"/></symbol>
<symbol id="scan-qr" viewBox="0 0 32 32" fill="none"><path d="M20 .875h10c.621 0 1.125.504 1.125 1.125v10m0 8v10c0 .621-.504 1.125-1.125 1.125H20m-8 0H2A1.125 1.125 0 01.875 30V20m0-8V2C.875 1.379 1.379.875 2 .875h10" stroke="currentColor" stroke-width="1.75" fill="none" fill-rule="evenodd"/></symbol>

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 78 KiB

View file

@ -1117,6 +1117,12 @@ input.ts-wrapper.form-control:not(.ts-hidden-accessible,.ts-inline) {
color: var(--btcpay-success) !important;
}
.btn .icon-scan-qr {
--btn-icon-size: 1.1875rem;
}
.btn .icon-qr-code {
--btn-icon-size: 1.5rem;
}
.blazor-status .btn-close .icon {
width: .75rem;
height: .75rem;