Cacher is the code snippet organizer for pro developers

import Ember from 'ember';
 
export default Ember.Component.extend({
  modelColorObserver: Ember.observer('model.color',function(){
    this.set('color',this.get('model.color'));
  }),
  color: '#FFFFF',
  hexValue: Ember.observer('color',function(key, val) {
    if (arguments.length == 2) {
      if (val.length == 7)
        this.set('color', val);
    }
    return this.get('color');
  }),
  actions: {
    saveModel(model)
    {
      let _this = this;
      if(model.validate()) {
        model.set('color', _this.get('color'));
        let color = model.get('color');
        let c = color.substring(1);      // strip #
        let rgb = parseInt(c, 16);   // convert rrggbb to decimal
        let r = (rgb >> 16) & 0xff;  // extract red
        let g = (rgb >> 8) & 0xff;  // extract green
        let b = (rgb >> 0) & 0xff;  // extract blue
 
        let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
 
        if (luma < 130)
          model.set('whiteText', true);
        else
          model.set('whiteText', false);
 
        model.save().then(function () {
          toastr.success('Label sauvegardé');
          _this.sendAction('transition');
        }).catch(function (reason) {
          console.log(reason);
            toastr.error('Erreur lors de la sauvegarde');
        });
      }
    },
    selectCategory: function (category) {
      this.get('model').set('category', category.id);
    }
  },
  init(){
    this._super(...arguments);
    let color = this.get('model.color');
    this.set('color',color);
  },
  didInsertElement(){
    let color = this.get('model.color');
    let _this = this;
    this.$(".color-swatch").spectrum({
      showInput: false,
      showButtons: false,
      color: color,
      change: function(newColor) {
        _this.set('color', newColor.toHexString());
      }
    });
    this.$('.color-swatch').on("dragstop.spectrum", function(e, newColor) {
      _this.set('color', newColor.toHexString());
    });
  }
});

{{#fields.form-group label="app.tags.forms.fields.label" fieldName="label" errors=model.errors}}
    {{input class="form-control" name="label" type="text" value=model.label}}
{{/fields.form-group}}
<div style="height: 50px; width: 50px;
     border-radius: 4px;
     border: 1px solid #000;background-color: {{color}}" class='color-swatch'></div>
<div class='hex-input'>
    Hex: {{input type='text' value=color class='hex' placeholder='#00000'}}
</div>
{{#fields.form-group label="app.tags.forms.fields.category" fieldName="category" errors=model.errors}}
    {{#power-select searchEnabled=false selected=model.categoryObject options=model.categories onchange=(action "selectCategory") as |category|}}
        {{t category.label}}
    {{/power-select}}
{{/fields.form-group}}
<div class="form-group text-right m-t-lg">
    {{#link-to 'app.tags' class="btn btn-white" active=false }}{{t 'buttons.cancel'}}{{/link-to}}
    <button {{action 'saveModel' model}} class="btn btn-primary">{{t 'buttons.save'}}</button>
</div>
{{yield}}