Skip to content

Commit

Permalink
adding dropdown to teampage
Browse files Browse the repository at this point in the history
  • Loading branch information
Bansal0527 committed Aug 30, 2023
1 parent 7f14e5d commit b0fdfb9
Show file tree
Hide file tree
Showing 6 changed files with 164 additions and 78 deletions.
11 changes: 7 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
"lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"node-sass": "^7.0.1",
Expand Down Expand Up @@ -42,4 +42,7 @@
"git add"
]
}

}


81 changes: 61 additions & 20 deletions src/components/Header.vue
Original file line number Diff line number Diff line change
@@ -1,30 +1,51 @@
<template lang="pug">
v-card.elevation-24
v-app-bar(app clipped-right flat floating style="opacity:1.0")

v-app-bar-nav-icon.hidden-md-and-up(@click.stop="drawer = !drawer")
v-avatar(size="48px")
v-img(src="../assets/logo.jpeg")
v-toolbar-title.hidden-sm-and-down.white--text
span.title.ml-3.mr-5(text style="color:black") Devlup Labs&nbsp;
v-spacer
div.hidden-sm-and-down
v-btn.pa-2.ma-1(text v-for="link in links" :key="link.text" :to="{name:link.text}" label exact) {{link.text}}
v-navigation-drawer(v-model="drawer" app left temporary style="z-index:5")
v-list(dense)
v-list-item( v-for="link in links" :key="link.text" @click="" :to="{name:link.text}" exact)
v-list-item-action
v-icon {{link.icon}}
v-list-item-content
v-list-item-title.grey--text {{link.text}}
v-card.elevation-24
v-app-bar(app clipped-right flat floating style="opacity: 1.0")
v-app-bar-nav-icon.hidden-md-and-up(@click.stop="drawer = !drawer")
router-link(to='/')
v-avatar(size="48px")
v-img(src="../assets/logo.jpeg")
router-link(to='/', style="text-decoration: none")
v-toolbar-title.hidden-sm-and-down.white--text()
span.title.ml-3.mr-5(text style="color: black", ) Devlup Labs&nbsp;
v-spacer
div.hidden-sm-and-down
v-btn(pa-2.ma-1 v-for="link in links" :key="link.text" :to="{ name: link.text }" v-if="link.text !== 'Team' && link.text !== 'CurrentTeam' && link.text !== 'AlumniTeam'" label exact sty style="box-shadow : none") {{ link.text }}
v-btn#menu-activator(pa-2.ma-1 :key="team" style="box-shadow : none") Team
v-menu(activator='#menu-activator')
v-list
v-list-item(pa-2.ma-1 v-for='(item, index) in teams', :key='index', :value='index' :to="{name: item.link}")
v-list-item-title {{ item.text }}

v-navigation-drawer(v-model="drawer" app left temporary style="z-index: 5")
v-list(dense)
v-list-item(v-for="link in links" :key="link.text" :to="{ name: link.text }" v-if="link.text !== 'Team' && link.text !== 'CurrentTeam' && link.text !== 'AlumniTeam'" exact sty style="box-shadow : none")
v-list-item-action
v-icon {{ link.icon }}
v-list-item-content
v-list-item-title.grey--text {{ link.text }}

v-list-item
v-list-item-action
v-icon mdi-account-group
v-menu
template.ml-16(v-slot:activator="{ on }")
v-list-item-content(v-on="on")
v-list-item-title.grey--text Team
v-list
v-list-item(v-for='(item, index) in teams', :key='index', :value='index' :to="{name: item.link}")
v-list-item-title {{ item.text }}



</template>

<script>
export default {
name: "Header",
data() {
return {
show: false,
drawer: null,
links: [
{ text: "Home", icon: "mdi-home" },
Expand All @@ -33,10 +54,30 @@ export default {
{ text: "Timeline", icon: "mdi-timeline-text" },
{ text: "Blog", icon: "mdi-forum" },
{ text: "Videos", icon: "mdi-television" },
{ text: "Team", icon: "mdi-human-male-male" },
{ text: "Team", icon: "mdi-human-male-male" }, // Empty routeName for the dropdown menu
{ text: "WoC", icon: "mdi-briefcase-edit-outline" }
],
teams: [
{
text: "Current Team",
link: "current_team",
icon: "mdi-human-male-male"
},
{
text: "Alumni Team",
link: "alumni_team",
icon: "mdi-human-male-male"
}
]
};
},
computed: {
teamLinks() {
return [
{ text: "Current Team", icon: "mdi-human-male-male" },
{ text: "Alumni Team", icon: "mdi-human-male-male" }
];
}
}
};
</script>
Expand Down
15 changes: 10 additions & 5 deletions src/router/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
Expand Down Expand Up @@ -47,16 +46,22 @@ const routes = [
meta: { title: "Podcast" }
},
{
path: "/team",
name: "Team",
component: () => import("../views/Profile"),
meta: { title: "Team" }
path: "/current_team",
name: "current_team",
component: () => import("../views/CurrentTeam"), // Replace "../views/Profile" with the path to the component for the current team
meta: { title: "Current Team" }
},
{
path: "/WoC",
name: "WoC",
component: () => import("../views/WoC"),
meta: { title: "WoC" }
},
{
path: "/alumni_team",
name: "alumni_team",
component: () => import("../views/AlumniTeam"), // Add the route for the AlumniTeam component
meta: { title: "Alumni Team" }
}
];

Expand Down
86 changes: 42 additions & 44 deletions src/views/Profile.vue → src/views/AlumniTeam.vue
Original file line number Diff line number Diff line change
@@ -1,44 +1,42 @@
<!-- Profile[0]->Profile index -->
<template lang="pug">
div(align='center', justify='center')
div(v-if="loading")
Preloader
div(v-else)
v-container
v-row(justify='left')
v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
ProfileCard(:Profile='Profile')
</template>

<script>
const ProfileCard = () => import("../components/ProfileCard");
const Preloader = () => import("../components/Preloader");
export default {
name: "Profile",
components: { ProfileCard, Preloader },
data: () => ({
loading: true,
profiles: []
}),
methods: {
fetchProfiles() {
const spreadsheetId = "1gEG08lGpzhtVYzmjyOuYF5qlTFAWhvR2FeAuQlIlIuY";
const sheetname = "Profile";
const theKey = process.env.VUE_APP_API;
const url = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${sheetname}?alt=json&key=${theKey}`;
this.loading = true;
fetch(url)
.then(e =>
e.json().then(e => {
this.profiles = [...e.values.slice(1)];
console.log(this.profiles);
})
)
.finally(() => (this.loading = false));
}
},
mounted() {
this.fetchProfiles();
}
};
</script>
<!-- Profile[0]->Profile index -->
<template lang="pug">
div(align='center', justify='center')
div(v-if="loading")
Preloader
div(v-else)
v-container
v-row(justify='left')
v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
ProfileCard(:Profile='Profile')
</template>

<script>
const ProfileCard = () => import("../components/ProfileCard");
const Preloader = () => import("../components/Preloader");
export default {
name: "Profile",
components: { ProfileCard, Preloader },
data: () => ({
loading: true,
profiles: []
}),
methods: {
fetchProfiles() {
const url = `https://script.google.com/macros/s/AKfycbwprDq5bguYad1gsfCLxbWxM1YXZfVlWiXYK1WCbrPj5WO8JbxjqSbnieVIoosOgMbVMA/exec`;
this.loading = true;
fetch(url)
.then(e =>
e.json().then(e => {
console.log(e);
this.profiles = e;
console.log(this.profiles);
})
)
.finally(() => (this.loading = false));
}
},
mounted() {
this.fetchProfiles();
}
};
</script>
42 changes: 42 additions & 0 deletions src/views/CurrentTeam.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!-- Profile[0]->Profile index -->
<template lang="pug">
div(align='center', justify='center')
div(v-if="loading")
Preloader
div(v-else)
v-container
v-row(justify='left')
v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
ProfileCard(:Profile='Profile')
</template>

<script>
const ProfileCard = () => import("../components/ProfileCard");
const Preloader = () => import("../components/Preloader");
export default {
name: "Profile",
components: { ProfileCard, Preloader },
data: () => ({
loading: true,
profiles: []
}),
methods: {
fetchProfiles() {
const url = `https://script.google.com/macros/s/AKfycbwprDq5bguYad1gsfCLxbWxM1YXZfVlWiXYK1WCbrPj5WO8JbxjqSbnieVIoosOgMbVMA/exec`;
this.loading = true;
fetch(url)
.then(e =>
e.json().then(e => {
console.log(e);
this.profiles = e;
console.log(this.profiles);
})
)
.finally(() => (this.loading = false));
}
},
mounted() {
this.fetchProfiles();
}
};
</script>
7 changes: 2 additions & 5 deletions src/views/Project.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,13 @@ export default {
}),
methods: {
fetchProjects() {
const spreadsheetId = "1gEG08lGpzhtVYzmjyOuYF5qlTFAWhvR2FeAuQlIlIuY";
const theKey = process.env.VUE_APP_API;
const sheetname = "Project";
const url = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${sheetname}?key=${theKey}`;
const url = `https://script.google.com/macros/s/AKfycbxsb_2WN21NJ4p_yEVS8DoCIcs-3lL9VlB5zgbGXeEhfERHkjkIcFOTvkhw1m69irgH7g/exec`;
this.loading = true;
fetch(url)
.then(e =>
e.json().then(e => {
console.log(e);
this.projects = [...e.values.slice(1)];
this.projects = e;
})
)
.finally(() => (this.loading = false));
Expand Down

0 comments on commit b0fdfb9

Please sign in to comment.