New Twiddle

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('policies', { path: 'policies/:type' }, function() {
  });
  
  this.route('edit-policy', { path: 'policies/:id' }, function() {
    this.route('assigned-host-groups');
    this.route('protected-android-apps');
    this.route('sensor-settings');
  });
});

export default Router;

routes.edit-policy.index\.js

import Route from '@ember/routing/route';

export default Route.extend({
  redirect() {
    let { id: policyId } = this.modelFor('edit-policy');
    this.transitionTo('edit-policy.sensor-settings');
  }
});

routes.edit-policy\.js

import Route from '@ember/routing/route';
import { POLICIES } from './policies';

export default Route.extend({
	async model({ id }) {
    let policy = POLICIES.find(p => p.id === id);
    
    return { policy };
  }  
});

routes.index\.js

import Route from '@ember/routing/route';

export default Route.extend({
  redirect() {
    this.transitionTo('policies', 'foo');
  }
});

routes.policies\.js

import Route from '@ember/routing/route';

export const POLICIES = [
  { id: '1', name: 'Policy 1' },
  { id: '2', name: 'Policy 2' },
  { id: '3', name: 'Policy 3' },
  { id: '4', name: 'Policy 4' },
  { id: '5', name: 'Policy 5' },
  { id: '6', name: 'Policy 6' },
  { id: '7', name: 'Policy 7' },
  { id: '8', name: 'Policy 8' },
  { id: '9', name: 'Policy 9' },
  { id: '10', name: 'Policy 10' },
];

export default Route.extend({
	async model() {
    return {
      policies: POLICIES
    };
  }  
});

tab.component\.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class extends Component {
  @service router;

  get isActive() {
    return this.router.isActive(this.args.route, this.args.model);
  }  
}

tab.template\.hbs

<LinkTo
  @route={{@route}}
  @model={{@model}}
  aria-current={{if this.isActive "page"}}
  class="
    whitespace-no-wrap py-4 px-1 border-b-2 font-medium text-sm leading-5 text-gray-500 focus:outline-none
    {{if this.isActive
      "border-indigo-500 text-indigo-600 focus:text-indigo-800 focus:border-indigo-700"
      "border-transparent text-gray-500 hover:text-gray-700 focus:text-gray-700 focus:border-gray-300"
    }}
  "
>
  {{yield}}
</LinkTo>

templates.application\.hbs

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.edit-policy.sensor-settings\.hbs

<h1>Sensor settings</h1>

<form>
  <div>
    <!-- On: "bg-indigo-600", Off: "bg-gray-200" -->
<span role="checkbox" tabindex="0" aria-checked="false" class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline">
  <!-- On: "translate-x-5", Off: "translate-x-0" -->
  <span aria-hidden="true" class="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200"></span>
</span>

  </div>
</form>

templates.edit-policy\.hbs

<h1>Edit {{@model.policy.name}}</h1>

<div class="mb-8">
  <div class="block">
    <div class="border-b border-gray-200">
      <nav class="-mb-px flex">
        <Tab @route="edit-policy.sensor-settings" @model={{@model.policy.id}}>
          Sensor settings
        </Tab>
        <Tab @route="edit-policy.assigned-host-groups" @model={{@model.policy.id}}>
          Assigned host groups 
        </Tab>
        <Tab @route="edit-policy.protected-android-apps" @model={{@model.policy.id}}>
          Protected Android apps
        </Tab>
      </nav>
    </div>
  </div>
</div>

{{outlet}}

templates.policies\.hbs

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Actions</th>
    </tr>
  </thead>
  
  <tbody>
    {{#each this.model.policies as |policy|}}
      <tr>
        <td>{{policy.id}}</td>
        <td>{{policy.name}}</td>
        <td>
          <LinkTo @route="edit-policy" @model={{policy.id}}>
            Edit
          </LinkTo>
        </td>
      </tr>
    {{/each}}
  </tbody>
</table>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}