ember-stateful demo

README.md

ember-stateful demo

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({

  myStatefulService: Ember.inject.service(),

  state: Ember.computed.readOnly('myStatefulService.state'),

  actions: {
    connect() {
      this.get('myStatefulService').send('connect');
    },
    cancelConnect() {
      this.get('myStatefulService').send('cancelConnect');
    },
    disconnect() {
      this.get('myStatefulService').send('disconnect');
    },
    sync() {
      this.get('myStatefulService').send('sync');
    },
    looseConnection() {
      this.get('myStatefulService').send('lostConnection');
    },
  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

services.my-stateful-service.js

import Ember from 'ember';
import Stateful from 'ember-stateful';

export default Ember.Service.extend(Stateful, {

  states: [
    'offline.disconnected',
    'offline.connecting',
    'online.connected',
    'online.syncing',
    'online.disconnecting',
  ],

  actions: {
    offline: {
      _enter() {
        console.log('entering state offline');
      },
      _exit() {
        console.log('exiting state offline');
      },
      disconnected: {
        _enter() {
          console.log('entering state offline.disconnected');
        },
        _exit() {
          console.log('exiting state offline.disconnected');
        },
        connect() {
          console.log('connect')
          this.transitionTo('offline.connecting');
        },
      },
      connecting: {
        _enter() {
          console.log('entering state offline.connecting');
          console.log('starting connection');
          this.set('connectTimer', Ember.run.later(this, 'transitionTo', 'online', 1000));
        },
        _exit() {
          console.log('exiting state offline.connecting');
          Ember.run.cancel(this.get('connectTimer'));
        },
        cancelConnect() {
          console.log('cancelling connection')
          this.transitionTo('offline.disconnected');
        },
      },
    },
    online: {
      _enter() {
        console.log('entering state online');
      },
      _exit() {
        console.log('exiting state online');
        Ember.run.cancel(this.get('syncTimer'));
      },
      disconnect() {
        console.log('disconnecting');
        this.transitionTo('online.disconnecting');
      },
      sync() {
        console.log('starting sync');
        this.transitionTo('online.syncing');
      },
      lostConnection() {
        console.log('lost connection');
        this.transitionTo('offline.connecting');
      },
      connected: {
        _enter() {
          console.log('entering state online.connected');
        },
        _exit() {
          console.log('exiting state online.connected');
        },
      },
      syncing: {
        _enter() {
          console.log('entering state online.syncing');
          this.set('syncTimer', Ember.run.later(this, function() {
            console.log('finished sync');
            this.transitionTo('online.connected');
          }, 1000));
        },
        _exit() {
          console.log('exiting state online.syncing');
        },
      },
      disconnecting: {
        _enter() {
          console.log('entering state online.disconnecting');
          Ember.run.later(this, function() {
            this.transitionTo('offline');
          }, 500);
        },
        _exit() {
          console.log('exiting state online.disconnecting');
        },
        lostConnection() {
          console.log('lost connection');
          this.transitionTo('offline');
        },
      },
    },
  },
});

templates.application.hbs

<h1>ember-stateful demo</h1>
<br>
<br>
{{my-component}}
<br>
<br>

templates.components.my-component.hbs

<h1>My Stateful Service Backed Component</h1>

Current Service State: {{myStatefulService.currentState}}

<br>

<button disabled={{not state.offline.disconnected}} onclick={{action "connect"}}>connect</button>
<button disabled={{not state.offline.connecting}} onclick={{action "cancelConnect"}}>cancel</button>
<button disabled={{or state.offline state.online.disconnecting}} onclick={{action "disconnect"}}>disconnect</button>
<button disabled={{or state.offline state.online.syncing}} onclick={{action "sync"}}>sync</button>
<button disabled={{not state.online}} onclick={{action "looseConnection"}}>loose connection</button>

{{! asdfad }}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-stateful": "0.0.0",
    "ember-truth-helpers": "1.3.0"
  }
}