kopia lustrzana https://github.com/manuelkasper/sotlas-frontend
127 wiersze
3.6 KiB
Vue
127 wiersze
3.6 KiB
Vue
<template>
|
|
<CardPagination v-if="!$mq.desktop" :data="cardSpots" rowKey="_id" :infinite="infinite" :paginated="paginated">
|
|
<template v-slot="{ row }">
|
|
<RBNSpotCard v-slot="{ row }" :class="recentClass(row.timeStamp)" :spot="row" :callsignLink="callsignLink" />
|
|
</template>
|
|
</CardPagination>
|
|
<b-table v-else :default-sort="['timeStamp', 'desc']" :narrowed="true" :striped="true" :data="data" :paginated="paginated" :per-page="perPage" :row-class="rowClass">
|
|
<template slot-scope="props">
|
|
<b-table-column field="timeStamp" class="timestamp" label="Time" sortable>
|
|
<span v-html="formatTimeDay(props.row.timeStamp)" />
|
|
</b-table-column>
|
|
<b-table-column field="callsign" label="Callsign" sortable>
|
|
<CountryFlag :country="country(props.row.callsign)" class="flag" /><template v-if="callsignLink"><router-link :to="makeActivatorLink(props.row.callsign)">{{ props.row.callsign }}</router-link></template><template v-else>{{ props.row.callsign }}</template>
|
|
</b-table-column>
|
|
<b-table-column field="frequency" label="Frequency" sortable numeric>
|
|
{{ props.row.frequency | formatFrequency }}
|
|
</b-table-column>
|
|
<b-table-column field="mode" label="Mode" sortable>
|
|
<ModeLabel :mode="props.row.mode" />
|
|
</b-table-column>
|
|
<b-table-column field="snr" label="SNR" sortable numeric>
|
|
{{ props.row.snr }} dB
|
|
</b-table-column>
|
|
<b-table-column field="speed" label="Speed" sortable numeric>
|
|
{{ props.row.speed }} wpm
|
|
</b-table-column>
|
|
<b-table-column field="spotter" label="Spotter" sortable>
|
|
{{ props.row.spotter }}
|
|
</b-table-column>
|
|
</template>
|
|
<template v-if="paginated" v-slot:bottom-left>
|
|
<b-select v-model="perPage">
|
|
<option v-for="option in perPageOptions" :key="option" :value="option">{{ option }} per page</option>
|
|
</b-select>
|
|
</template>
|
|
</b-table>
|
|
</template>
|
|
|
|
<script>
|
|
import prefix from '../prefix.js'
|
|
import utils from '../mixins/utils.js'
|
|
import prefs from '../mixins/prefs.js'
|
|
import nowticker from '../mixins/nowticker.js'
|
|
import ModeLabel from '../components/ModeLabel.vue'
|
|
import CardPagination from '../components/CardPagination.vue'
|
|
import RBNSpotCard from '../components/RBNSpotCard.vue'
|
|
import CountryFlag from '../components/CountryFlag.vue'
|
|
|
|
export default {
|
|
name: 'SpotsList',
|
|
components: {
|
|
ModeLabel, CardPagination, RBNSpotCard, CountryFlag
|
|
},
|
|
mixins: [utils, prefs, nowticker],
|
|
prefs: {
|
|
key: 'rbnSpotListPrefs',
|
|
props: ['perPage']
|
|
},
|
|
props: {
|
|
data: Array,
|
|
paginated: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
infinite: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
callsignLink: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
computed: {
|
|
cardSpots () {
|
|
return [...this.data].sort((a, b) => {
|
|
if (a.timeStamp > b.timeStamp) {
|
|
return -1
|
|
} else if (a.timeStamp < b.timeStamp) {
|
|
return 1
|
|
} else {
|
|
return 0
|
|
}
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
rowClass (row) {
|
|
return this.recentClass(row.timeStamp)
|
|
},
|
|
country (callsign) {
|
|
return prefix.isoCodeForCallsign(callsign)
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
perPage: 15,
|
|
perPageOptions: [10, 15, 20, 30, 50, 100]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
tr .timestamp {
|
|
border-left: 3px solid #e0e0e0;
|
|
}
|
|
tr.recent1 .timestamp {
|
|
border-left: 3px solid #f28591;
|
|
}
|
|
tr.recent2 .timestamp {
|
|
border-left: 3px solid #fbaf63;
|
|
}
|
|
.card {
|
|
border-left: 3px solid #e0e0e0;
|
|
}
|
|
.card.recent1 {
|
|
border-left: 3px solid #f28591;
|
|
}
|
|
.card.recent2 {
|
|
border-left: 3px solid #fbaf63;
|
|
}
|
|
.flag {
|
|
margin-right: 0.4em;
|
|
}
|
|
</style>
|