Stage Indicators

index.pug

main(ng-app="myApp" ng-controller="stagesCtrl")
  //-   select(ng-model="stagesSelected")
  //-     option(value="{{stages1}}") Parallel
  //-     option(value="{{stages2}}") Phased
  //-   pre {{ stagesSelected }}
   
  stage-indicators(stages="stages2")
  
  script(type="text/ng-template" id="stages.html")
    //- pre {{ $ctrl.stages.length }}
    //- pre(ng-repeat="stage in $ctrl.stages") {{ $ctrl.isStageInProgress(stage) }}
    ul
      li(ng-repeat="stage in $ctrl.stages")
        a
          .name {{ stage.name }}
          .indicator
            .ball(
              ng-style="$ctrl.styleStage(stage, 'border-color')"
            )
              | {{ $ctrl.indicatorText }}
            .bar-tracker(
              ng-style="$ctrl.styleStage(stage, 'background')"
            )
            .bar(
              ng-active="$ctrl.isStageInProgress(stage.status)"
              ng-class=""
              ng-style="$ctrl.styleStage(stage, 'background')"
            )
          //- span.stats
           //- | {{ stage.ideas_num }}
          //pre {{$ctrl.styleStage(stage)}}

script.babel

angular.module('myApp', [
  'components.stage-indicators'
])
.controller('stagesCtrl', function($scope) {
  $scope.stages1 = [
    {
      "doctype": "OpenStage",
      "status": "InProgress",
      "couch_id": "b73915da8c8b4bdc9ba9f9b185d877a5",
      "name": "Gather All Important Aspects",
      "accepting_new_ideas": true,
      "ideas_publicly_visible": true,
      "mark_progressed_ideas": false,
      "is_allowed_edit": false,
      "position": 0,
      "custom_color": "#93418b",
      "next_stage": {
        "doctype": "DiscussionStage",
        "status": "InProgress",
        "couch_id": "c0d3f4aecdce457faf4807c13e681054",
        "name": "Discuss Opening Wine With Teeth",
        "accepting_new_ideas": false,
        "ideas_publicly_visible": true,
        "mark_progressed_ideas": false,
        "is_allowed_edit": false,
        "position": 1,
        "custom_color": "#96a651"
      },
      "reject_ideas_automatically": false,
      "message_reject_ideas": null,
      "is_pairwise_concluded": false,
      "forms": [
        {
          "couch_id": "form_idea",
          "name": "idea"
        }
      ],
      "update_message": null,
      "exit_datetime": null,
      "ideas_num": 3,
      "progression_triggers": [],
      "auto_progression_enabled": false,
      "criteria": {},
      "evaluators": {},
      "idea_duration": null,
      "participants": {}
    },
    {
      "doctype": "DiscussionStage",
      "status": "InProgress",
      "couch_id": "c0d3f4aecdce457faf4807c13e681054",
      "name": "Discuss Opening Wine With Teeth",
      "accepting_new_ideas": false,
      "ideas_publicly_visible": true,
      "mark_progressed_ideas": false,
      "is_allowed_edit": false,
      "position": 1,
      "custom_color": "#96a651",
      "next_stage": {
        "doctype": "ReviewStage",
        "status": "InProgress",
        "couch_id": "1c7885496086456dafc78000db9025e5",
        "name": "Evaluate My Best Pencil",
        "accepting_new_ideas": false,
        "ideas_publicly_visible": true,
        "mark_progressed_ideas": false,
        "is_allowed_edit": false,
        "position": 2,
        "custom_color": "#20787a"
      },
      "reject_ideas_automatically": false,
      "message_reject_ideas": null,
      "is_pairwise_concluded": false,
      "forms": [],
      "update_message": null,
      "exit_datetime": null,
      "ideas_num": 3,
      "progression_triggers": [],
      "auto_progression_enabled": false,
      "criteria": {},
      "evaluators": {},
      "idea_duration": null,
      "participants": {}
    },
    {
      "doctype": "ReviewStage",
      "status": "InProgress",
      "couch_id": "1c7885496086456dafc78000db9025e5",
      "name": "Evaluate My Best Pencil",
      "accepting_new_ideas": false,
      "ideas_publicly_visible": true,
      "mark_progressed_ideas": false,
      "is_allowed_edit": false,
      "position": 2,
      "custom_color": "#20787a",
      "next_stage": {
        "doctype": "UpdateStage",
        "status": "InProgress",
        "couch_id": "5b48e09af37c4dd6aafab83e4ddc656f",
        "name": "Develop All Things Quickly",
        "accepting_new_ideas": false,
        "ideas_publicly_visible": true,
        "mark_progressed_ideas": false,
        "is_allowed_edit": false,
        "position": 3,
        "custom_color": "#1f408f"
      },
      "reject_ideas_automatically": false,
      "message_reject_ideas": null,
      "is_pairwise_concluded": false,
      "forms": [],
      "update_message": "You have been selected as a member of the evaluation panel for this challenge. Please log in and evaluate the ideas today.",
      "exit_datetime": null,
      "ideas_num": 1,
      "progression_triggers": [],
      "auto_progression_enabled": false,
      "criteria": {},
      "evaluators": {},
      "idea_duration": null,
      "participants": {}
    },
    {
      "doctype": "UpdateStage",
      "status": "InProgress",
      "couch_id": "5b48e09af37c4dd6aafab83e4ddc656f",
      "name": "Develop All Things Quickly",
      "accepting_new_ideas": false,
      "ideas_publicly_visible": true,
      "mark_progressed_ideas": false,
      "is_allowed_edit": false,
      "position": 3,
      "custom_color": "#1f408f",
      "next_stage": {
        "doctype": "DiscussionStage",
        "status": "InProgress",
        "couch_id": "ff84d8b0db204875b071731d0c4f0fb1",
        "name": "Discuss Nothing At All",
        "accepting_new_ideas": false,
        "ideas_publicly_visible": true,
        "mark_progressed_ideas": false,
        "is_allowed_edit": false,
        "position": 4,
        "custom_color": "#00895b"
      },
      "reject_ideas_automatically": false,
      "message_reject_ideas": null,
      "is_pairwise_concluded": false,
      "forms": [
        {
          "couch_id": "form_idea",
          "name": "idea"
        }
      ],
      "update_message": "Your nomination has been progressed and it is now time to update it. There are additional questions to be answered, so please log in today and complete the new form.",
      "exit_datetime": null,
      "ideas_num": 0,
      "progression_triggers": [],
      "auto_progression_enabled": false,
      "criteria": {},
      "evaluators": {},
      "idea_duration": null,
      "participants": {}
    },
    {
      "doctype": "DiscussionStage",
      "status": "InProgress",
      "couch_id": "ff84d8b0db204875b071731d0c4f0fb1",
      "name": "Discuss Nothing At All",
      "accepting_new_ideas": false,
      "ideas_publicly_visible": true,
      "mark_progressed_ideas": false,
      "is_allowed_edit": false,
      "position": 4,
      "custom_color": "#00895b",
      "next_stage": {
        "doctype": "DiscussionStage",
        "status": "InProgress",
        "couch_id": "0f63139889f1492f89666dc16e9bc186",
        "name": "Discuss All Eventualities",
        "accepting_new_ideas": false,
        "ideas_publicly_visible": true,
        "mark_progressed_ideas": false,
        "is_allowed_edit": false,
        "position": 5,
        "custom_color": "#a69c46"
      },
      "reject_ideas_automatically": false,
      "message_reject_ideas": null,
      "is_pairwise_concluded": false,
      "forms": [],
      "update_message": null,
      "exit_datetime": null,
      "ideas_num": 0,
      "progression_triggers": [],
      "auto_progression_enabled": false,
      "criteria": {},
      "evaluators": {},
      "idea_duration": null,
      "participants": {}
    },
    {
      "doctype": "DiscussionStage",
      "status": "InProgress",
      "couch_id": "0f63139889f1492f89666dc16e9bc186",
      "name": "Discuss All Eventualities",
      "accepting_new_ideas": false,
      "ideas_publicly_visible": true,
      "mark_progressed_ideas": false,
      "is_allowed_edit": false,
      "position": 5,
      "custom_color": "#a69c46",
      "next_stage": {
        "doctype": "ReviewStage",
        "status": "InProgress",
        "couch_id": "e812a8700c40423fa23c3ae2773b75d1",
        "name": "Evaluate Something Here",
        "accepting_new_ideas": false,
        "ideas_publicly_visible": true,
        "mark_progressed_ideas": false,
        "is_allowed_edit": false,
        "position": 6,
        "custom_color": "#b43a1f"
      },
      "reject_ideas_automatically": false,
      "message_reject_ideas": null,
      "is_pairwise_concluded": false,
      "forms": [],
      "update_message": null,
      "exit_datetime": null,
      "ideas_num": 0,
      "progression_triggers": [],
      "auto_progression_enabled": false,
      "criteria": {},
      "evaluators": {},
      "idea_duration": null,
      "participants": {}
    },
    {
      "doctype": "ReviewStage",
      "status": "InProgress",
      "couch_id": "e812a8700c40423fa23c3ae2773b75d1",
      "name": "Evaluate Something Here",
      "accepting_new_ideas": false,
      "ideas_publicly_visible": true,
      "mark_progressed_ideas": false,
      "is_allowed_edit": false,
      "position": 6,
      "custom_color": "#b43a1f",
      "next_stage": {
        "doctype": "CloseStage",
        "status": "InProgress",
        "couch_id": "ae31a6361da6452c88379c1830798dec",
        "name": "Completed The Process",
        "accepting_new_ideas": false,
        "ideas_publicly_visible": true,
        "mark_progressed_ideas": false,
        "is_allowed_edit": false,
        "position": 7,
        "custom_color": "#3c74ae"
      },
      "reject_ideas_automatically": false,
      "message_reject_ideas": null,
      "is_pairwise_concluded": false,
      "forms": [],
      "update_message": "You have been selected as a member of the evaluation panel for this challenge. Please log in and evaluate the ideas today.",
      "exit_datetime": null,
      "ideas_num": 0,
      "progression_triggers": [],
      "auto_progression_enabled": false,
      "criteria": {},
      "evaluators": {},
      "idea_duration": null,
      "participants": {}
    },
    {
      "doctype": "CloseStage",
      "status": "InProgress",
      "couch_id": "ae31a6361da6452c88379c1830798dec",
      "name": "Completed The Process",
      "accepting_new_ideas": false,
      "ideas_publicly_visible": true,
      "mark_progressed_ideas": false,
      "is_allowed_edit": false,
      "position": 7,
      "custom_color": "#3c74ae",
      "next_stage": null,
      "reject_ideas_automatically": false,
      "message_reject_ideas": null,
      "is_pairwise_concluded": false,
      "forms": [],
      "update_message": null,
      "exit_datetime": null,
      "ideas_num": 0,
      "progression_triggers": [],
      "auto_progression_enabled": false,
      "criteria": {},
      "evaluators": {},
      "idea_duration": null,
      "participants": {}
    }
  ]
  $scope.stages2 = [
    {"doctype":"OpenStage","status":"InProgress","couch_id":"27160dfdc13e43beb31a042854633faa","name":"Gather Stuffs","accepting_new_ideas":true,"ideas_publicly_visible":true,"mark_progressed_ideas":false,"is_allowed_edit":false,"position":0,"custom_color":null,"next_stage":{"doctype":"ReviewStage","status":"NotStarted","couch_id":"149d64daabcd4e76a6bdd0916fc17e60","name":"Evaluate THings","accepting_new_ideas":false,"ideas_publicly_visible":true,"mark_progressed_ideas":false,"is_allowed_edit":false,"position":1,"custom_color":"#1fac19"},"reject_ideas_automatically":false,"message_reject_ideas":null,"is_pairwise_concluded":false,"forms":[{"couch_id":"form_idea","name":"idea"}],"update_message":null,"exit_datetime":null,"ideas_num":1,"progression_triggers":[],"auto_progression_enabled":true,"criteria":{},"evaluators":{},"idea_duration":null,"participants":{}},{"doctype":"ReviewStage","status":"NotStarted","couch_id":"149d64daabcd4e76a6bdd0916fc17e60","name":"Evaluate THings","accepting_new_ideas":false,"ideas_publicly_visible":true,"mark_progressed_ideas":false,"is_allowed_edit":false,"position":1,"custom_color":"#1fac19","next_stage":{"doctype":"DiscussionStage","status":"NotStarted","couch_id":"870514ee2a2749c39e59fe2285ced9ab","name":"Discuss Tubes","accepting_new_ideas":false,"ideas_publicly_visible":true,"mark_progressed_ideas":false,"is_allowed_edit":false,"position":2,"custom_color":"#5da885"},"reject_ideas_automatically":false,"message_reject_ideas":null,"is_pairwise_concluded":false,"forms":[],"update_message":"You have been selected as a member of the evaluation panel for this challenge. Please log in and evaluate the ideas today.","exit_datetime":null,"ideas_num":0,"progression_triggers":[],"auto_progression_enabled":false,"criteria":{},"evaluators":{},"idea_duration":null,"participants":{}},{"doctype":"DiscussionStage","status":"NotStarted","couch_id":"870514ee2a2749c39e59fe2285ced9ab","name":"Discuss Tubes","accepting_new_ideas":false,"ideas_publicly_visible":true,"mark_progressed_ideas":false,"is_allowed_edit":false,"position":2,"custom_color":"#5da885","next_stage":{"doctype":"CloseStage","status":"NotStarted","couch_id":"c391be17ce3449f395fd46ffc22c5d8e","name":"Complete Everything","accepting_new_ideas":false,"ideas_publicly_visible":true,"mark_progressed_ideas":false,"is_allowed_edit":false,"position":3,"custom_color":"#9a753d"},"reject_ideas_automatically":false,"message_reject_ideas":null,"is_pairwise_concluded":false,"forms":[],"update_message":null,"exit_datetime":null,"ideas_num":0,"progression_triggers":[],"auto_progression_enabled":false,"criteria":{},"evaluators":{},"idea_duration":null,"participants":{}},{"doctype":"CloseStage","status":"NotStarted","couch_id":"c391be17ce3449f395fd46ffc22c5d8e","name":"Complete Everything","accepting_new_ideas":false,"ideas_publicly_visible":true,"mark_progressed_ideas":false,"is_allowed_edit":false,"position":3,"custom_color":"#9a753d","next_stage":null,"reject_ideas_automatically":false,"message_reject_ideas":null,"is_pairwise_concluded":false,"forms":[],"update_message":null,"exit_datetime":null,"ideas_num":0,"progression_triggers":[],"auto_progression_enabled":false,"criteria":{},"evaluators":{},"idea_duration":null,"participants":{}}
  ]
  console.log('-----------')
});

// Banner Title Header Component Class
class StageIndicatorController {
  constructor($scope) {
    this.$scope = $scope
  }
  
   indicatorText
  
  styleStage = function(stage, type) {
    let style = []
    if (stage.custom_color != null && this.isStageInProgress(stage)) {
      style = {[type]: stage.custom_color}
    }
    
    return style
  };

  isStageInProgress = function(stage) {
    // console.log(stage.status)
    return (stage.status === "InProgress")
  };

  $onInit() {
    
  }
}
angular
.module('components.stage-indicators', [])
.component('stageIndicators', {
  templateUrl: 'stages.html',
  bindings: {
    stages: '<',
  },
  controller: StageIndicatorController,
})
;

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

stage-indicators.markdown

Stage Indicators

A Pen by Jak on CodePen.

License.

style.less

main {
  max-width: 800px;
  border: 1px solid #ececec;
  border-top: 0;
  margin: 0 auto;
}

stage-indicators,
[stage-indicators] {
  > div {
    padding: 1em;
  }
  > ul {
    margin: 1em 0 1em 0;
    padding: 0 1em;
    > li {
      display: inline-block;
      margin: 0 0.75em 1em 0;
      &:last-of-type {
        margin-right: 0;
      }
      > a {
        position: relative;
        min-width: 10em;
        color: #222;
        display: block;
        .name, 
        .stats {
          display: block;
          text-align: center;
          height: 0.5em;
          border-radius: 3px;
          margin-top: 0.25em;
          width: 100%;
          padding: 0 1em 1.75em 1em;
        }
        .indicator {
          position: relative;
          width: 100%;
          height: 2em;
          .bar {       
            position: absolute;
            background: grey;
            height: 2em;
            opacity: 0.5;
            left: 0;
            right: 0;
            border-radius: 1em;
            border-bottom-right-radius: 0.5em;
            border-top-right-radius: 0.5em;
          }
          .bar-tracker {
            height: 2em;
            position: absolute;
            left: 0;
            right: 50%;
            background: darkgrey;
            border-radius: 1em;
            border-bottom-right-radius: 0.5em;
            border-top-right-radius: 0.5em;
            z-index: 2;
          }
          .ball {
            min-width: 2em;
            width: auto;
            min-width: 2em;
            height: 2em;
            display: inline-block;
            text-align: center;
            background: white;
            border: 3px solid black;
            // bottom: -0.25em;
            position: absolute;
            border-radius: 50%;
            left: 0;
            z-index: 5;
          } 
        }
      }
    }
  }
}

styles

<link href="https://z-test.wazoku.com/static/build/clients/fidelity.wazoku.com/main.min.css?v=579f1c9f45280dbe0fd6d287fd534f85" rel="stylesheet" />