Giter Club home page Giter Club logo

vacation's Introduction

Vacation

An employee vacation day tracking web app. It is a single-page webapp that uses Rails and AngularJS. The Rails part is a server API and handles authentication/authorization.

The AngularJS part is the user interface that allows the user to manage vacation days by interacting directly with a calendar. And the best part is, because the Angular app never waits on the server, it is very fast and responsive.

Screenshot

Table of Contents

Installation

First, install Rails with gem install rails. Then, clone or download the project. From the project directory, run bundle install. Finally, run rails server and navigate your browser to localhost:8000.

Goals

The are 3 main goals of this project. It should be easy to:

  1. Add and edit people's information.
  2. Add vacation day requests to the app for each employee
  3. See who has requested any given day off

This app achieves these goals by basing its user interface around interacting directly with a calendar. Adding days, removing days, or managing the requests for a given day are as simple as clicking on a calendar.

Concepts

Preloading data

When the app loads, Rails creates a data preload. This preload is inserted into the AngularJS app. AngularJS uses this preload to create its own data models.

Code organization

For the client-side part of the app, Vacation makes heavy use of AngularJS's modules and dependency injection system. All modules are defined first with their depdencies. Then, controllers, directives, filters, and services are added to each module.

Selecting dates

It is necessary for the user to be able to add an entire year's worth of dates for each employee very efficiently. This is handled by using a delay when a day on the calendar is clicked on, allowing the user to click on as many days as they want before processing this list of dates.

By doing this, the user can select or request as many days as she wants when making requests.

Selecting dates

Updating the url

Vacation is a single page app, allowing it to be very quick and responsive. We still want to update the url when using different parts of the app, so the user can bookmark different pages. This is accomplished with a two step process.

First, we have a service that gives us a skipNextReload method. This service is used when changing the group or employee, and prevents Angular from initating a route change and reloading the controller and template.

Second, if the employee or group id is present as a route parameter when the app loads, we set the correct employee/group. This lets us load the app into the correct state from a bookmark or page refresh.

Tests

Vacation uses tests to speed up development and to make the app more likely to be correct. To run the tests, go to the project directory and run rake test.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.