Skip to content

Commit d132e4d

Browse files
moiikanamoiikana
committed
Merge branch 'subfolders' into 'main'
Split campaign folders into channel folders See merge request fun-tech/shutterbug!74
2 parents f53fc76 + ef0ca14 commit d132e4d

1 file changed

Lines changed: 185 additions & 121 deletions

File tree

‎src/views/Overview.vue‎

Lines changed: 185 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,197 @@
11
<template>
2-
<div class="page-overview">
3-
<h1 class="page-overview-heading">Campaign overview</h1>
4-
<div v-if="lastError" class="error">
5-
<h2 class="error__title">Error</h2>
6-
<div class="error__message">There was an error loading the overview.</div>
7-
</div>
8-
<ol v-if="!isLoading" class="folders">
9-
<li v-for="folder in folders"
10-
:key="folder.campaign"
11-
class="folders__item folder"
12-
>
13-
<router-link
14-
class="folder__card"
15-
:to="`/slides/${folder.campaign}`">
16-
<Icon :icon="'folder'" class="folder__icon"></Icon>
17-
{{ folder.campaign }}<br>
18-
<i class="folder__info" >( {{ folder.testCaseCount }} tests, generated on {{ folder.createdOn.replace("T"," ").replace(/[0-9.]{4}Z$/,"")}} )</i>
19-
</router-link>
20-
</li>
21-
</ol>
22-
<div v-else-if="!lastError">Loading overview ...</div>
23-
</div>
2+
<div class="page-overview">
3+
<h1 class="page-overview-heading">Campaign overview</h1>
4+
<div v-if="lastError" class="error">
5+
<h2 class="error__title">Error</h2>
6+
<div class="error__message">There was an error loading the overview.</div>
7+
</div>
8+
<ol v-if="!isLoading" class="folders">
9+
<li v-for="( channelFolders, channelName) in folders" :key="channelName" class="channelArea">
10+
<h3 class="channelArea__headline">{{ channelName }}</h3>
11+
12+
<ol class="channelArea__folder-list">
13+
<li v-for="subFolder in channelFolders"
14+
:key="subFolder.campaign"
15+
class="folders__item folder">
16+
<router-link
17+
class="folder__card"
18+
:to="`/slides/${subFolder.campaign}`">
19+
<Icon :icon="'folder'" class="folder__icon"></Icon>
20+
{{ subFolder.campaign }}<br>
21+
<i class="folder__info">( {{ subFolder.testCaseCount }} tests, generated on
22+
{{ subFolder.createdOn.replace( 'T', ' ' ).replace( /[0-9.]{4}Z$/, '' ) }} )</i>
23+
</router-link>
24+
</li>
25+
</ol>
26+
27+
</li>
28+
29+
</ol>
30+
<div v-else-if="!lastError">Loading overview ...</div>
31+
</div>
2432
</template>
2533

2634
<script lang="ts">
27-
import {defineComponent, reactive, toRefs, watchEffect} from "vue";
28-
import Icon from "@/components/Icon.vue";
29-
import { compareCampaigns, SummarizedMetadata } from "@/model/compareCampaigns";
30-
31-
export default defineComponent( {
32-
name: "ScreenshotOverview",
33-
components: {
34-
Icon
35-
},
36-
setup() {
37-
const overviewStateInit = {
38-
isLoading: true,
39-
lastError: '',
40-
folders: []
41-
}
42-
43-
const overviewState = reactive( overviewStateInit );
44-
watchEffect( () => {
45-
fetch( 'screenshots/metadata_summary.json' )
46-
.then( response => response.json() )
35+
import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
36+
import Icon from '@/components/Icon.vue';
37+
import { compareCampaigns, SummarizedMetadata } from '@/model/compareCampaigns';
38+
39+
export default defineComponent( {
40+
name: 'ScreenshotOverview',
41+
components: {
42+
Icon
43+
},
44+
setup() {
45+
const overviewStateInit = {
46+
isLoading: true,
47+
lastError: '',
48+
folders: {
49+
desktop_de: [],
50+
mobile_de: [],
51+
pad_de: [],
52+
desktop_en: [],
53+
mobile_en: [],
54+
}
55+
}
56+
57+
const splitCampaignsIntoChannelFolders = ( overviewState, campaigns ) => {
58+
const desktopDERegex = new RegExp( /^\d{2}/ );
59+
const mobileDERegex = new RegExp( /^mob-\d{2}/ );
60+
const padDERegex = new RegExp( /^pad/ );
61+
const desktopENRegex = new RegExp( /^en/ );
62+
const mobileENRegex = new RegExp( /^mob_en/ );
63+
64+
campaigns.forEach( ( campaign ) => {
65+
if( campaign.campaign.match( desktopDERegex ) ) {
66+
overviewState.folders.desktop_de.push( campaign );
67+
}
68+
else if ( campaign.campaign.match( mobileDERegex ) ) {
69+
overviewState.folders.mobile_de.push( campaign );
70+
}
71+
else if( campaign.campaign.match( padDERegex ) ) {
72+
overviewState.folders.pad_de.push( campaign );
73+
}
74+
else if( campaign.campaign.match( desktopENRegex ) ) {
75+
overviewState.folders.desktop_en.push( campaign );
76+
}
77+
else if( campaign.campaign.match( mobileENRegex ) ) {
78+
overviewState.folders.mobile_en.push( campaign );
79+
}
80+
} )
81+
}
82+
83+
const overviewState = reactive( overviewStateInit );
84+
watchEffect( () => {
85+
fetch( 'screenshots/metadata_summary.json' )
86+
.then( response => response.json() )
4787
.then( ( campaigns: SummarizedMetadata[] ) => {
4888
campaigns.sort( compareCampaigns );
4989
campaigns.reverse();
50-
overviewState.isLoading = false;
51-
overviewState.folders = campaigns ;
52-
} )
53-
.catch( e => {
54-
console.log('Error loading overview:', e);
55-
overviewState.lastError = e;
56-
} )
57-
} );
58-
59-
return {
60-
...toRefs( overviewState )
61-
}
62-
}
63-
} );
90+
overviewState.isLoading = false;
91+
splitCampaignsIntoChannelFolders( overviewState, campaigns );
92+
} )
93+
.catch( e => {
94+
console.log( 'Error loading overview:', e );
95+
overviewState.lastError = e;
96+
} )
97+
} );
98+
99+
return {
100+
...toRefs( overviewState )
101+
}
102+
}
103+
} );
64104
</script>
65105

66106
<style lang="scss">
67-
@import "../assets/settings";
68-
69-
.page-overview {
70-
margin-top: $header-height;
71-
padding: $header-height;
72-
73-
&-heading {
74-
margin-bottom: $header-height;
75-
}
76-
77-
.folders {
78-
margin: 0 math.div(-$stage-gutter, 2);
79-
display: flex;
80-
flex-wrap: wrap;
81-
align-content: stretch;
82-
height: 100%;
83-
84-
&__item {
85-
width: 100%;
86-
87-
@media (min-width: 950px) {
88-
width: 50%;
89-
}
90-
}
91-
}
92-
93-
.folder {
94-
list-style: none;
95-
margin: 0;
96-
line-height: 1.2;
97-
98-
&__card {
99-
position: relative;
100-
display: block;
101-
text-decoration: none;
102-
color: $font-color-dark;
103-
font-size: 125%;
104-
margin: 0 math.div($stage-gutter,2) 40px;
105-
padding: 20px 20px 20px 80px;
106-
border: 1px solid $border-color;
107-
108-
&:hover, &:focus {
109-
border-color: $overview-border-hover;
110-
}
111-
}
112-
113-
&__icon {
114-
position: absolute;
115-
top: 50%;
116-
left: 18px;
117-
height: 50px;
118-
width: 50px;
119-
margin-top: -25px;
120-
}
121-
122-
&__title:hover {
123-
text-decoration: underline;
124-
}
125-
126-
&__info {
127-
color: $font-color-secondary;
128-
font-size: 14px;
129-
}
130-
}
131-
}
107+
@import "../assets/settings";
108+
109+
.page-overview {
110+
margin-top: 30px;
111+
padding: 45px;
112+
height: 100vH;
113+
114+
&-heading {
115+
margin-bottom: 20px;
116+
}
117+
118+
.channelArea {
119+
width: 45%;
120+
margin: 0 0 0 35px;
121+
122+
@media (min-width: 1100px) {
123+
width: 30%;
124+
}
125+
126+
&__headline {
127+
display: inline-block;
128+
font-weight: bold;
129+
font-size: 20px;
130+
}
131+
132+
&__folder-list {
133+
height: 36vH;
134+
overflow: scroll;
135+
border: 1px solid #808080;
136+
padding-top: 15px;
137+
padding-bottom: 15px;
138+
background: #d5d5d5;
139+
}
140+
}
141+
142+
.folders {
143+
margin: 0 math.div(-$stage-gutter, 2);
144+
display: flex;
145+
flex-wrap: wrap;
146+
align-content: stretch;
147+
height: 100%;
148+
149+
&__item {
150+
width: 100%;
151+
}
152+
}
153+
154+
.folder {
155+
list-style: none;
156+
margin: 0;
157+
line-height: 1.2;
158+
width: 100%;
159+
160+
&__card {
161+
position: relative;
162+
display: block;
163+
text-decoration: none;
164+
color: $font-color-dark;
165+
background: #ffffff;
166+
margin: 0 12px 10px 10px;
167+
padding: 15px 15px 15px 80px;
168+
border: 1px solid $border-color;
169+
border-radius: 3px;
170+
box-shadow: 2px 2px gray;
171+
172+
&:hover, &:focus {
173+
border-color: $overview-border-hover;
174+
}
175+
}
176+
177+
&__icon {
178+
position: absolute;
179+
top: 50%;
180+
left: 18px;
181+
height: 50px;
182+
width: 50px;
183+
margin-top: -25px;
184+
}
185+
186+
&__title:hover {
187+
text-decoration: underline;
188+
}
189+
190+
&__info {
191+
color: $font-color-secondary;
192+
font-size: 14px;
193+
}
194+
}
195+
}
132196
133197
</style>

0 commit comments

Comments
 (0)