fleet/website/assets/js/components/rituals.component.js

/**
 * <rituals>
 * -----------------------------------------------------------------------------
 *
 *
 * @type {Component}
 *
 *
 * -----------------------------------------------------------------------------
 */

parasails.registerComponent('rituals', {
  //  ╔═╗╦═╗╔═╗╔═╗╔═╗
  //  ╠═╝╠╦╝║ ║╠═╝╚═╗
  //  ╩  ╩╚═╚═╝╩  ╚═╝
  props: [
    'rituals',
  ],

  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
  data: function (){
    return {
      //…
    };
  },

  //  ╦ ╦╔╦╗╔╦╗╦
  //  ╠═╣ ║ ║║║║
  //  ╩ ╩ ╩ ╩ ╩╩═╝
  template: `
  <div>
    <table class="table table-responsive">
      <thead>
        <tr>
          <td>Task name</td>
          <td>Started on</td>
          <td>Frequency</td>
          <td>Description</td>
          <td>DRI</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="ritual in rituals">
          <td>{{ritual.task}}</td>
          <td>{{ritual.startedOn}}</td>
          <td>{{ritual.frequency}}</td>
          <td purpose="ritual-description" v-if="!ritual.moreInfoUrl">{{ritual.description}}</td>
          <td purpose="ritual-description" v-else><a :href="ritual.moreInfoUrl">{{ritual.description}}</a></td>
          <td>{{ritual.dri}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  `,

  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
  beforeMount: function() {
    //…
  },
  mounted: async function(){
    //…
  },
  beforeDestroy: function() {
    //…
  },

  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
  methods: {


  }
});