refactor(k8s/deploy): use components (#5417) [EE-141

app/portainer/components/box-selector/box-selector-item/box-selector-item.html

@@ -0,0 +1,10 @@
+<div class="box-selector-item">
+  <input type="radio" name="{{ $ctrl.radioName }}" id="{{ $ctrl.option.id }}" ng-checked="$ctrl.isChecked($ctrl.option.value)" ng-value="$ctrl.option.value" />
+  <label for="{{ $ctrl.option.id }}" ng-click="$ctrl.onChange($ctrl.option.value)">
+    <div class="boxselector_header">
+      <i ng-class="$ctrl.option.icon" aria-hidden="true" style="margin-right: 2px;"></i>
+      {{ $ctrl.option.label }}
+    </div>
+    <p ng-if="$ctrl.option.description">{{ $ctrl.option.description }}</p>
+  </label>
+</div>

app/portainer/components/box-selector/box-selector-item/index.js

@@ -0,0 +1,11 @@
+import angular from 'angular';
+
+angular.module('portainer.app').component('boxSelectorItem', {
+  templateUrl: './box-selector-item.html',
+  bindings: {
+    radioName: '@',
+    isChecked: '<',
+    option: '<',
+    onChange: '<',
+  },
+});

app/portainer/components/box-selector/box-selector.controller.js

@@ -0,0 +1,17 @@
+export default class BoxSelectorController {
+  constructor() {
+    this.isChecked = this.isChecked.bind(this);
+    this.change = this.change.bind(this);
+  }
+
+  change(value) {
+    this.ngModel = value;
+    if (this.onChange) {
+      this.onChange(value);
+    }
+  }
+
+  isChecked(value) {
+    return this.ngModel === value;
+  }
+}

app/portainer/components/box-selector/box-selector.css

@@ -0,0 +1,82 @@
+.boxselector_wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0.5rem;
+}
+
+.boxselector_wrapper > div,
+.boxselector_wrapper box-selector-item {
+  flex: 1;
+  padding: 0.5rem;
+}
+
+.boxselector_wrapper .boxselector_header {
+  font-size: 14px;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.boxselector_header .fa,
+.fab {
+  font-weight: normal;
+}
+
+.boxselector_wrapper input[type='radio'] {
+  display: none;
+}
+
+.boxselector_wrapper input[type='radio']:not(:disabled) ~ label {
+  cursor: pointer;
+}
+
+.boxselector_wrapper label {
+  font-weight: normal;
+  font-size: 12px;
+  display: block;
+  background: white;
+  border: 1px solid #333333;
+  border-radius: 2px;
+  padding: 10px 10px 0 10px;
+  text-align: center;
+  box-shadow: 0 3px 10px -2px rgba(161, 170, 166, 0.5);
+  position: relative;
+}
+.boxselector_wrapper label.boxselector_disabled {
+  background: #cacaca;
+  border-color: #787878;
+  color: #787878;
+  cursor: not-allowed;
+}
+
+.boxselector_wrapper input[type='radio']:checked + label {
+  background: #337ab7;
+  color: white;
+  padding-top: 2rem;
+  border-color: #337ab7;
+}
+
+.boxselector_wrapper input[type='radio']:checked + label::after {
+  color: #337ab7;
+  font-family: 'Font Awesome 5 Free';
+  border: 2px solid #337ab7;
+  content: '\f00c';
+  font-size: 16px;
+  font-weight: bold;
+  position: absolute;
+  top: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 30px;
+  width: 30px;
+  line-height: 26px;
+  text-align: center;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.25);
+}
+
+@media only screen and (max-width: 700px) {
+  .boxselector_wrapper {
+    flex-direction: column;
+  }
+}

app/portainer/components/box-selector/box-selector.html

@@ -0,0 +1,13 @@
+<div class="form-group"></div>
+
+<div class="form-group">
+  <div class="boxselector_wrapper">
+    <box-selector-item
+      ng-repeat="option in $ctrl.options"
+      radio-name="{{ $ctrl.radioName }}"
+      option="option"
+      on-change="($ctrl.change)"
+      is-checked="$ctrl.isChecked"
+    ></box-selector-item>
+  </div>
+</div>

app/portainer/components/box-selector/index.js

@@ -0,0 +1,20 @@
+import angular from 'angular';
+
+import './box-selector.css';
+
+import controller from './box-selector.controller';
+
+angular.module('portainer.app').component('boxSelector', {
+  templateUrl: './box-selector.html',
+  controller,
+  bindings: {
+    radioName: '@',
+    ngModel: '=',
+    options: '<',
+    onChange: '<',
+  },
+});
+
+export function buildOption(id, icon, label, description, value) {
+  return { id, icon, label, description, value };
+}