JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="interaction-default">

  <script type="text/html" id="no-interaction-tmpl">
    <div>No Template available...</div>
  </script>
  <script type="text/html" id="interaction-template-call">
    Hello, a
    <span data-bind="text: interactionType"></span>
    <span data-bind="text: $data.customerInfo"></span>
  </script>

  <script type="text/html" id="interaction-template-email">
    Hello, i'm a
    <span data-bind="text: interactionType"></span>
  </script>
 <script type="text/html" id="interaction-template-chat">
    Hello, i'm a
    <span data-bind="text: interactionType"></span>
  </script>


  <script type="text/html" id="tab">
    <div class="tab-container">
      <div class="tab" data-bind="click: $root.tab_clicked">
        <span data-bind="text: interactionType"></span>
        <span data-bind="text: customerInfo"></span>
     </div>
    </div>
  </script>

  <div data-bind="template: { name: 'tab', foreach: interactions }"></div>

  </div>


  <div data-bind="template: { name: $root.currentInteractionTemplate, data: $root.currentInteraction }">

  </div>

CSS

.tab-container {
  background-color: #85acc6;
  height: 42px;
}

.tab {
  height: 40px;
}

.tab span {
  line-height: 40px;
  vertical-align: middle;
  padding: 0 2px 0 2px;
  font-weight: 600;
}

.tab-active {
  background-color: #234a65;
  border-bottom: 2px solid #fff;
  color: #fff;
}

.tab-inactive {
  background-color: #6d8ea2;
  border-bottom: 2px solid #6d8ea2;
}

.tab-active .tab-counter {
  color: #fff;
}

.tab,
.tab-counter {
  color: #4d4b4b;
}

.right-chat,
.right-call {
  width: 50%;
  height: 100%;
}

JavaScript

function mainViewModel(parms) {
  var self = this;
  this.interactions = ko.observableArray([]);
  this.currentInteraction = ko.observable();
  this.currentInteractionTemplate = function(data) {
    if (typeof(data) === 'undefined')
      return "no-interaction-tmpl";

    return "interaction-template-" + data.interactionType
  }


  this.addInteraction = function(interaction) {
    self.interactions.push(interaction);
    this.currentInteraction(interaction);
  }

  this.tab_clicked = function(data, event) {
    self.currentInteraction(data);
  }
}

function interactionModel(parms) {
  this.interactionType = parms.type;
  this.customerInfo = parms.customerInfo.uid;
  this.timeInStatus = 0;
  this.activeTime = 0;
  this.idleTime = 0;


}

var mainf = new mainViewModel({});
ko.applyBindings(mainf);

var t = new interactionModel({
  type: "email",
  customerInfo: {
    uid: "[email protected]"
  }
});
var t1 = new interactionModel({
  type: "call",
  customerInfo: {
    uid: "01789464"
  }
});
var t2 = new interactionModel({
  type: "chat",
  customerInfo: {
    uid: "454564564"
  }
});
mainf.addInteraction(t);
mainf.addInteraction(t1);
mainf.addInteraction(t2);