Skip to content

Commit

Permalink
update search bar with list component for items
Browse files Browse the repository at this point in the history
  • Loading branch information
@btambara
btambara committed Mar 15, 2024
1 parent 8cf5a92 commit 50d40d1
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 129 deletions.
3 changes: 2 additions & 1 deletion src/assets/pitchers.json
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
[
{
"mlb_id": 0,
"full_name": "Clayton Kershaw",
"primary_number": "22",
"primary_position_code": "1",
"current_team_id": "119",
"current_team_id": 119,
"careerStats": {
"gamesPlayed": 425,
"gamesStarted": 422,
Expand Down
39 changes: 28 additions & 11 deletions src/components/PitcherSearch.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script setup lang="ts">
import PlayerSheet from "./PlayerSheet.vue";
import pitchersJSON from "../assets/pitchers.json";
import { getTeamName, getTeamLogo } from "../helpers";
import { ref } from "vue";
const pitchers = defineModel();
const pitcherDialog = ref(false);
Expand All @@ -13,24 +14,18 @@ fetch(`http://localhost/api/v1/players/?position=1&skip=0`)
.get("content-type")
?.includes("application/json");
const data = isJson && (await response.json());
let itemPlayers: Array<{ title: string; value: object }> = [];
let itemPlayers: Array<Record<string, string>> = [];
for (var player of data) {
itemPlayers.push({
title: player["full_name"] + " | " + player["primary_number"],
value: player,
});
itemPlayers.push(player);
}
pitchers.value = itemPlayers;
ready.value = true;
})
.catch(() => {
let itemPlayers: Array<{ title: string; value: object }> = [];
let itemPlayers: Array<Record<string, string | number | object>> = [];
for (var player of pitchersJSON) {
itemPlayers.push({
title: player["full_name"] + " | " + player["primary_number"],
value: player,
});
itemPlayers.push(player);
}
pitchers.value = itemPlayers;
ready.value = true;
Expand Down Expand Up @@ -65,7 +60,29 @@ function handler(pitcher: object) {
variant="solo"
no-data-text="No searchable pitchers."
v-on:update:modelValue="handler"
></v-autocomplete>
item-title="full_name"
:return-object="true"
>
<template v-slot:item="{ props, item }">
<v-list-item
v-bind="props"
:prepend-avatar="getTeamLogo(item.raw.current_team_id)"
:subtitle="getTeamName(item.raw.current_team_id)['name']"
:title="item.raw.full_name"
>
<template #prepend>
<v-avatar size="35">
<v-img
:src="getTeamLogo(item.raw.current_team_id)"
aspect-ratio="16/9"
width="30"
height="30"
></v-img>
</v-avatar>
</template>
</v-list-item>
</template>
</v-autocomplete>
</v-col>
</v-row>
<v-dialog
Expand Down
17 changes: 2 additions & 15 deletions src/components/PlayerDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,14 @@ type Player = {
const details = defineProps<Player>();
function getBackgroundColor(currentTeamId: number) {
function getBackgroundColor(currentTeamId: number): string {
var teamColors = getTeamColors(currentTeamId);
if (teamColors && "first" in teamColors) {
return teamColors["first"];
}
return "primary";
}
function getLogoBackgroundColor(currentTeamId: number) {
var teamColors = getTeamColors(currentTeamId);
if (teamColors && "third" in teamColors) {
return teamColors["third"];
}
return "white";
}
</script>

<template>
Expand All @@ -37,10 +28,7 @@ function getLogoBackgroundColor(currentTeamId: number) {
>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-avatar
:color="getLogoBackgroundColor(details.currentTeamId)"
size="70"
>
<v-avatar color="white" size="70">
<img :src="logo" height="60%" />
</v-avatar>
</v-col>
Expand All @@ -55,4 +43,3 @@ function getLogoBackgroundColor(currentTeamId: number) {
</template>

<style scoped></style>
../helpers
5 changes: 2 additions & 3 deletions src/components/PlayerPitches.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ watchEffect(async () => {
`http://localhost/api/v1/player/pitches/all/${pitcher.mlbId}?skip=0`,
).then(async (response) => {
const answer = await response.json();
for (var item of answer) {
if ("UUID" in item) {
tasks.value = answer;
Expand Down Expand Up @@ -84,10 +83,10 @@ function getColorScheme(currentTeamId: number) {
<v-container>
<v-row>
<v-col v-show="!ready">
<div class="text-h5 mb-4" v-if="tasks.length > 1">
<div class="text-h5 mb-4" v-if="!ready && tasks && tasks.length > 1">
{{ "Downloading " + tasks.length + " seasons..." }}
</div>
<div class="text-h5 mb-4" v-if="tasks.length == 1">
<div class="text-h5 mb-4" v-if="!ready && tasks && tasks.length == 1">
{{ "Downloading " + tasks.length + " season..." }}
</div>
<v-progress-linear
Expand Down
101 changes: 2 additions & 99 deletions src/components/PlayerSheet.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,7 @@ import PlayerStats from "./PlayerStats.vue";
import PlayerPitches from "./PlayerPitches.vue";
import positions from "../assets/positions.json";
import AthleticsLogo from "../assets/logos/oakland-athletics-logo.svg";
import PiratesLogo from "../assets/logos/pittsburgh-pirates-logo.svg";
import PadresLogo from "../assets/logos/san-diego-padres-logo.svg";
import MarinersLogo from "../assets/logos/seattle-mariners-logo.svg";
import GiantsLogo from "../assets/logos/san-francisco-giants-logo.svg";
import CardinalsLogo from "../assets/logos/st.-louis-cardinals-logo.svg";
import RaysLogo from "../assets/logos/tampa-bay-rays-logo.svg";
import RangersLogo from "../assets/logos/texas-rangers-logo.svg";
import JaysLogo from "../assets/logos/toronto-blue-jays-logo.svg";
import TwinsLogo from "../assets/logos/minnesota-twins-logo.svg";
import PhilliesLogo from "../assets/logos/philadelphia-phillies-logo.svg";
import BravesLogo from "../assets/logos/atlanta-braves-logo.svg";
import RedSoxLogo from "../assets/logos/boston-red-sox-logo.svg";
import MarlinsLogo from "../assets/logos/miami-marlins-logo.svg";
import YankeesLogo from "../assets/logos/new-york-yankees-logo.svg";
import BrewersLogo from "../assets/logos/milwaukee-brewers-logo.svg";
import AngelsLogo from "../assets/logos/los-angeles-angels-logo.svg";
import DiamondbacksLogo from "../assets/logos/arizona-diamondbacks-logo.svg";
import OriolesLogo from "../assets/logos/baltimore-orioles-logo.svg";
import WhiteSoxLogo from "../assets/logos/chicago-white-sox-logo.svg";
import CubsLogo from "../assets/logos/chicago-cubs-logo.svg";
import RedsLogo from "../assets/logos/cincinnati-reds-logo.svg";
import GuardiansLogo from "../assets/logos/cleveland-indians-logo.svg";
import RockiesLogo from "../assets/logos/colorado-rockies-logo.svg";
import TigersLogo from "../assets/logos/detroit-tigers-logo.svg";
import AstrosLogo from "../assets/logos/houston-astros-logo.svg";
import RoyalsLogo from "../assets/logos/kansas-city-royals-logo.svg";
import DodgersLogo from "../assets/logos/los-angeles-dodgers-logo.svg";
import NationalsLogo from "../assets/logos/washington-nationals-logo.svg";
import MetsLogo from "../assets/logos/new-york-mets-logo.svg";
import { getTeamColors } from "../helpers";
import { getTeamColors, getTeamLogo } from "../helpers";
type Pitcher = {
fullName: string;
Expand All @@ -57,73 +27,6 @@ function findAbbrev(code: string) {
return "UNKNOWN";
}
function findLogo(currentTeamId: number) {
switch (currentTeamId) {
case 133:
return AthleticsLogo;
case 134:
return PiratesLogo;
case 135:
return PadresLogo;
case 136:
return MarinersLogo;
case 137:
return GiantsLogo;
case 138:
return CardinalsLogo;
case 139:
return RaysLogo;
case 140:
return RangersLogo;
case 141:
return JaysLogo;
case 142:
return TwinsLogo;
case 143:
return PhilliesLogo;
case 144:
return BravesLogo;
case 145:
return WhiteSoxLogo;
case 146:
return MarlinsLogo;
case 147:
return YankeesLogo;
case 158:
return BrewersLogo;
case 108:
return AngelsLogo;
case 109:
return DiamondbacksLogo;
case 110:
return OriolesLogo;
case 111:
return RedSoxLogo;
case 112:
return CubsLogo;
case 113:
return RedsLogo;
case 114:
return GuardiansLogo;
case 115:
return RockiesLogo;
case 116:
return TigersLogo;
case 117:
return AstrosLogo;
case 118:
return RoyalsLogo;
case 119:
return DodgersLogo;
case 120:
return NationalsLogo;
case 121:
return MetsLogo;
default:
return "";
}
}
function getBackgroundColor(currentTeamId: number) {
var teamColors = getTeamColors(currentTeamId);
if (teamColors && "second" in teamColors) {
Expand All @@ -144,7 +47,7 @@ function getBackgroundColor(currentTeamId: number) {
:full-name="pitcher.fullName"
:primary-number="pitcher.primaryNumber"
:primary-position="findAbbrev(pitcher.primaryPosition)"
:logo="findLogo(Number(pitcher.currentTeamId))"
:logo="getTeamLogo(pitcher.currentTeamId)"
:currentTeamId="pitcher.currentTeamId"
/>
</v-col>
Expand Down
108 changes: 108 additions & 0 deletions src/helpers/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,36 @@
import mlbTeams from "../assets/mlbTeams.json";

import AthleticsLogo from "../assets/logos/oakland-athletics-logo.svg";
import PiratesLogo from "../assets/logos/pittsburgh-pirates-logo.svg";
import PadresLogo from "../assets/logos/san-diego-padres-logo.svg";
import MarinersLogo from "../assets/logos/seattle-mariners-logo.svg";
import GiantsLogo from "../assets/logos/san-francisco-giants-logo.svg";
import CardinalsLogo from "../assets/logos/st.-louis-cardinals-logo.svg";
import RaysLogo from "../assets/logos/tampa-bay-rays-logo.svg";
import RangersLogo from "../assets/logos/texas-rangers-logo.svg";
import JaysLogo from "../assets/logos/toronto-blue-jays-logo.svg";
import TwinsLogo from "../assets/logos/minnesota-twins-logo.svg";
import PhilliesLogo from "../assets/logos/philadelphia-phillies-logo.svg";
import BravesLogo from "../assets/logos/atlanta-braves-logo.svg";
import RedSoxLogo from "../assets/logos/boston-red-sox-logo.svg";
import MarlinsLogo from "../assets/logos/miami-marlins-logo.svg";
import YankeesLogo from "../assets/logos/new-york-yankees-logo.svg";
import BrewersLogo from "../assets/logos/milwaukee-brewers-logo.svg";
import AngelsLogo from "../assets/logos/los-angeles-angels-logo.svg";
import DiamondbacksLogo from "../assets/logos/arizona-diamondbacks-logo.svg";
import OriolesLogo from "../assets/logos/baltimore-orioles-logo.svg";
import WhiteSoxLogo from "../assets/logos/chicago-white-sox-logo.svg";
import CubsLogo from "../assets/logos/chicago-cubs-logo.svg";
import RedsLogo from "../assets/logos/cincinnati-reds-logo.svg";
import GuardiansLogo from "../assets/logos/cleveland-indians-logo.svg";
import RockiesLogo from "../assets/logos/colorado-rockies-logo.svg";
import TigersLogo from "../assets/logos/detroit-tigers-logo.svg";
import AstrosLogo from "../assets/logos/houston-astros-logo.svg";
import RoyalsLogo from "../assets/logos/kansas-city-royals-logo.svg";
import DodgersLogo from "../assets/logos/los-angeles-dodgers-logo.svg";
import NationalsLogo from "../assets/logos/washington-nationals-logo.svg";
import MetsLogo from "../assets/logos/new-york-mets-logo.svg";

export function getTeamColors(teamId: number): Record<string, string> {
for (const team of mlbTeams) {
if ("colors" in team && team["colors"] && teamId == team.id) {
Expand All @@ -9,3 +40,80 @@ export function getTeamColors(teamId: number): Record<string, string> {

return {};
}

export function getTeamName(teamId: number): Record<string, string> {
for (const team of mlbTeams) {
if (teamId === team.id) {
return { name: team["name"] };
}
}

return {};
}

export function getTeamLogo(teamId: number): string {
switch (teamId) {
case 133:
return AthleticsLogo;
case 134:
return PiratesLogo;
case 135:
return PadresLogo;
case 136:
return MarinersLogo;
case 137:
return GiantsLogo;
case 138:
return CardinalsLogo;
case 139:
return RaysLogo;
case 140:
return RangersLogo;
case 141:
return JaysLogo;
case 142:
return TwinsLogo;
case 143:
return PhilliesLogo;
case 144:
return BravesLogo;
case 145:
return WhiteSoxLogo;
case 146:
return MarlinsLogo;
case 147:
return YankeesLogo;
case 158:
return BrewersLogo;
case 108:
return AngelsLogo;
case 109:
return DiamondbacksLogo;
case 110:
return OriolesLogo;
case 111:
return RedSoxLogo;
case 112:
return CubsLogo;
case 113:
return RedsLogo;
case 114:
return GuardiansLogo;
case 115:
return RockiesLogo;
case 116:
return TigersLogo;
case 117:
return AstrosLogo;
case 118:
return RoyalsLogo;
case 119:
return DodgersLogo;
case 120:
return NationalsLogo;
case 121:
return MetsLogo;
default:
return "";
}
}

0 comments on commit 50d40d1

Please sign in to comment.