JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.bundle.js"></script>
<script src="https://cdn.backand.net/backand/dist/1.8.2/backand.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/css/ionic.css">
<div ng-app="demoApp" ng-controller="mainController as mainCtrl">

  <ion-header-bar align-title="center" class="bar-dark">
    <h1 class="title">EventsApp</h1>
   </ion-header-bar>
  <ion-content>
    <!--<pre>{{mainCtrl.events | json : 2}}</pre-->
    <!--<pre>{{mainCtrl.displayedComments|json:2}}</pre>-->
    <ion-list>
      <ion-item>
      <form ng-submit="mainCtrl.addEvent(mainCtrl.newEventTitle); mainCtrl.newEventTitle = '';">
        <input type="text" ng-model="mainCtrl.newEventTitle" placeholder="event title..."/>
        <button class="item item-icon-left">
          <i class="icon ion-plus-round"></i>
          add event
        </button>
      </form>
      </ion-item>
      <ion-item ng-if="mainCtrl.events.data.length === 0">
        <h1>
        There are no events yet.
        </h1>
      </ion-item>
      <ion-item ng-repeat="event in mainCtrl.events.data | orderBy: '-created_at'" class="item item-button-right">
        <h1>
          {{event.title}}
        </h1>
        <button ng-click="mainCtrl.showComment(event)" class="button icon-left ion-ios-chatbubble" title="{{mainCtrl.displayedComments[event.id]? 'hide comments': 'show comments'}}">
        </button>
        <div ng-show="mainCtrl.displayedComments[event.id]" class="list">
          
          <form ng-submit="mainCtrl.addComment(mainCtrl.currentUserId, event, commentText)">
            <label class="item item-input">
              <span class="input-label">Username</span>
              <input type="text" disabled ng-model="mainCtrl.currentUserId">
            </label>
            <label class="item item-input">
              <span class="input-label">Comment</span>
              <input type="text"...

JavaScript

angular.module('demoApp', ['ionic', 'backand'])
  //Update Angular configuration section
  .config(function(BackandProvider) {
    BackandProvider.setAppName('myfirstapp123');
    //BackandProvider.setSignUpToken('-token-');
    BackandProvider.setAnonymousToken('9f99054f-3205-426b-afc7-158d7ac3500f');
  })
  .controller('mainController', MainController)
  .service('dataService', dataService)
  .factory('commentsFactory', Comments);

function MainController($scope, $http, Backand, dataService, commentsFactory) {
  var vm = this,
    comment = commentsFactory;

  vm.currentUserId = 1; //<<<< should be the current user later (no login yet)

  vm.displayedComments = {};
  dataService.getList('events').then(function(response) {
    vm.events = response.data;
  }); //eventsFactory;

	vm.addEvent = function(newTitle) {
  	
    if (!newTitle) return; // don't add empty events
  	// this should be in a factory later
    var newDate = new Date();
    
    return $http({
        method: 'POST',
        url: Backand.getApiUrl() + '/1/objects/events?returnObject=true',
        data: {
          title: newTitle,
          created_at: newDate
        }
      }).then(function(response) {
      	//console.log(response, vm.events);
      	vm.events.data.push(response.data);
      });
  }
  vm.addComment = function(userId, event, text) {
    //event.comments.push(
    if (!text) return;
    
    comment.create(userId, event.id, text).then(function(response) {
      event.comments.push(response.data);
      //console.log(response);
    });
  }

  vm.getComments = commentsFactory.getComments;
  vm.showComment = function(event) {
    //console.log(event);
    commentsFactory.getComments(event.id).then(function(response) {
      vm.displayedComments[event.id] = !vm.displayedComments[event.id];
      event.comments = response.data;
    });
  };
  vm.remove = function(event, commentId) {
  	console.log('removing', event, commentId);
 ...