joseayram / timeline-sc

Timeline Script for SC

Timeline for Proposals

This codebase allows us to create timelines quickly.

Showcase

Install

1. Clone the repo: git clone https://github.com/joseayram/timeline-sc.git

2. Install the Gems: bundle install

3. Run: rackup

How

Create a yaml file with the name that you want (without spaces) and put into /public/estimates/

Add information as needed following the structure:

1. month: This action display a circle with the month name.
2. iteration: is the node for iteration. You shouldn't put any text here.
3. hours: Specify the hours for your iteration. It's a integer value.
4. tasks: This node is necesary to group the tasks. You shouldn't put any text here.
   1. task: Put here the name of the task. This node can repeat anytimes how you need.

Example (estimates/example.yml):

- month: June
- iteration:
    hours: 40
    tasks:
      - task: Example task 1
      - task: Example task 2
      - task: Example task 3
      - task: Example task 4
- iteration:
    hours: 40
    tasks:
      - task: Example task 5
      - task: Example task 6
      - task: Example task 7
- iteration:
    hours: 10
    tasks:
      - task: Example task 8
- month: July

NOTE: Remember to follow the indentation for yaml files: two spaces.

Can you see the site with url: http://yourhost/#name-of-your-file (without extension)

Demo:

http://timeline-sc.herokuapp.com/#example

timeline-sc's Issues

YAML Parsing Tips

Ok... tengo que confesar que estaba escribiendo Javascript y tirando algunas flechas

---->
--------------->
---->

Me di cuenta de lo siguiente:

Actualmente tenemos el YAML asi:

- iteration:
    hours: 20
    tasks:
      - task: UI / UX User flows
      - task: Base App Installation and Configuration
      - task: Login / Authentication

- iteration:
    hours: 30
    tasks:
      - task: HTML and CSS of User Flows
      - task: CRUD for Customer
      - task: CRUD for Project
      - task: CRUD for Schemas
- iteration:
    hours: 30
    tasks:
      - task: Upload CSV Schema
      - task: Matching of Schema to CSV
      - task: Adapting CSVLint to match our needs
- iteration:
    hours: 40
    tasks:
      - task: Reporting (Logging, Viewing)
      - task: Q/A

Esto hace que en nuestro codigo tengamos on poco de "objects" A la:

Cosa que para entrar a esos objetos tenemos que hacer:

configYML[6].iteration.tasks[0]
configYML[6].iteration.tasks[0]["task"]

configYML[6].iteration.tasks[1]
configYML[6].iteration.tasks[1]["task"]

Cosa que hace que nuestro codigo de Javascript sea bastante verbose. Estamos basicamente creando un "objeto" con una sola propiedad.

Creo que seria mejor tener un YAML de esta manera:

- iteration:
  hours: 40
  tasks:
    - UI / UX User flows
    - Base App Installation and Configuration
    - Login / Authentication

Cosa que tengamos un "objeto" que se vea asi:

Para poder usarlo de esta manera:

configYML[0]
Object {iteration: null, hours: 40, tasks: Array[3]}
configYML[0].tasks
["UI / UX User flows", "Base App Installation and Configuration", "Login / Authentication"]

Substring to month name

Limit the month name to three characters

YAML with more attributes brake current JS

Let's say we have a YAML like:

- info:
    - title: Example
    - subtitle: Example
    - descrition: The Project: Develop a web based app that validates CSVs based on the open source library CSV lint.


- month: October
- iteration:
    hours: 20
    tasks:
      - task: UI / UX User flows
      - task: Base App Installation and Configuration
      - task: Login / Authentication

- iteration:
    hours: 30
    tasks:
      - task: HTML and CSS of User Flows
      - task: CRUD for Customer
      - task: CRUD for Project
      - task: CRUD for Schemas
- iteration:
    hours: 30
    tasks:
      - task: Upload CSV Schema
      - task: Matching of Schema to CSV
      - task: Adapting CSVLint to match our needs
- iteration:
    hours: 40
    tasks:
      - task: Reporting (Logging, Viewing)
      - task: Q/A

It produces the following error:

Uncaught ReferenceError: $element is not defined main.js:34loopElements main.js:34(anonymous function) main.js:8j jquery-1.11.0.min.js:2k.fireWith jquery-1.11.0.min.js:2n.extend.ready jquery-1.11.0.min.js:2K jquery-1.11.0.min.js:2

This is because we asume the YAML will always be on the format we want.

  /**
   * Loop all Elements in Yaml File
   */
  function loopElements(element, index, array) {
    if (configYML[index].month != undefined) {
      $element = createMonth(configYML[index].month);
    } else if (configYML[index].iteration != undefined) {
      $element = createIteration(index);
    }

    $(".timeline").append($element);
  }

On that branching IF, there is no else to account for cases that we don't know. I think there is always a must to have an else clause when we depend on stuff we do inside conditionals.