socrates/duty-schedule-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

worked on monthpicker

Browse Source
This commit is contained in:
Sockenklaus
2021-10-04 00:07:36 +02:00
parent e304767f32
commit 7871eb55ad
1 changed files with 74 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/MonthPicker.vue
View File

@@ -1,37 +1,37 @@
<template>
<div class="d-flex justify-content-center" >
<button type="button" class="btn btn-outline-secondary" @click="state = 'open'" v-show="state === 'closed'">
Startmonat: {{months[selectedMonth]}} {{selectedYear}}
</button>
<div class="d-flex justify-content-center">
<div class="accordion" id="accMonthPicker">
<div class="accordion-item">
<h2 class="accordion-header" id="headingMonthSelector">
<button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMonthPicker">
Startmonat: {{months[selectedMonth]}} {{selectedYear}}
</button>
</h2>
<div id="collapseMonthPicker" class="accordion-collapse collapse" data-bs-parent="#accMonthPicker">
<div class="accordion-body">
<div class="row">
<div class="col">
<button type="button" class="btn btn-outline-secondary" @click="selectedYear--"><i class="bi bi-caret-left" /></button>
</div>
<div class="col col-auto">
<input type="number" class="form-control text-center" v-model="selectedYear" @change="emit('getYear', selectedYear)" />
</div>
<div class="col">
<button type="button" class="btn btn-outline-secondary" @click="selectedYear++"><i class="bi bi-caret-right" /></button>
</div>
</div>
<div v-show="state === 'open'" class="card">
<div class="card-body">
<div class="row">
<div class="col d-flex flex-row-reverse mb-3">
<button @click="state = 'closed'" type="button" class="btn-close" aria-label="Close"></button>
<table class="table table-bordered mt-2">
<tbody>
<tr v-for="n in 3">
<td v-for="m in 4" @click="selectedMonth = m+4*n-5" :class="{ 'table-active': selectedMonth === (m+4*n-5)}">
{{monthsShort[m+4*n-5]}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col">
<button type="button" class="btn btn-outline-secondary" @click="selectedYear--"><i class="bi bi-caret-left" /></button>
</div>
<div class="col col-auto">
<input type="number" class="form-control text-center" v-model="selectedYear" @change="emit('getYear', selectedYear)" />
</div>
<div class="col">
<button type="button" class="btn btn-outline-secondary" @click="selectedYear++"><i class="bi bi-caret-right" /></button>
</div>
</div>
<table class="table table-bordered mt-2">
<tbody>
<tr v-for="n in 3">
<td v-for="m in 4" @click="selectedMonth = m+4*n-5" :class="{ 'table-active': selectedMonth === (m+4*n-5)}">
{{months[m+4*n-5]}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@@ -39,7 +39,7 @@
</template>
<script setup lang="ts">
import { ref, watch, Ref } from 'vue'
import { ref, watch, Ref, ComputedRef, computed } from 'vue'
const props = defineProps<{
selectedMonth: number,
@@ -51,12 +51,29 @@
const selectedYear : Ref<number> = ref(props.selectedYear)
const state : Ref<'closed'|'open'> = ref(props.state)
const months : string[] = [
const monthsShort : string[] = [
'Jan', 'Feb', 'Mrz', 'Apr',
'Mai', 'Jun', 'Jul', 'Aug',
'Sept', 'Okt', 'Nov', 'Dez'
]
const months : string[] = [
'Januar', 'Februar', 'März',
'April', 'Mai', 'Juni', 'Juli',
'August', 'September', 'Oktober',
'November', 'Dezember'
]
function toggleState() {
if(state.value === 'open') state.value = 'closed'
else state.value = 'open'
}
const btnCloseBg : ComputedRef<string> = computed(() => {
if(state.value === 'open') return ''
else return ''
})
const emit = defineEmits<{
(e: 'getYear', year: number): number
(e: 'getMonth', month: number): number
@@ -74,8 +91,30 @@
cursor: pointer
}
.selected {
background-color: rgb(108,117,125);
color: #fff;
.accordion {
width: 370px
}
.accordion-button.bg-light {
color:black;
}
.accordion-button.bg-light::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
button.btn-outline-secondary {
border-color: #ced4da;
}
</style>