Browse Source

editorconfig, bootstrapping for more views

new-map
Ben Stähli 3 years ago
parent
commit
4494b42a95
  1. 2
      .editorconfig
  2. 21
      src/App.vue
  3. 99
      src/views/DefinitionalFrameworks.vue
  4. 63
      src/views/Guidelines.vue
  5. 52
      src/views/InteractiveMap.vue
  6. 44
      src/views/InteractiveMapDetail.vue
  7. 8
      src/views/Start.vue

2
.editorconfig

@ -12,7 +12,7 @@ insert_final_newline = true
# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py,sass,scss}]
[*.{vue,js,py,sass,scss}]
charset = utf-8
indent_style = space
indent_size = 2

21
src/App.vue

@ -94,6 +94,7 @@
</v-app>
</template>
<script>
// vue2leaflet specific workarounds
@ -114,17 +115,17 @@
name: 'App',
data() {
return {
clipped: false,
// clipped: false,
drawer: false,
fixed: false,
items: [{
icon: 'bubble_chart',
title: 'Inspire'
}],
miniVariant: false,
right: true,
rightDrawer: false,
title: 'Vuetify.js'
// fixed: false,
// items: [{
// icon: 'bubble_chart',
// title: 'Inspire'
// }],
// miniVariant: false,
// right: true,
// rightDrawer: false,
// title: 'Vuetify.js'
}
},
}

99
src/views/DefinitionalFrameworks.vue

@ -1,23 +1,86 @@
<template>
<v-container fluid>
<v-slide-y-transition mode="out-in">
<v-layout column align-center>
<img src="@/assets/logo.png" alt="Vuetify.js" class="mb-5">
<blockquote>
&#8220;First, solvadsvasdvasdvase the problem. Then, write the code.&#8221;
<footer>
<small>
<em>&mdash;John Johnson</em>
</small>
</footer>
</blockquote>
</v-layout>
</v-slide-y-transition>
</v-container>
<v-tabs
grow
>
<v-tab>
by Alphabet
</v-tab>
<v-tab>
by Topic
</v-tab>
<v-tab-item>
<v-card flat>
<v-card-text>
Alphabet filter and List of definitionals
<div class="alphabet-filter">
<a class="alphabet-filter__link" v-for="a in alphabet" :click="selectedLetter = a">{{a}}</a>
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-container>
<v-layout>
<v-flex>
<v-card flat>
<v-select
:items="topicSelectItems"
v-model="topicSelect"
label="Filter"
></v-select>
<v-card-text>
Topic filter and List of definitionals
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
<v-card flat>
</v-card>
</v-tab-item>
</v-tabs>
</template>
<script>
// use vuetify Expansion Panel
// use vuetify tabs
// alphabet: https://forum.vuejs.org/t/json-of-items-filter-by-initial-letter/10250
function genCharArray(charA, charZ) {
var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
for (; i <= j; ++i) {
a.push(String.fromCharCode(i));
}
return a;
}
export default {
name: 'DefinitionalFrameworks',
data() {
return {
topicSelect: 0,
topicSelectItems: [
{'value': 0, 'text': "All Topics"},
{'value': 1, 'text': "Topic 1"},
{'value': 2, 'text': "Topic 2"},
],
'alphabet': genCharArray('A', 'Z')
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
blockquote
font-size: 99px
<style lang="sass">
.alphabet-filter
margin-left: -5px
.alphabet-filter__link
display: inline-block
padding: 5px
</style>

63
src/views/Guidelines.vue

@ -1,5 +1,62 @@
<template>
<div class="about">
<h1>Guidelines. Man, I need VANS.</h1>
</div>
<v-tabs
grow
>
<v-tab>
Guidelines
</v-tab>
<v-tab>
Survey
</v-tab>
<v-tab>
Results
</v-tab>
<v-tab-item>
<v-container>
<v-layout>
<v-flex>
<v-card flat>
<v-select
:items="guidelineSelectItems"
v-model="guidelineSelect"
label="Filter"
></v-select>
<v-card-text>
List of guidelines, with filters by topic
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-tab-item>
<v-tab-item>
<v-card flat>
<v-card-text>Take the survey! Coming soon.</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card flat>
<v-card-text>Results of survey, shown on map</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</template>
<script>
export default {
name: 'Guidelines',
data() {
return {
guidelineSelect: 0,
guidelineSelectItems: [
{'value': 0, 'text': "All Guidelines"},
{'value': 2, 'text': "Two"},
],
}
},
}
</script>

52
src/views/InteractiveMap.vue

@ -1,16 +1,20 @@
<template>
<v-container fluid fill-height>
<l-map :zoom="zoom" :center="center" style="height: calc(100vh - 120px)">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker v-bind:key="index" v-for="(item, index) in items" :lat-lng="item.latlng">
<l-popup @click="openDetail" ><router-link :to="{ 'name': 'interactive-map-detail', 'params': {'id': item.id}}">{{ item.name }}</router-link></l-popup>
</l-marker>
</l-map>
<!--<ul>-->
<!--<li v-for="item in items">-->
<!--{{item.name }}-->
<!--</li>-->
<!--</ul>-->
<v-container fluid fill-height pa-0>
<v-layout>
<v-flex>
<l-map :zoom="zoom" :center="center" style="height: calc(100vh - 57px)">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker v-bind:key="index" v-for="(item, index) in items" :lat-lng="item.latlng">
<l-popup><router-link :to="{ 'name': 'interactive-map-detail', 'params': {'id': item.id}}">{{ item.name }}</router-link></l-popup>
</l-marker>
</l-map>
<!--<ul>-->
<!--<li v-for="item in items">-->
<!--{{item.name }}-->
<!--</li>-->
<!--</ul>-->
</v-flex>
</v-layout>
</v-container>
</template>
@ -53,10 +57,6 @@
'$route': 'fetchData'
},
methods: {
openDetail() {
console.log("what");
alert();
},
async fetchData() {
this.loading = true
const response = await DefinitionalFrameworksService.getInstruments()
@ -75,22 +75,10 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
<style>
ul {
list-style-type: none;
padding: 0;
}
.v-navigation-drawer {
z-index: 9999;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

44
src/views/InteractiveMapDetail.vue

@ -1,21 +1,25 @@
<template>
<v-container fluid>
<router-link to="/interactive-map">close</router-link>
<h1>{{ object.name }}</h1>
<ul>
<li>Scope virtual: {{ object.scope_virtual }}</li>
<li>Name Long (description): {{ object.nameLong }}</li>
<li>Date: {{ object.date }}</li>
<li>Migration: {{ object.migration }}</li>
<li>Emergency: {{ object.emergency }}</li>
<li>refugee: {{ object.refugee }}</li>
<li>binding: {{ object.binding }}</li>
<li>scope: {{ object.scope }}</li>
<li>in_force: {{ object.in_force }}</li>
<li>reference: {{ object.reference }}</li>
<li>disaster: {{ object.disaster }}</li>
<li>provision: {{ object.provision }}</li>
</ul>
<v-container>
<v-layout>
<v-flex>
<router-link to="/interactive-map">close</router-link>
<h1>{{ object.name }}</h1>
<ul>
<li><strong>Name Long (description?):</strong> {{ object.nameLong }}</li>
<li><strong>provision:</strong> {{ object.provision }}</li>
<li><strong>Date:</strong> {{ object.date }}</li>
<li><strong>Scope virtual:</strong> {{ object.scope_virtual }}</li>
<li><strong>Migration:</strong> {{ object.migration }}</li>
<li><strong>Emergency:</strong> {{ object.emergency }}</li>
<li><strong>refugee:</strong> {{ object.refugee }}</li>
<li><strong>binding:</strong> {{ object.binding }}</li>
<li><strong>scope:</strong> {{ object.scope }}</li>
<li><strong>in_force:</strong> {{ object.in_force }}</li>
<li><strong>reference:</strong> {{ object.reference }}</li>
<li><strong>disaster:</strong> {{ object.disaster }}</li>
</ul>
</v-flex>
</v-layout>
</v-container>
</template>
@ -83,13 +87,13 @@ notes: "",
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
display: block;
margin: 0 0 10px 0;
}
a {

8
src/views/Start.vue

@ -11,6 +11,14 @@
</v-container>
</template>
<script>
// use veutify Dialog
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {

Loading…
Cancel
Save