Skip to content

Commit

Permalink
fix Navbar, add footer, update App.vue import, make Navbar work
Browse files Browse the repository at this point in the history
  • Loading branch information
@yennanliu
yennanliu committed Dec 6, 2023
1 parent e620d01 commit 102b394
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 72 deletions.
115 changes: 49 additions & 66 deletions ShoppingCart/Frondend/ecommerce-ui/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,42 @@
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/category">Category</router-link> |
<router-link to="/wishlist">Wishlist</router-link> |
<router-link to="/product">Product</router-link> |
<router-link to="/admin/category">Category (admin)</router-link> |
<router-link to="/admin/wishlist">Wishlist (admin)</router-link> |
<router-link to="/admin/product">Product (admin)</router-link> |
<router-link to="/order">Order</router-link> |
<router-link to="/cart">Cart</router-link> |
<router-link to="/signup">Signup</router-link> |
<router-link to="/signin">Signin</router-link>
</nav>

<!--
https://youtu.be/VZ1NV7EHGJw?si=FtsSuMndmHLiBwsc&t=710
delcare global variable via router view
-> so baseURL, categories are visible to ALL views
-->
<router-view :baseURL="baseURL" :categories="categories"> </router-view>
<div>
<Navbar
:cartCount="cartCount"
@resetCartCount="resetCartCount"
v-if="!['Signup', 'Signin'].includes($route.name)"
/>
<div style="min-height: 60vh">
<router-view
v-if="products && categories"
:baseURL="baseURL"
:products="products"
:categories="categories"
@fetchData="fetchData"
>
</router-view>
</div>
<Footer v-if="!['Signup', 'Signin'].includes($route.name)" />
</div>
</template>

<script>
import axios from "axios";
var axios = require("axios");
import Navbar from "./components/Navbar.vue";
import Footer from "./components/Footer.vue";
export default {
// components: {},
data() {
return {
baseURL: "http://localhost:9999/", // this baseURL will be read by all views
//baseURL: "https://limitless-lake-55070.herokuapp.com/",
baseURL: "http://localhost:9999/",
products: null,
categories: null,
key: 0,
token: null,
cartCount: 0,
};
},
components: { Footer, Navbar },
methods: {
async fetchData() {
// fetch products
Expand All @@ -51,51 +50,35 @@ export default {
.get(this.baseURL + "category/")
.then((res) => (this.categories = res.data))
.catch((err) => console.log(err));
//fetch cart items
if (this.token) {
await axios.get(`${this.baseURL}cart/?token=${this.token}`).then(
(response) => {
if (response.status == 200) {
// update cart
this.cartCount = Object.keys(response.data.cartItems).length;
}
},
(error) => {
console.log(error);
}
);
}
},
resetCartCount() {
this.cartCount = 0;
},
},
mounted() {
/**
* // NOTE!!! via this method call, we can get products, categories
* when launch FE app (App.vue is imported to main.js as main FE entry point),
* so all other views (e.g. Product, EditProduct, Category, EditCategory...)
* can use products, categories directly via
*
* props: ["baseURL", "categories", "products"],
*
* this.categories
* this.products
*
* ..
*
* via above trick, we can simplify our code, and make logic more clear, simple
*/
this.token = localStorage.getItem('token');
console.log("this.token = " + this.token)
this.fetchData();
this.token = localStorage.getItem("token");
this.fetchData();
},
};
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
html {
overflow-y: scroll;
}
</style>
</style>
126 changes: 126 additions & 0 deletions ShoppingCart/Frondend/ecommerce-ui/src/components/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<template>
<footer>
<div class="container pt-5">
<div class="row">
<div class="col-md-3 col-6">
<ul style="list-style-type: none">
<li class="text-light font-weight-bold pb-2">Get to Know Us</li>
<li>
<a class="footer-link font-weight-light" href="#">About Us</a>
</li>
<li>
<a class="footer-link font-weight-light" href="#">Android App</a
><br />
</li>
<li>
<a class="footer-link font-weight-light" href="#">iOS App</a
><br />
</li>
</ul>
</div>

<div class="col-md-3 col-6">
<ul style="list-style-type: none">
<li class="text-light font-weight-bold">Connect With Us</li>
<li>
<a class="footer-link font-weight-light" href="#">Facebook</a>
</li>
<li>
<a class="footer-link font-weight-light" href="#">Twitter</a
><br />
</li>
<li>
<a class="footer-link font-weight-light" href="#">Instagram</a
><br />
</li>
</ul>
</div>

<div class="col-md-3 col-6">
<ul style="list-style-type: none">
<li class="text-light font-weight-bold">Make Money With Us</li>
<li>
<a class="footer-link font-weight-light" href="#">Sell with Us</a>
</li>
<li>
<a class="footer-link font-weight-light" href="#"
>Become an Affiliate</a
><br />
</li>
<li>
<a class="footer-link font-weight-light" href="#"
>Advertise Your Products</a
><br />
</li>
</ul>
</div>

<div class="col-md-3 col-6">
<ul style="list-style-type: none">
<li class="text-light font-weight-bold">Let Us Help You</li>
<li>
<a class="footer-link font-weight-light" href="#"
>Return Centre</a
>
</li>
<li>
<a class="footer-link font-weight-light" href="#"
>100% Purchase Protection</a
><br />
</li>
<li>
<a class="footer-link font-weight-light" href="#">Help</a><br />
</li>
<li>
<a class="footer-link font-weight-light" href="#">App Download</a
><br />
</li>
</ul>
</div>
</div>

<div class="row">
<div class="col-12">
<div class="text-center py-5">
<img id="logo" src="../assets/icon2.png" />
</div>
</div>
</div>
</div>
</footer>
</template>

<script>
export default {
name: "Footer",
};
</script>

<style>
footer {
margin-top: 100px;
background-color: #232f3e;
font-size: 16px;
}
li {
padding-left: 0;
padding-bottom: 10px;
}
a {
text-decoration: none;
}
.footer-link {
color: #ddd;
}
#logo {
width: 150px;
}
footer {
font-family: "Roboto", sans-serif;
}
</style>
14 changes: 8 additions & 6 deletions ShoppingCart/Frondend/ecommerce-ui/src/components/Navbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@
Browse
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<!-- <router-link class="dropdown-item" :to="{ name: 'Home' }"
<router-link class="dropdown-item" :to="{ name: 'Home' }"
>Home</router-link
> -->
>
<router-link class="dropdown-item" :to="{ name: 'Product' }"
>Product</router-link
>
Expand Down Expand Up @@ -119,19 +119,21 @@
</div>
</li>

<!-- <li class="nav-item">
<li class="nav-item">
<router-link class="nav-link text-light" :to="{ name: 'Order' }"
>Orders</router-link
>
</li> -->
<!-- <li class="nav-item">
</li>

<li class="nav-item">
<div id="cart">
<span id="nav-cart-count">{{ cartCount }}</span>
<router-link class="text-light" :to="{ name: 'Cart' }"
><i class="fa fa-shopping-cart" style="font-size: 36px"></i
></router-link>
</div>
</li> -->
</li>

</ul>
</div>
</nav>
Expand Down

0 comments on commit 102b394

Please sign in to comment.