diff --git a/availabili.tf/package-lock.json b/availabili.tf/package-lock.json index 9f98ddd..9e94bcf 100644 --- a/availabili.tf/package-lock.json +++ b/availabili.tf/package-lock.json @@ -8,8 +8,11 @@ "name": "availabili.tf", "version": "0.0.0", "dependencies": { + "@jamescoyle/vue-icon": "^0.1.2", + "@mdi/js": "^7.4.47", "axios": "^1.7.7", "bootstrap-icons": "^1.11.3", + "css.gg": "^2.1.4", "moment": "^2.30.1", "moment-timezone": "^0.5.46", "pinia": "^2.2.4", @@ -838,6 +841,12 @@ "node": ">=12" } }, + "node_modules/@jamescoyle/vue-icon": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@jamescoyle/vue-icon/-/vue-icon-0.1.2.tgz", + "integrity": "sha512-KFrImXx5TKIi6iQXlnyLEBl4rNosNKbTeRnr70ucTdUaciVmd9qK9d/pZAaKt1Ob/8xNnX2GMp8LisyHdKtEgw==", + "license": "MIT" + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", @@ -897,6 +906,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@mdi/js": { + "version": "7.4.47", + "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz", + "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==", + "license": "Apache-2.0" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2816,6 +2831,12 @@ "node": ">= 8" } }, + "node_modules/css.gg": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/css.gg/-/css.gg-2.1.4.tgz", + "integrity": "sha512-7eyhXQLNJus5q3AVlYhDFjvVkB1ng1D9EjaBJzvboLfNx60RcFdZ1NinEgJMEA8bkwPwRLfbZ0ADTBXsbdrRgw==", + "license": "SEE LICENSE" + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", diff --git a/availabili.tf/package.json b/availabili.tf/package.json index 1269fc1..6fa0dc2 100644 --- a/availabili.tf/package.json +++ b/availabili.tf/package.json @@ -15,8 +15,11 @@ "openapi-generate": "openapi --input 'http://localhost:8000/apidoc/openapi.json' --output src/client --name AvailabilitfClient" }, "dependencies": { + "@jamescoyle/vue-icon": "^0.1.2", + "@mdi/js": "^7.4.47", "axios": "^1.7.7", "bootstrap-icons": "^1.11.3", + "css.gg": "^2.1.4", "moment": "^2.30.1", "moment-timezone": "^0.5.46", "pinia": "^2.2.4", diff --git a/availabili.tf/src/assets/base.css b/availabili.tf/src/assets/base.css index d484b7e..b9a05e5 100644 --- a/availabili.tf/src/assets/base.css +++ b/availabili.tf/src/assets/base.css @@ -1,5 +1,7 @@ @import url("tf2icons.css"); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); +/*@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css");*/ +@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/solid.min.css"); /* color palette from */ :root { @@ -39,9 +41,20 @@ --flamingo: #dd7878; --flamingo-transparent: #f0c6c655; - --green: #40a02b; --peach: #fe640b; + --green: #40a02b; --yellow: #df8e1d; + /* + --green: #a6e3a1; + --yellow: #f9e2af; +*/ + --green-transparent: color-mix(in srgb, var(--green), transparent 80%); + --yellow-transparent: color-mix(in srgb, var(--yellow), transparent 80%); + /* + --green-transparent-50: #a6e3a1; + --yellow-transparent-50: #f9e2af; +*/ + --lavender: #7287fd; --accent: var(--lavender); --accent-transparent-80: color-mix(in srgb, var(--accent), transparent 80%); diff --git a/availabili.tf/src/assets/main.css b/availabili.tf/src/assets/main.css index e3f2ecc..701beae 100644 --- a/availabili.tf/src/assets/main.css +++ b/availabili.tf/src/assets/main.css @@ -15,6 +15,10 @@ a, padding: 3px; } +a.button { + padding: unset; +} + @media (hover: hover) { a:hover { background-color: var(--accent-transparent); diff --git a/availabili.tf/src/client/index.ts b/availabili.tf/src/client/index.ts index 9d500db..f006045 100644 --- a/availabili.tf/src/client/index.ts +++ b/availabili.tf/src/client/index.ts @@ -13,6 +13,7 @@ export type { OpenAPIConfig } from './core/OpenAPI'; export type { AddPlayerJson } from './models/AddPlayerJson'; export type { CreateTeamJson } from './models/CreateTeamJson'; export type { EditMemberRolesJson } from './models/EditMemberRolesJson'; +export type { PlayerSchema } from './models/PlayerSchema'; export type { PutScheduleForm } from './models/PutScheduleForm'; export type { RoleSchema } from './models/RoleSchema'; export type { TeamInviteSchema } from './models/TeamInviteSchema'; diff --git a/availabili.tf/src/client/models/PlayerSchema.ts b/availabili.tf/src/client/models/PlayerSchema.ts new file mode 100644 index 0000000..7be47da --- /dev/null +++ b/availabili.tf/src/client/models/PlayerSchema.ts @@ -0,0 +1,9 @@ +/* generated using openapi-typescript-codegen -- do not edit */ +/* istanbul ignore file */ +/* tslint:disable */ +/* eslint-disable */ +export type PlayerSchema = { + steamId: string; + username: string; +}; + diff --git a/availabili.tf/src/client/models/ViewTeamMembersResponse.ts b/availabili.tf/src/client/models/ViewTeamMembersResponse.ts index 1391621..c5f977f 100644 --- a/availabili.tf/src/client/models/ViewTeamMembersResponse.ts +++ b/availabili.tf/src/client/models/ViewTeamMembersResponse.ts @@ -4,8 +4,9 @@ /* eslint-disable */ import type { RoleSchema } from './RoleSchema'; export type ViewTeamMembersResponse = { - availability: number; + availability: Array; createdAt: string; + isTeamLeader?: boolean; playtime: number; roles: Array; steamId: string; diff --git a/availabili.tf/src/client/services/DefaultService.ts b/availabili.tf/src/client/services/DefaultService.ts index 8b2166b..54016b4 100644 --- a/availabili.tf/src/client/services/DefaultService.ts +++ b/availabili.tf/src/client/services/DefaultService.ts @@ -5,6 +5,7 @@ import type { AddPlayerJson } from '../models/AddPlayerJson'; import type { CreateTeamJson } from '../models/CreateTeamJson'; import type { EditMemberRolesJson } from '../models/EditMemberRolesJson'; +import type { PlayerSchema } from '../models/PlayerSchema'; import type { PutScheduleForm } from '../models/PutScheduleForm'; import type { TeamInviteSchema } from '../models/TeamInviteSchema'; import type { TeamInviteSchemaList } from '../models/TeamInviteSchemaList'; @@ -71,6 +72,21 @@ export class DefaultService { url: '/api/login/authenticate', }); } + /** + * get_user + * @returns PlayerSchema OK + * @throws ApiError + */ + public getUser(): CancelablePromise { + return this.httpRequest.request({ + method: 'GET', + url: '/api/login/get-user', + errors: { + 401: `Unauthorized`, + 422: `Unprocessable Entity`, + }, + }); + } /** * get * @param windowStart @@ -361,6 +377,31 @@ export class DefaultService { }, }); } + /** + * remove_player_from_team + * @param teamId + * @param targetPlayerId + * @returns any OK + * @throws ApiError + */ + public removePlayerFromTeam( + teamId: string, + targetPlayerId: string, + ): CancelablePromise { + return this.httpRequest.request({ + method: 'DELETE', + url: '/api/team/id/{team_id}/player/{target_player_id}/', + path: { + 'team_id': teamId, + 'target_player_id': targetPlayerId, + }, + errors: { + 403: `Forbidden`, + 404: `Not Found`, + 422: `Unprocessable Entity`, + }, + }); + } /** * view_team_members * @param teamId diff --git a/availabili.tf/src/components/AvailabilityGrid.vue b/availabili.tf/src/components/AvailabilityGrid.vue index d1d21f1..e50f8f6 100644 --- a/availabili.tf/src/components/AvailabilityGrid.vue +++ b/availabili.tf/src/components/AvailabilityGrid.vue @@ -272,10 +272,12 @@ onUnmounted(() => { } .time-slot[selection="1"] { - background-color: var(--accent-transparent-50); + /*background-color: var(--accent-transparent-50);*/ + background-color: var(--yellow-transparent); } .time-slot[selection="2"] { - background-color: var(--accent); + /*background-color: var(--accent);*/ + background-color: var(--green-transparent); } diff --git a/availabili.tf/src/components/PlayerTeamCard.vue b/availabili.tf/src/components/PlayerTeamCard.vue index f15fed6..142db46 100644 --- a/availabili.tf/src/components/PlayerTeamCard.vue +++ b/availabili.tf/src/components/PlayerTeamCard.vue @@ -4,6 +4,8 @@ import { computed, type PropType, ref, watch } from "vue"; import { useTeamsStore } from "../stores/teams"; import { useRosterStore } from "../stores/roster"; import { type ViewTeamMembersResponse, type TeamSchema } from "@/client"; +import SvgIcon from "@jamescoyle/vue-icon"; +import { mdiCrown } from "@mdi/js"; import RoleTag from "../components/RoleTag.vue"; const props = defineProps({ @@ -69,19 +71,34 @@ function updateRoles() { console.log(updatedRoles.value); teamsStore.updateRoles(props.team.id, props.player.steamId, updatedRoles.value); } + +const isUnavailable = computed(() => { + return props.player?.availability[0] == 0 && + props.player?.availability[1] == 0; +});