136 lines
4.3 KiB
Vue
136 lines
4.3 KiB
Vue
<template>
|
|
<v-sheet color="white" elevation="4" height="300" style="overflow: hidden;">
|
|
<!-- todo: need type icon and badge with count options in title bar (badge is icon?) -->
|
|
<slot name="dash-title">
|
|
<v-toolbar flat dense>
|
|
<template v-if="hasUrl">
|
|
<v-btn text icon :to="moreUrl">
|
|
<template v-if="showCount && count > 0">
|
|
<v-badge overlap>
|
|
<template v-slot:badge>
|
|
{{ count }}
|
|
</template>
|
|
<v-icon>{{ icon }}</v-icon>
|
|
</v-badge>
|
|
</template>
|
|
<template v-else>
|
|
<v-icon>{{ icon }}</v-icon>
|
|
</template>
|
|
</v-btn>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="showCount && count > 0">
|
|
<v-badge overlap class="mr-4">
|
|
<template v-slot:badge>
|
|
{{ count }}
|
|
</template>
|
|
<v-icon>{{ icon }}</v-icon>
|
|
</v-badge>
|
|
</template>
|
|
<template v-else>
|
|
<v-icon class="mr-4">{{ icon }}</v-icon>
|
|
</template>
|
|
</template>
|
|
<v-toolbar-title> {{ title }}</v-toolbar-title>
|
|
|
|
<v-spacer></v-spacer>
|
|
|
|
<!-- <v-btn icon>
|
|
<v-icon>mdi-heart</v-icon>
|
|
</v-btn> -->
|
|
|
|
<v-menu bottom left>
|
|
<template v-slot:activator="{ on, attrs }">
|
|
<v-btn icon v-bind="attrs" v-on="on">
|
|
<v-icon>$ayiEllipsisV</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-list>
|
|
<v-list-item @click="$emit('dash-refresh', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiSync</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("Refresh") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-move-start', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiStepBackward</v-icon>
|
|
</v-list-item-icon>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-move-back', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiBackward</v-icon>
|
|
</v-list-item-icon>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-move-forward', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiForward</v-icon>
|
|
</v-list-item-icon>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-move-end', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiStepForward</v-icon>
|
|
</v-list-item-icon>
|
|
</v-list-item>
|
|
|
|
<v-list-item @click="$emit('dash-remove', id)">
|
|
<v-list-item-icon>
|
|
<v-icon>$ayiTrashAlt</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t("Remove") }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-toolbar>
|
|
</slot>
|
|
<slot name="main"
|
|
><div class="ml-4 mt-1 d-flex align-center">
|
|
<div>
|
|
<span class="orange--text"
|
|
>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
|
|
CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT
|
|
CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT
|
|
CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
|
|
CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT
|
|
CONTENT CONTENT CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT
|
|
CONTENT<br />CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT<br />CONTENT
|
|
CONTENT CONTENT CONTENT CONTENT CONTENT</span
|
|
>
|
|
</div>
|
|
</div></slot
|
|
>
|
|
</v-sheet>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data: () => ({}),
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
title: String,
|
|
moreUrl: String,
|
|
showCount: Boolean,
|
|
count: { type: Number, default: 0 },
|
|
updateFrequency: { type: Number, default: 60000 },
|
|
icon: String
|
|
},
|
|
computed: {
|
|
hasUrl: function() {
|
|
return this.moreUrl && this.moreUrl != "";
|
|
}
|
|
},
|
|
methods: {}
|
|
};
|
|
</script>
|