signature: layout and css bootstrap class of the vue app

This commit is contained in:
nobohan
2024-07-02 15:08:45 +02:00
parent 1bee3114ac
commit 794c479b9e
2 changed files with 117 additions and 119 deletions

View File

@@ -9,23 +9,41 @@
</template>
</modal>
</teleport>
<div>
<button :disabled="!userSignatureZones" @click="confirm_sign">
Confirmer la signature
</button>
<button :disabled="!userSignatureZones" @click="undo_sign">
Supprimer la signature
</button>
<div class="col-12">
<div class="row justify-content-center">
<div class="col-3">
<button class="btn btn-primary" :disabled="!userSignatureZones" @click="confirm_sign">
Confirmer la signature
</button>
</div>
<div class="col-3">
<button class="btn btn-primary" :disabled="!userSignatureZones" @click="undo_sign">
Supprimer la signature
</button>
</div>
</div>
<div class="row justify-content-center">
<div class="col-2">
<button class="btn btn-light" @click="turn_signature(-1)">Zone de signature précédente</button>
</div>
<div class="col-2">
<button class="btn btn-light" @click="turn_signature(1)">Zone de signature suivante</button>
</div>
</div>
<div class="row justify-content-center" v-if="pageCount > 1">
<div class="col-3">
<button class="btn btn-light" :disabled="page <= 1" @click="turn_page(-1)"></button>
{{ page }} / {{ pageCount }}
<button class="btn btn-light" :disabled="page >= pageCount" @click="turn_page(1)"></button>
</div>
</div>
</div>
<div v-if="pageCount > 1">
<button :disabled="page <= 1" @click="turn_page(-1)"></button>
{{ page }} / {{ pageCount }}
<button :disabled="page >= pageCount" @click="turn_page(1)"></button>
<div class="col-12">
<canvas id="canvas" style="width:100%"></canvas>
</div>
<div>
<button @click="go_next_signature()">Voir les zones de signature</button>
</div>
<canvas id="canvas"></canvas>
</template>
<script setup lang="ts">
@@ -180,8 +198,7 @@ const turn_page = async (upOrDown: number) => {
setTimeout(() => add_zones(page.value), 200);
};
const go_next_signature = async () => {
open()
const turn_signature = async (upOrDown: number) => {
let currentZone = signature.zones[zone.value];
if (currentZone) {
page.value = currentZone.page;
@@ -189,12 +206,13 @@ const go_next_signature = async () => {
setTimeout(() => add_zones(page.value), 200);
}
if (zone.value < signature.zones.length - 1) {
zone.value = zone.value + 1;
zone.value = zone.value + upOrDown;
} else {
zone.value = 0;
}
};
const draw_zone = (
zone: SignatureZone,
ctx: CanvasRenderingContext2D,
@@ -262,6 +280,9 @@ const undo_sign = async () => {
download_and_open();
</script>
<style lang="scss">
<style scoped lang="scss">
canvas {
width: 100%;
}
</style>