Skip to content

Commit 5e8c08d

Browse files
author
Bappy
committed
AV-2: Initialized vue component structure for algorithm visualizer
1 parent 0d137b7 commit 5e8c08d

File tree

12 files changed

+166
-66
lines changed

12 files changed

+166
-66
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"main": "index.js",
1414
"dependencies": {
1515
"core-js": "^3.8.3",
16-
"vue": "^3.2.13"
16+
"vue": "^3.2.13",
17+
"vue-router": "^4.2.2"
1718
},
1819
"devDependencies": {
1920
"@babel/core": "^7.12.16",

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title><%= htmlWebpackPlugin.options.title %></title>
8+
<title>Algorithm Visualizer</title>
99
</head>
1010
<body>
1111
<noscript>

‎src/App.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png">
3-
<HelloWorld msg="Welcome to Your Vue.js App"/>
2+
<Algorithm-visualizer msg="Welcome to Algorithm Visualizer"/>
43
</template>
54

65
<script>
7-
import HelloWorld from './components/HelloWorld.vue'
6+
import AlgorithmVisualizer from './components/AlgorithmVisualizer.vue'
87
98
export default {
109
name: 'App',
1110
components: {
12-
HelloWorld
11+
AlgorithmVisualizer
1312
}
1413
}
1514
</script>

‎src/algorithms/algorithms.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div class="algos">
3+
<h1>Welcome to Algorithm visualizer</h1>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "home-view"
10+
}
11+
</script>
12+
13+
<style scoped>
14+
15+
</style>

‎src/algorithms/search/Search.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div>
3+
<h1>Searching Algorithm</h1>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "SearchView"
10+
}
11+
</script>
12+
13+
<style scoped>
14+
15+
</style>

‎src/algorithms/sort/Sort.vue

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div>
3+
<h1>Sorting Algorithm</h1>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "SortView"
10+
}
11+
</script>
12+
13+
<style scoped>
14+
15+
</style>

‎src/components/AlgorithmVisualizer.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="hello">
3+
<MenuView/>
4+
<router-view></router-view>
5+
</div>
6+
</template>
7+
8+
<script>
9+
10+
import MenuView from "./menu";
11+
export default {
12+
name: 'algorithm-visualizer',
13+
components: {MenuView},
14+
props: {
15+
msg: String
16+
}
17+
}
18+
</script>
19+
20+
<!-- Add "scoped" attribute to limit CSS to this component only -->
21+
<style scoped>
22+
h3 {
23+
margin: 40px 0 0;
24+
}
25+
ul {
26+
list-style-type: none;
27+
padding: 0;
28+
}
29+
li {
30+
display: inline-block;
31+
margin: 0 10px;
32+
}
33+
a {
34+
color: #42b983;
35+
}
36+
</style>

‎src/components/HelloWorld.vue

-58
This file was deleted.

‎src/components/menu.vue

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="top-menu">
3+
<nav>
4+
<ul>
5+
<li v-for="menuItem in menuItems" :key="menuItem.id" :class="{ active: isActive(menuItem.route) }">
6+
<router-link :to="menuItem.route">{{ menuItem.label }}</router-link>
7+
</li>
8+
</ul>
9+
</nav>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import { useRoute } from 'vue-router';
15+
16+
export default {
17+
name: 'menu-view',
18+
setup() {
19+
const route = useRoute();
20+
21+
const menuItems = [
22+
{ id: 1, label: 'Home', route: '/' },
23+
{ id: 2, label: 'Searching Algorithm', route: '/search' },
24+
{ id: 3, label: 'Sorting Algorithm', route: '/sort' },
25+
// Add more menu items for other algorithms
26+
];
27+
28+
const isActive = (routePath) => {
29+
return route.path === routePath;
30+
};
31+
32+
return {
33+
menuItems,
34+
isActive,
35+
};
36+
},
37+
};
38+
</script>
39+
40+
<style>
41+
.top-menu {
42+
background-color: #f0f0f0;
43+
}
44+
45+
nav ul {
46+
list-style-type: none;
47+
padding: 0;
48+
margin: 0;
49+
}
50+
51+
nav ul li {
52+
display: inline-block;
53+
padding: 10px;
54+
}
55+
56+
nav ul li.active {
57+
background-color: #ccc;
58+
}
59+
</style>

‎src/core/_helperFunctions.js

Whitespace-only changes.

‎src/main.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
3-
4-
createApp(App).mount('#app')
3+
import router from './routes/router';
4+
createApp(App).use(router).mount('#app')

‎src/routes/router.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { createRouter, createWebHistory } from 'vue-router';
2+
import SearchView from './../algorithms/search/Search.vue';
3+
import homeView from './../algorithms/algorithms.vue';
4+
import SortView from './../algorithms/sort/Sort.vue';
5+
6+
const routes = [
7+
{ path: '/', component: homeView },
8+
{ path: '/search', component: SearchView },
9+
{ path: '/sort', component: SortView },
10+
// Add more routes for other algorithm components
11+
];
12+
13+
const router = createRouter({
14+
history: createWebHistory(),
15+
routes,
16+
});
17+
18+
export default router;

0 commit comments

Comments
 (0)