KawAnime/components/historyModal.vue

<template>
	<v-dialog scrollable width="75%"
	          v-model="$store.state.historyModal">
		<v-btn secondary dark
		       @click.mative="refresh()"
		       slot="activator">History
		</v-btn>
		<v-card class="secondary">
			<v-card-title>History</v-card-title>
			<v-divider></v-divider>
			<v-card-row height="70%">
				<v-card-text>
					<v-row>
						<v-expansion-panel expand class="secondary">
							<v-expansion-panel-content class="item-container"
							                           ripple
							                           v-for="item in Object.keys(history).reverse()"
							                           :key="item">
								<div slot="header"
								     v-ripple="true"
								     class="day">{{ item }}
								</div>
								<v-card>
									<v-card-text class="lighten-3 info-container">
										<v-row>
											<template v-for="info in history[item]">
												<v-col xs2 class="time" :class="isDelete(info.type)">
													{{ info.time }}
												</v-col>
												<v-col xs2 class="type" :class="isDelete(info.type)">
													{{ info.type }}
												</v-col>
												<v-col xs8
												       class="ellipsis text"
												       :class="isDelete(info.type)">
													{{ info.text }}
												</v-col>
											</template>
										</v-row>
									</v-card-text>
								</v-card>
							</v-expansion-panel-content>
						</v-expansion-panel>
					</v-row>
				</v-card-text>
			</v-card-row>
			<v-divider></v-divider>
			<v-card-row actions style=" padding-right: 20px;">
				<v-btn class="white--text darken-1"
				       style="width: 100px;"
				       primary
				       @click.native="$store.commit('setHistoryModal', false)">
					Close
				</v-btn>
			</v-card-row>
		</v-card>
	</v-dialog>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {}
    },
    computed: {
      history: function () {
        return this.$store.state.history
      },
      modal: function () {
        return this.$store.state.historyModal
      }
    },
    watch: {
      modal: function () {
        console.log(`[${(new Date()).toLocaleTimeString()}]: Refreshing history.`)
        this.$store.dispatch('getHistory')
      }
    },
    methods: {
      isDelete(type) {
        if (type === 'Delete')
          return 'delete'

        return 'not-delete'
      }
    }
  }
</script>

<style scoped>
	/*noinspection CssUnusedSymbol*/
	.card__title, .card__row, h6
	{
		color: rgba(255, 255, 255, 0.8);
	}

	h6, p
	{
		margin: 0;
	}

	.expansion-panel > li
	{
		border: 1px solid #444 !important;
	}

	.ellipsis
	{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.item-container
	{
		background-color: rgb(50, 50, 50);
		border-bottom: 0 !important;
	}

	.info-container
	{
		background-color: rgb(50, 50, 50);
	}

	.day
	{
		position: relative;
		font-size: 17px;
		font-weight: 700;
		padding-left: 15px;
	}

	/*noinspection CssUnusedSymbol*/
	.not-delete
	{
		background-color: rgba(119, 221, 119, 0.62);
		border-bottom: 1px solid rgba(119, 221, 119, 0.62);
		border-top: 1px solid rgba(119, 221, 119, 0.62);
	}

	/*noinspection CssUnusedSymbol*/
	.delete
	{
		background-color: rgba(216, 24, 24, 0.55);
		border-bottom: 1px solid rgba(235, 26, 26, 0.20);
		border-top: 1px solid rgba(235, 26, 26, 0.20);
	}

	.time
	{
		font-size: 16px;
		font-weight: 600;
	}

	.type
	{
		font-size: 16px;
		font-style: italic;
	}

	.text
	{
		font-size: 16px;
		font-weight: 700;
	}
</style>