mirror of https://github.com/bra1n/townsquare.git
126 lines
2.4 KiB
Vue
126 lines
2.4 KiB
Vue
<template>
|
|
<Modal
|
|
class="vote-history"
|
|
v-show="modals.voteHistory && session.voteHistory"
|
|
@close="toggleModal('voteHistory')"
|
|
>
|
|
<font-awesome-icon
|
|
@click="clearVoteHistory"
|
|
icon="trash-alt"
|
|
class="clear"
|
|
title="Clear history"
|
|
/>
|
|
|
|
<h3>Nomination history</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td>Time</td>
|
|
<td>Nominator</td>
|
|
<td>Nominee</td>
|
|
<td>Type</td>
|
|
<td>Votes</td>
|
|
<td>Majority</td>
|
|
<td>
|
|
<font-awesome-icon icon="user-friends" />
|
|
Voters
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(vote, index) in session.voteHistory" :key="index">
|
|
<td>
|
|
{{ vote.timestamp.getHours().toString().padStart(2, "0") }}:{{
|
|
vote.timestamp.getMinutes().toString().padStart(2, "0")
|
|
}}
|
|
</td>
|
|
<td>{{ vote.nominator }}</td>
|
|
<td>{{ vote.nominee }}</td>
|
|
<td>{{ vote.type }}</td>
|
|
<td>
|
|
{{ vote.votes.length }}
|
|
<font-awesome-icon icon="hand-paper" />
|
|
</td>
|
|
<td>
|
|
{{ vote.majority }}
|
|
<font-awesome-icon
|
|
:icon="[
|
|
'fas',
|
|
vote.votes.length >= vote.majority ? 'check-square' : 'square'
|
|
]"
|
|
/>
|
|
</td>
|
|
<td>
|
|
{{ vote.votes.join(", ") }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script>
|
|
import Modal from "./Modal";
|
|
import { mapMutations, mapState } from "vuex";
|
|
|
|
export default {
|
|
components: {
|
|
Modal
|
|
},
|
|
computed: {
|
|
...mapState(["session", "modals"])
|
|
},
|
|
methods: {
|
|
...mapMutations(["toggleModal"]),
|
|
...mapMutations("session", ["clearVoteHistory"])
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../../vars.scss";
|
|
|
|
.clear {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 20px;
|
|
cursor: pointer;
|
|
&:hover {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
margin: 0 40px;
|
|
svg {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
table {
|
|
border-spacing: 10px 0;
|
|
}
|
|
|
|
thead td {
|
|
font-weight: bold;
|
|
border-bottom: 1px solid white;
|
|
text-align: center;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
tbody {
|
|
td:nth-child(2) {
|
|
color: $townsfolk;
|
|
}
|
|
td:nth-child(3) {
|
|
color: $demon;
|
|
}
|
|
td:nth-child(5) {
|
|
text-align: center;
|
|
}
|
|
td:nth-child(6) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|