1nicerOli
/
minifig-collector
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add search; Icon; api; base;

main
Nero Ignis 3 years ago
parent
447553a7d7
commit
8782fd9d2f
12 changed files with 2542 additions and 168 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2469
      package-lock.json
  2. 16
      package.json
  3. BIN
      public/img/minifig.ico
  4. BIN
      public/img/minifig.png
  5. 4
      public/index.html
  6. 79
      src/App.vue
  7. 1
      src/css/app.scss
  8. 2
      src/main.js
  9. 16
      src/router/index.js
  10. 57
      src/views/Explore.vue
  11. 18
      src/views/Home.vue
  12. 48
      src/views/Search.vue

2469
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
Unescape View File

@ -8,19 +8,31 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@popperjs/core": "^2.11.0",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"bootswatch": "^5.1.3",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"fontawesome": "^5.6.3",
"izitoast": "^1.4.0",
"moment": "^2.29.1",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-router": "^4.0.0-0" "vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0", "@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0" "eslint-plugin-vue": "^7.0.0",
"node-sass": "^6.0.1",
"sass": "^1.43.5",
"sass-loader": "^10.2.0"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,

BIN
public/img/minifig.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

BIN
public/img/minifig.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
public/index.html
Unescape View File

@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="/img/minifig.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title>Minifig Collector</title>
</head> </head>
<body> <body>
<noscript> <noscript>

79
src/App.vue
Unescape View File

@ -1,30 +1,81 @@
<template> <template>
<div id="nav"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<router-link to="/">Home</router-link> | <div class="container">
<router-link to="/about">About</router-link> <a class="navbar-brand" href="#">
</div> <img src="/img/minifig.png" alt="" class="navbar-icon">
<router-view/> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02"
aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<router-link class="nav-link" to="/">Explore</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/">Collection</router-link>
</li>
<!-- <li class="nav-item dropdown">-->
<!-- <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>-->
<!-- <div class="dropdown-menu">-->
<!-- <router-link class="nav-item" to="/">Home</router-link> |-->
<!-- <router-link class="nav-item" to="/about">About</router-link>-->
<!-- <div class="dropdown-divider"></div>-->
<!-- </div>-->
<!-- </li>-->
</ul>
<div class="d-flex">
<input class="form-control me-sm-2" type="text" placeholder="Search" v-model="searchTerm">
<router-link class="btn btn-secondary my-2 my-sm-0" to="/">Search</router-link>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="header">
<br/>
<router-view/>
</div>
</div>
</template> </template>
<script>
export default {
name: 'App',
data() {
return {
searchTerm: ''
}
}
}
</script>
<style> <style>
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
} }
#nav { #nav {
padding: 30px; padding: 30px;
} }
#nav a { #nav a {
font-weight: bold; font-weight: bold;
color: #2c3e50; color: #2c3e50;
} }
#nav a.router-link-exact-active { #nav a.router-link-exact-active {
color: #42b983; color: #42b983;
}
.navbar-icon {
height: 1.7em;
} }
</style> </style>

1
src/css/app.scss
Unescape View File

@ -0,0 +1 @@
@import 'bootstrap';

2
src/main.js
Unescape View File

@ -1,5 +1,7 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import './css/app.scss'
import 'bootstrap'
createApp(App).use(router).mount('#app') createApp(App).use(router).mount('#app')

16
src/router/index.js
Unescape View File

@ -1,20 +1,20 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue' import Explore from "@/views/Explore";
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'Home', name: 'Explore',
component: Home component: Explore
}, },
{ {
path: '/about', path: '/about',
name: 'About', name: 'About',
// route level code-splitting },
// this generates a separate chunk (about.[hash].js) for this route {
// which is lazy-loaded when the route is visited. path: '/search',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') name: 'Search',
} },
] ]
const router = createRouter({ const router = createRouter({

57
src/views/Explore.vue
Unescape View File

@ -0,0 +1,57 @@
<template>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" v-model="searchTerm" v-on:keydown.enter="loadSearchResults"/>
</div>
<div class="col-md-12">
<hr v-if="results.length > 0">
</div>
<div class="col col-md-3" v-for="(minifig, minifigIndex) in results" :key="minifigIndex">
<div class="card">
<img :src="minifig.set_img_url ?? placeholder" alt="" class="minifig-image"/>
<div class="card-footer">{{ minifig.name }}</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Explore',
data() {
return {
searchTerm: '',
placeholder: '/img/minifig.png',
results: []
}
},
components: {},
methods: {
loadSearchResults() {
let component = this;
axios.get(
'https://rebrickable.com/api/v3/lego/minifigs/?key=197650df271511a5b9f4938301b4ef80&search=' + component.searchTerm
).then((response) => {
component.results = response.data.results;
// }).catch((error) => {
//
})
}
}
}
</script>
<style>
.card {
margin-bottom: 1em;
}
.minifig-image {
max-height: 13em;
width: auto;
margin: 0 auto;
}
</style>

18
src/views/Home.vue
Unescape View File

@ -1,18 +0,0 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>

48
src/views/Search.vue
Unescape View File

@ -0,0 +1,48 @@
<template>
<div class="home">
<input type="text" class="form-control" v-model="updatedSearchTerm"/>
<div class="card" v-for="(minifigIndex, minifig) in results.results" v-key="minifigIndex">
<div class="card-img">
<img src="" alt=""/>
</div>
<div class="card-content">{{ minifig.name }}</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Search',
props: {
searchTerm: {
default: '',
type: String
}
},
data() {
return {
updatedSearchTerm: '',
results: []
}
},
components: {},
mounted() {
this.loadSearchResults();
},
methods: {
loadSearchResults() {
let component = this;
axios.get(
'https://rebrickable.com/api/v3/lego/minifigs/?key=197650df271511a5b9f4938301b4ef80&search='+this.searchTerm
).then((response) => {
component.results = response.data;
// }).catch((error) => {
//
})
}
}
}
</script>
Write Preview
Loading…
Cancel
Save