Skip to content

Instantly share code, notes, and snippets.

@mattraykowski

mattraykowski/StationList.vue

Last active March 12, 2019 18:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mattraykowski/b93b095e7262a05920921cbc21620d25 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mattraykowski/b93b095e7262a05920921cbc21620d25 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mattraykowski revised this gist Mar 12, 2019. 1 changed file with 15 additions and 8 deletions.
    23 changes: 15 additions & 8 deletions StationList.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -4,10 +4,10 @@
    <input class="input" type="text" placeholder="Filter stations..." v-model="stationFilter">
    <div class="station-list">
    <button
    v-for="callsign in stations(stationFilter)"
    v-for="callsign in stations"
    :key="callsign"
    @click="focusMarker(callsign)"
    class="button is-small"
    class="button is-small station-list-item"
    >{{callsign}}</button>
    </div>
    </div>
    @@ -17,19 +17,26 @@
    .station-list {
    display: flex;
    flex-direction: column;
    margin: 0.5em;
    }
    .station-list-item {
    margin: 0.25em;
    }
    </style>

    <script>
    export default {
    props: ["focusMarker"],
    data: () => ({}),
    methods: {
    stations(stationFilter) {
    const filter = stationFilter ? stationFilter.toUpperCase() : "";
    console.log(filter);
    data: () => ({
    stationFilter: ""
    }),
    computed: {
    stations() {
    // const filter = : "";
    console.log(this.stationFilter.toUpperCase());
    return this.$store.getters.stationCallsigns.filter(s =>
    s.toUpperCase().includes(filter)
    s.toUpperCase().includes(this.stationFilter.toUpperCase())
    );
    }
    }
  2. mattraykowski created this gist Mar 12, 2019.
    37 changes: 37 additions & 0 deletions StationList.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    <template>
    <div>
    <p class="menu-label">Latest Callsigns</p>
    <input class="input" type="text" placeholder="Filter stations..." v-model="stationFilter">
    <div class="station-list">
    <button
    v-for="callsign in stations(stationFilter)"
    :key="callsign"
    @click="focusMarker(callsign)"
    class="button is-small"
    >{{callsign}}</button>
    </div>
    </div>
    </template>

    <style scoped>
    .station-list {
    display: flex;
    flex-direction: column;
    }
    </style>

    <script>
    export default {
    props: ["focusMarker"],
    data: () => ({}),
    methods: {
    stations(stationFilter) {
    const filter = stationFilter ? stationFilter.toUpperCase() : "";
    console.log(filter);
    return this.$store.getters.stationCallsigns.filter(s =>
    s.toUpperCase().includes(filter)
    );
    }
    }
    };
    </script>