Skip to content

Commit 0bd20b8

Browse files
ahmetkucukogluahmetkucukoglu
committed
Added frontend side
1 parent 23d874e commit 0bd20b8

25 files changed

+26985
-1
lines changed

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
# Blockchain Uygulama Geliştirme
22

33
1.Bölüm Kontrat Oluşturma :
4-
[ahmetkucukoglu.com/blockchain-uygulama-gelistirme-1-kontrat-olusturma](https://www.ahmetkucukoglu.com/blockchain-uygulama-gelistirme-1-kontrat-olusturma)
4+
[ahmetkucukoglu.com/blockchain-uygulama-gelistirme-1-kontrat-olusturma](https://www.ahmetkucukoglu.com/blockchain-uygulama-gelistirme-1-kontrat-olusturma)
5+
6+
2.Bölüm UI İle Etkileşim :
7+
[ahmetkucukoglu.com/blockchain-uygulama-gelistirme-2-ui-ile-etkilesim](https://www.ahmetkucukoglu.com/blockchain-uygulama-gelistirme-2-ui-ile-etkilesim)

‎backend/build/contracts/Migrations.json

Lines changed: 931 additions & 0 deletions
Large diffs are not rendered by default.

‎backend/build/contracts/MockedOrders.json

Lines changed: 844 additions & 0 deletions
Large diffs are not rendered by default.

‎backend/build/contracts/Orders.json

Lines changed: 10881 additions & 0 deletions
Large diffs are not rendered by default.

‎frontend/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎frontend/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# frontend
2+
3+
## Project setup
4+
```
5+
npm install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
npm run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
npm run build
16+
```
17+
18+
### Lints and fixes files
19+
```
20+
npm run lint
21+
```
22+
23+
### Customize configuration
24+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎frontend/babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎frontend/package-lock.json

Lines changed: 13431 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "frontend",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"@metamask/detect-provider": "^1.2.0",
12+
"core-js": "^3.6.5",
13+
"vue": "^2.6.11",
14+
"vuex": "^3.6.2",
15+
"web3": "^1.3.6"
16+
},
17+
"devDependencies": {
18+
"@vue/cli-plugin-babel": "~4.5.0",
19+
"@vue/cli-plugin-eslint": "~4.5.0",
20+
"@vue/cli-service": "~4.5.0",
21+
"babel-eslint": "^10.1.0",
22+
"eslint": "^6.7.2",
23+
"eslint-plugin-vue": "^6.2.2",
24+
"vue-template-compiler": "^2.6.11"
25+
},
26+
"eslintConfig": {
27+
"root": true,
28+
"env": {
29+
"node": true
30+
},
31+
"extends": [
32+
"plugin:vue/essential",
33+
"eslint:recommended"
34+
],
35+
"parserOptions": {
36+
"parser": "babel-eslint"
37+
},
38+
"rules": {}
39+
},
40+
"browserslist": [
41+
"> 1%",
42+
"last 2 versions",
43+
"not dead"
44+
]
45+
}

‎frontend/public/favicon.ico

4.19 KB
Binary file not shown.

‎frontend/public/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
9+
<title>
10+
<%= htmlWebpackPlugin.options.title %>
11+
</title>
12+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
13+
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
14+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
15+
</head>
16+
17+
<body>
18+
<noscript>
19+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
20+
Please enable it to continue.</strong>
21+
</noscript>
22+
<div class="container">
23+
<div id="app"></div>
24+
</div>
25+
<!-- built files will be auto injected -->
26+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
27+
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
28+
crossorigin="anonymous"></script>
29+
</body>
30+
31+
</html>

‎frontend/src/App.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div id="app">
3+
<StatusBar />
4+
<Products />
5+
<Cart />
6+
<Orders />
7+
</div>
8+
</template>
9+
10+
<script>
11+
import StatusBar from "./components/StatusBar.vue";
12+
import Products from "./components/Products.vue";
13+
import Cart from "./components/Cart.vue";
14+
import Orders from "./components/Orders.vue";
15+
16+
export default {
17+
name: "App",
18+
components: {
19+
StatusBar,
20+
Products,
21+
Cart,
22+
Orders,
23+
},
24+
methods: {},
25+
};
26+
</script>
27+
28+
<style>
29+
</style>

‎frontend/src/assets/logo.png

6.69 KB
Loading

‎frontend/src/components/Cart.vue

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<div id="cart" class="card shadow-sm mt-3" v-if="this.cart.items.length > 0">
3+
<div class="card-body">
4+
<h5 class="card-title">Cart</h5>
5+
<hr />
6+
<div class="row fw-bold">
7+
<div class="col">Name</div>
8+
<div class="col">Quantity</div>
9+
<div class="col">Total Price</div>
10+
<div class="col"></div>
11+
</div>
12+
<CartItem
13+
:key="cartItem.productId"
14+
:cartItem="cartItem"
15+
v-for="cartItem in this.cart.items"
16+
@removeProductFromCart="removeProductFromCart"
17+
/>
18+
19+
<button
20+
type="button"
21+
class="btn btn-sm btn-outline-primary"
22+
@click="createOrder"
23+
>
24+
<i class="bi bi-box-seam"></i> Create order
25+
</button>
26+
</div>
27+
</div>
28+
</template>
29+
30+
<script>
31+
import CartItem from "./CartItem.vue";
32+
import { eventHub } from "../main";
33+
34+
export default {
35+
name: "Cart",
36+
components: {
37+
CartItem,
38+
},
39+
props: {},
40+
data() {
41+
return {
42+
cart: {
43+
items: [],
44+
},
45+
};
46+
},
47+
methods: {
48+
addProductToCart(productId, productName, productPrice, deliveryDate) {
49+
var cartItems = this.cart.items.filter((x) => x.productId == productId);
50+
51+
if (cartItems.length == 0) {
52+
this.cart.items.push({
53+
productId: productId,
54+
productName: productName,
55+
productPrice: productPrice,
56+
deliveryDate: deliveryDate,
57+
quantity: 1,
58+
});
59+
} else {
60+
cartItems[0].quantity++;
61+
}
62+
},
63+
removeProductFromCart(productId) {
64+
let items = this.cart.items.filter((x) => x.productId != productId);
65+
this.cart.items = items;
66+
},
67+
async createOrder() {
68+
let totalPrice = this.cart.items
69+
.map((x) => x.productPrice * x.quantity)
70+
.reduce((p, c) => p + c);
71+
72+
let deliveryDate = new Date(
73+
Math.max.apply(
74+
null,
75+
this.cart.items.map((x) => new Date(x.deliveryDate))
76+
)
77+
);
78+
79+
eventHub.$emit("createOrder", { totalPrice, deliveryDate });
80+
81+
this.cart.items = [];
82+
},
83+
},
84+
created() {
85+
eventHub.$on("addProductToCart", (product) => {
86+
this.addProductToCart(
87+
product.id,
88+
product.name,
89+
product.price,
90+
product.deliveryDate
91+
);
92+
});
93+
},
94+
};
95+
</script>
96+
97+
<style scoped>
98+
</style>

‎frontend/src/components/CartItem.vue

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="row mt-3">
3+
<div class="col">{{ cartItem.productName }}</div>
4+
<div class="col">
5+
<input
6+
type="text"
7+
class="form-control count"
8+
v-model="cartItem.quantity"
9+
/>
10+
</div>
11+
<div class="col">{{ getTotalPrice }} ETH</div>
12+
<div class="col">
13+
<button
14+
type="button"
15+
class="btn btn-sm btn-outline-secondary"
16+
@click="removeProductFromCart"
17+
>
18+
<i class="bi bi-cart-dash"></i> Remove from cart
19+
</button>
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script>
25+
export default {
26+
name: "CartItem",
27+
props: {
28+
cartItem: Object,
29+
},
30+
methods: {
31+
removeProductFromCart() {
32+
this.$emit("removeProductFromCart", this.cartItem.productId);
33+
},
34+
},
35+
computed: {
36+
getTotalPrice() {
37+
var totalPrice = this.cartItem.quantity * this.cartItem.productPrice;
38+
39+
return totalPrice;
40+
},
41+
},
42+
};
43+
</script>
44+
45+
<style scoped>
46+
.count {
47+
width: 45px;
48+
}
49+
</style>

0 commit comments

Comments
 (0)