Skip to content

Commit

Permalink
Add Field Page take 2
Browse files Browse the repository at this point in the history
  • Loading branch information
gonfalon committed Mar 7, 2021
1 parent 3185114 commit a4ac9d6
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 4 deletions.
1 change: 1 addition & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 9 additions & 4 deletions src/components/AppNavigation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
<v-navigation-drawer
v-model="drawer"
app
color="light-blue darken-4"
color="blue darken-3"
dark
disable-resize-watcher
temporary
>
<v-list>
<v-list-item
Expand All @@ -20,8 +21,12 @@
<v-list-item-content v-text="item.title" />
</v-list-item>
</v-list>
<template v-slot:append>
<v-btn width="100%" color="blue darken-2">Import</v-btn>
<v-btn width="100%" color="blue darken-2">Export</v-btn>
</template>
</v-navigation-drawer>
<v-app-bar app elevate-on-scroll color="light-blue darken-4" dark>
<v-app-bar app elevate-on-scroll color="blue darken-3" dark>
<v-app-bar-nav-icon @click="drawer = true" />
<v-toolbar-title>{{ appTitle }}</v-toolbar-title>
</v-app-bar>
Expand All @@ -40,8 +45,8 @@ export default {
{ title: 'Roster', to: '/roster', icon: 'mdi-account-group' },
{ title: 'Drills', to: '/drills', icon: 'mdi-baseball' },
{
title: 'Depth Chart',
to: '/deptchart',
title: 'Field',
to: '/field',
icon: 'mdi-baseball-diamond'
}
]
Expand Down
6 changes: 6 additions & 0 deletions src/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
import Roster from '@/views/Roster';
import Player from '@/views/Player';
import Home from '@/views/Home';
import Field from '@/views/Field';

Vue.use(VueRouter);

Expand Down Expand Up @@ -35,6 +36,11 @@ const routes = [
name: 'player',
component: Player,
props: true
},
{
path: '/field',
name: 'field',
component: Field
}
];

Expand Down
8 changes: 8 additions & 0 deletions src/store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ export default new Vuex.Store({
);
}
},
importState(state, data) {
this.replaceState(
Object.assign(
state,
JSON.parse(data)
)
);
},
newPlayer(state) {
state.roster.push({ name: '', bats: '', throws: '' });
},
Expand Down
116 changes: 116 additions & 0 deletions src/views/Field.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<template>
<v-container class="full">
<v-row>
<v-col>
<v-select
:items="leftFielders"
item-text="name"
item-value="name"
label="Left Field"
></v-select>
</v-col>
<v-spacer></v-spacer>
<v-col>
<v-select
:items="centerFielders"
item-text="name"
item-value="name"
label="Center Field"
></v-select>
</v-col>
<v-spacer></v-spacer>
<v-col>
<v-select
:items="rightFielders"
item-text="name"
item-value="name"
label="Right Field"
></v-select>
</v-col>
</v-row>
<v-row>
<v-spacer></v-spacer>
<v-col>
<v-select
:items="shortstops"
item-text="name"
item-value="name"
label="Shortstop"
></v-select>
</v-col>
<v-spacer></v-spacer>
<v-col>
<v-select
:items="secondBasemen"
item-text="name"
item-value="name"
label="Second Base"
></v-select>
</v-col>
<v-spacer></v-spacer>
</v-row>
<v-row>
<v-col>
<v-select
:items="thirdBasemen"
item-text="name"
item-value="name"
label="Third Base"
></v-select>
</v-col>
<v-spacer></v-spacer>
<v-col>
<v-select
:items="pitchers"
item-text="name"
item-value="name"
label="Pitcher"
></v-select>
</v-col>
<v-spacer></v-spacer>
<v-col>
<v-select
:items="firstBasemen"
item-text="name"
item-value="name"
label="First Base"
></v-select>
</v-col>
</v-row>
<v-row>
<v-spacer></v-spacer>
<v-col>
<v-select
:items="catchers"
item-text="name"
item-value="name"
label="Catcher"
></v-select>
</v-col>
<v-spacer></v-spacer>
</v-row>
</v-container>
</template>

<script>
import store from '@/store/index';
export default {
name: 'Field',
computed: {
roster: function() { return store.state.roster; },
pitchers: function() { return this.roster.filter(player => player.p); },
catchers: function() { return this.roster.filter(player => player.c); },
firstBasemen: function() { return this.roster.filter(player => player.first); },
secondBasemen: function() { return this.roster.filter(player => player.second); },
shortstops: function() { return this.roster.filter(player => player.short); },
thirdBasemen: function() { return this.roster.filter(player => player.third); },
leftFielders: function() { return this.roster.filter(player => player.left); },
rightFielders: function() { return this.roster.filter(player => player.right); },
centerFielders: function() { return this.roster.filter(player => player.center); }
}
};
</script>

<style scoped>
</style>

0 comments on commit a4ac9d6

Please sign in to comment.