Initial commit
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div v-lazy:background-image="image" class="image" @click="onClick">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
image: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
onClick: {
|
||||
type: Function,
|
||||
default: f => f
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease;
|
||||
will-change: opacity;
|
||||
|
||||
&[lazy="loaded"] {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div :class="{ 'is-shown': show, 'is-contained': contained }" class="cover">
|
||||
<ul class="loader">
|
||||
<li/>
|
||||
<li/>
|
||||
<li/>
|
||||
<li/>
|
||||
<li/>
|
||||
<li/>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
contained: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cover {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 100000;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: all 350ms ease;
|
||||
|
||||
&.is-contained {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.loader li {
|
||||
background: #535353;
|
||||
margin-left: 1px;
|
||||
width: 14px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 0px 1px #b4b4b4;
|
||||
transform: skew(-25deg, 0deg) scale(0.1);
|
||||
animation: loader 0.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
to {
|
||||
transform: skew(-25deg, 0deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.loader li:nth-child(2) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.loader li:nth-child(3) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.loader li:nth-child(4) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.loader li:nth-child(5) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.loader li:nth-child(6) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
&.is-shown {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
|
||||
.spinner {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="message-container">
|
||||
<div class="message">
|
||||
<div class="icon">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<h3>{{ message }}</h3>
|
||||
<p>{{ description }}</p>
|
||||
<slot name="extras"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
message: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ""
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-container {
|
||||
margin: 10vh auto;
|
||||
max-width: 420px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
box-shadow: 0px 1px 2px #b4b4b494;
|
||||
|
||||
.icon > * {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div>
|
||||
<app-loader :show="isLoading" />
|
||||
<div v-if="isReady || isSubmitting || isSubmitted" class="container app-fade-in">
|
||||
<Table stripe border :columns="columns" :data="events"></Table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
findEvents,
|
||||
ignoreBand,
|
||||
ignoreDanceHall,
|
||||
ignoreCity,
|
||||
ignoreMunicipality,
|
||||
ignoreState
|
||||
} from "~/utils/graph-client";
|
||||
|
||||
import auth from "~/utils/auth";
|
||||
|
||||
// import LoadFailed from "./Messages/LoadFailed";
|
||||
// import NotViewable from "./Messages/NotViewable";
|
||||
// import SubmitFailed from "./Messages/SubmitFailed";
|
||||
// import SubmitSuccessful from "./Messages/SubmitSuccessful";
|
||||
// import Alerts from "./Alerts";
|
||||
// import TopBar from "./TopBar";
|
||||
// import PackageSelector from "./PackageSelector";
|
||||
// import ProductsForm from "./ProductsForm";
|
||||
// import PropertyInfo from "./Info";
|
||||
// import RealtorFrame from "./RealtorFrame";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// Alerts,
|
||||
// LoadFailed,
|
||||
// NotViewable,
|
||||
// TopBar,
|
||||
// PackageSelector,
|
||||
// ProductsForm,
|
||||
// PropertyInfo,
|
||||
// RealtorFrame,
|
||||
// SubmitFailed,
|
||||
// SubmitSuccessful
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: "loading",
|
||||
property: undefined,
|
||||
propertyId: undefined,
|
||||
order: undefined,
|
||||
orderId: undefined,
|
||||
originalProperty: undefined,
|
||||
selectedPackage: undefined,
|
||||
selectedImages: [],
|
||||
submitError: "",
|
||||
user: undefined,
|
||||
columns: [
|
||||
{
|
||||
title: 'Datum',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: 'Tid',
|
||||
key: 'time'
|
||||
},
|
||||
{
|
||||
title: 'Band',
|
||||
render: (h, params) => {
|
||||
const inner = Array(h('span', ' ' + params.row.band.name + ' '));
|
||||
if (this.hasUser) {
|
||||
inner.push(h('Icon', {
|
||||
props: {
|
||||
type: 'ios-eye-off'
|
||||
},
|
||||
attrs: {
|
||||
title: 'Dölj'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.ignoreBand({name: params.row.band.name})
|
||||
}
|
||||
}
|
||||
}, 'Dölj'));
|
||||
}
|
||||
|
||||
return h('div', inner);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Dansställe',
|
||||
render: (h, params) => {
|
||||
const inner = Array(h('span', ' ' + params.row.danceHall.name + ' '));
|
||||
if (this.hasUser) {
|
||||
inner.push(h('Icon', {
|
||||
props: {
|
||||
type: 'ios-eye-off'
|
||||
},
|
||||
attrs: {
|
||||
title: 'Dölj'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.ignoreDanceHall({name: params.row.danceHall.name})
|
||||
}
|
||||
}
|
||||
}, 'Dölj'));
|
||||
}
|
||||
|
||||
return h('div', inner);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Stad',
|
||||
render: (h, params) => {
|
||||
const inner = Array(h('span', ' ' + params.row.danceHall.city + ' '));
|
||||
if (this.hasUser) {
|
||||
inner.push(h('Icon', {
|
||||
props: {
|
||||
type: 'ios-eye-off'
|
||||
},
|
||||
attrs: {
|
||||
title: 'Dölj'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.ignoreCity({name: params.row.danceHall.city})
|
||||
}
|
||||
}
|
||||
}, 'Dölj'));
|
||||
}
|
||||
|
||||
return h('div', inner);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Kommun',
|
||||
render: (h, params) => {
|
||||
const inner = Array(h('span', ' ' + params.row.danceHall.municipality + ' '));
|
||||
if (this.hasUser) {
|
||||
inner.push(h('Icon', {
|
||||
props: {
|
||||
type: 'ios-eye-off'
|
||||
},
|
||||
attrs: {
|
||||
title: 'Dölj'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.ignoreMunicipality({name: params.row.danceHall.municipality})
|
||||
}
|
||||
}
|
||||
}, 'Dölj'));
|
||||
}
|
||||
|
||||
return h('div', inner);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Län',
|
||||
render: (h, params) => {
|
||||
const inner = Array(h('span', ' ' + params.row.danceHall.state + ' '));
|
||||
if (this.hasUser) {
|
||||
inner.push(h('Icon', {
|
||||
props: {
|
||||
type: 'ios-eye-off'
|
||||
},
|
||||
attrs: {
|
||||
title: 'Dölj'
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.ignoreState({name: params.row.danceHall.state})
|
||||
}
|
||||
}
|
||||
}, 'Dölj'));
|
||||
}
|
||||
|
||||
return h('div', inner);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Övrigt',
|
||||
key: 'extraInfo'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isLoading() {
|
||||
return this.status === "loading";
|
||||
},
|
||||
isLoadFailed() {
|
||||
return this.status === "load-failed";
|
||||
},
|
||||
isReady() {
|
||||
return this.status === "ready";
|
||||
},
|
||||
isSubmitting() {
|
||||
return this.status === "submitting";
|
||||
},
|
||||
isSubmitted() {
|
||||
return this.status === "submitted";
|
||||
},
|
||||
isSubmitFailed() {
|
||||
return this.status === "submit-failed";
|
||||
},
|
||||
isNotViewable() {
|
||||
return this.status === "no-packages";
|
||||
},
|
||||
hasUser() {
|
||||
return this.user;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// const { propertyId, orderId, id } = this.$route.query;
|
||||
this.fetchEvents();
|
||||
this.fetchUser();
|
||||
},
|
||||
methods: {
|
||||
fetchEvents () {
|
||||
this.status = "loading";
|
||||
findEvents()
|
||||
.then(this.eventsFetched)
|
||||
.catch(this.eventsFailed);
|
||||
},
|
||||
eventsFetched(response) {
|
||||
if (response.errors) {
|
||||
throw new Error("Fetch failed");
|
||||
}
|
||||
this.events = response.data.events;
|
||||
this.status = "ready";
|
||||
},
|
||||
eventsFailed() {
|
||||
this.status = "load-failed";
|
||||
},
|
||||
fetchUser() {
|
||||
this.user = auth.getUserInfo();
|
||||
},
|
||||
ignoreBand(name) {
|
||||
ignoreBand(name)
|
||||
.then(this.ignoreSuccess)
|
||||
.catch(this.ignoreFailed)
|
||||
},
|
||||
ignoreDanceHall(name) {
|
||||
ignoreDanceHall(name)
|
||||
.then(this.ignoreSuccess)
|
||||
.catch(this.ignoreFailed)
|
||||
},
|
||||
ignoreCity(name) {
|
||||
ignoreCity(name)
|
||||
.then(this.ignoreSuccess)
|
||||
.catch(this.ignoreFailed)
|
||||
},
|
||||
ignoreMunicipality(name) {
|
||||
ignoreMunicipality(name)
|
||||
.then(this.ignoreSuccess)
|
||||
.catch(this.ignoreFailed)
|
||||
},
|
||||
ignoreState(name) {
|
||||
ignoreState(name)
|
||||
.then(this.ignoreSuccess)
|
||||
.catch(this.ignoreFailed)
|
||||
},
|
||||
ignoreSuccess(response) {
|
||||
this.fetchEvents()
|
||||
},
|
||||
ignoreFailed() {
|
||||
|
||||
}
|
||||
// switchPackage(pack) {
|
||||
// this.selectedPackage = pack;
|
||||
// },
|
||||
// switchImage(image) {
|
||||
// this.selectedImages = [image];
|
||||
// },
|
||||
// publishCampaign(products) {
|
||||
// if (this.status !== "ready") {
|
||||
// return;
|
||||
// }
|
||||
// const packageToOrder = {
|
||||
// products,
|
||||
// packagePrice: this.selectedPackage.price,
|
||||
// packageId: this.selectedPackage.id
|
||||
// };
|
||||
//
|
||||
// this.status = "submitting";
|
||||
// orderPackage({
|
||||
// package: packageToOrder,
|
||||
// propertyId: this.propertyId,
|
||||
// orderId: this.orderId
|
||||
// })
|
||||
// .then(this.publishCampaignSuccess, this.publishCampaignFailed)
|
||||
// .catch(this.publishCampaignFailed);
|
||||
// },
|
||||
// publishCampaignSuccess(response) {
|
||||
// if (response.errors) {
|
||||
// this.publishCampaignFailed();
|
||||
// } else {
|
||||
// this.status = "submitted";
|
||||
// }
|
||||
// },
|
||||
// publishCampaignFailed() {
|
||||
// this.status = "submit-failed";
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 1.5rem 1rem;
|
||||
|
||||
> * {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and(max-width: 1200px) {
|
||||
.left {
|
||||
width: 40vw;
|
||||
}
|
||||
.right {
|
||||
width: 60vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and(max-width: 1024px) {
|
||||
.left {
|
||||
width: 50vw;
|
||||
}
|
||||
.right {
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and(min-width: 1200px) {
|
||||
.left {
|
||||
width: 35vw;
|
||||
}
|
||||
.right {
|
||||
width: 65vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user