Automotivated.vroom( ) is an innovative application to show inventory based on search queries of the visitor. It's build on top of Vue and Vuex
Because of several reasons, the development of vroom v0.0.1 has been discontinued. The previous development repository has been deleted and the project has gain a complete reboot.
Starting fresh, starting something awesome! We're expecting the same output, so don't worry! The project is started this time with vue-cli
Thanks to Dezzign we won't rely anymore on a default design (materialize) but are getting our own brandnew look and feel. Customizable to your own needs!
Put on some nice Electro Swing and make sure you got the following applications installed:
<code like a pro>
Here is a little list off applications I use for development. Not required to run the application, but are always nice to have and will definitely make your life a little less frustrating
- Sublime the best editor there is!
- Package Control
- Material Theme
chooseDarkerand switch back toMonokaifrom sublime (default theme in Sublime 3)
tweak the settings withMaterial Theme Config - Vue Syntax Highlighter
- Sass
- Git
- Markdown Preview
- ES6 Syntax
- GitGutter what's changed since last commit
- BeardedSpice don't worry, nobody will hear your music except you!
- Spectacle shortcuts to get the windows where you want them!
</code like a pro>
Hey Ho, Let's Go! (installation)
Open your favorite (fish || zsh) flavoured (oh-my-fish || oh-my-zsh) terminal (iterm) and go to your projects folder and clone this repo!
<code like a pro>
I'm using fish with oh-my-fish and my own feest theme. Install is super easy and can be done with one command:omf install https://github.com/FKobus/theme-feest
</code like a pro>
Start with cloning the project to your own development machine
git clone https://github.com/Automotivated/vroom.gitGo to the root of your clone and install all dependencies
npm installWe're using webpack with hot module replacement for active development. Run the following command in the project root and it will start a webserver at http://localhost:8080/.
npm run devWhen you're ready with making everything possible, run the build command to minify and some more stuff I really don't want to talk about.
npm run buildThe whole app is and should be testable via unit test. New added code must be added to a test. Unit tests are run by Karma with Sinon and Chai.
The following command will run all tests in tests/unit
npm run testStart with adding the vroom minified library to your project (best place should be in the footer somewhere). It's hosted on surge.sh but available via the vroom subdomain:
<script src="//vroom.automotivated.nl/js/vroom.min.js"></script>Include the style package in the <head>
<link rel="stylesheet" href="//vroom.automotivated.nl/css/vroom.min.css">After that, just bind Automotivated.vroom to any valid html element you like. Best practice would be a div.
<div id="vroom"></div>You can bind the app in Javascript by element selector or pass the element.
Automotivated.vroom('#vroom')
// or
Automotivated.vroom(document.querySelector('#vroom'))Before we can show some data, we need to establish a connection to the api server. You can offcourse build you own API. See the Automotivated.engine( ) docs for formatting.
<div id="vroom"></div>
<script>
Automotivated.vroom('#vroom', {
api: {
endpoint: 'http://engine.automotivated.nl/api',
version: 'v1',
key: 'YOUR_UNIQUE_KEY'
}
});
</script>api.endpoint is the api to talk to
api.version is the version of the api
api.key is the key that's used for authentication
overviewCount is the amount of hits per page
overviewRendering is what we default want to start with (rows or grid)
debounce wait with calling the api when this little timer is finished
availableFilters orders and enables filters
language set the language of the application
A typical integration will look something like this
<div id="vroom"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
if (typeof window.Automotivated.vroom == 'function') {
Automotivated.vroom('#vroom', {
api: {
endpoint: 'http://engine.automotivated.nl/api',
version: 'v1',
key: 'YOUR_UNIQUE_KEY'
},
overviewCount: 24,
overviewRendering: 'grid',
debounce: 400,
availableFilters: ['keyword', 'fuel', 'price', 'year', 'body', ...],
language: 'nl'
});
}
});
</script>Because we rebooted the project, this list will grow and grow before release. Then we will add a feature list for upcoming releases.
- Setting up the 1.0.0 environment
- Setup CI (travis)
- Setup CD (surge)
- Setup Coveralls
- Setup Code Coverage
- Start working on documentation
- Setup gitbook
- Autodeploy gitbook to surge?
- Get a design from Dezzign
- Get test coverage as high as necessary
- Internationalization
- History state
- Add an API Automotivated.engine( )
- Create a store module for the app
- options
- api
- global app states
- Create a store module for the filters
- Masterdata
- Active filters
- Reset filters
- Parsing
- Create a store module for the results
- Dummy content
- Create a store module for the stats
- Display (grid/rows)
- Size (results per page)
- Ordering (asc/desc)
- Pagination/offset
-[ ] Components
- Mobile
- Mobile menu
- Sidebar toggle
- Improved media queries
- Active filters
- Filters
- Search filter
- Multi filter
- Multi-search filter
- Range filter
- Energylabel filter
- Color filter
- Loading
- Modal
- Error notifications
- Pagination
- Grid results
- Row results
- Sorting
- Switch overview rendering
- Switch overview count
- Detail page
- Mobile