<commit_before><!-- This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 -->

<docs>
  # B-DEVICEPANEL
  Panel for editing of devices.
  ## Props:
  *track*
  : Container for the devices.
</docs>

<style lang="scss">
  @import 'mixins.scss';
  .b-devicepanel.b-hflex {
    border: 3px solid #777;
    border-radius: $b-theme-border-radius;
    justify-content: flex-start;
    align-items: center;
  }
</style>

<template>
  <b-hflex class="b-devicepanel" style="width: 100%; height: 100%" >
    <b-more @click.native.stop="menuopen" :key="0" />
    <template v-for="device in devices" >
      <b-deviceeditor :device="device" center style="margin: 5px" :key="'deviceeditor' + device.$id" />
      <b-more @click.native.stop="menuopen" :key="device.$id" />
    </template>
    <b-contextmenu ref="cmenu" @click="menuactivation" >
      <b-menutitle> Device </b-menutitle>
      <b-menuitem fa="plus-circle"      role="add-device" >      Add Device		</b-menuitem>
      <b-menuitem fa="times-circle"     role="delete-device" >   Delete Device		</b-menuitem>
    </b-contextmenu>
  </b-hflex>
</template>

<script>
function observable_device_data () {
  const data = {
    devices:	{ default: [],  	notify: n => this.track.on ("notify:devices", n),
		  getter: async c => Object.freeze (await this.track.list_devices()), },
  };
  return this.observable_from_getters (data, () => this.track);
}

export default {
  name: 'b-devicepanel',
  props: {
    track: { type: Bse.Track, },
  },
  data() { return observable_device_data.call (this); },
  methods: {
    menuactivation (role) {
      // close popup to remove focus guards
      this.$refs.cmenu.close();
      if (role == 'add-device')
	this.track.create_device ('Dummy');
    },
    menucheck (role, component) {
      console.log ("devicepanel.vue", this.track);
      if (!this.track)
	return false;
      switch (role)
      {
	case 'add-device':   return true;
      }
      return false;
    },
    menuopen (event) {
      this.$refs.cmenu.popup (event, { check: this.menucheck.bind (this) });
    },<commit_msg>EBEAST: b/devicepanel.vue: keep track of device sibling during addition<commit_after><!-- This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 -->

<docs>
  # B-DEVICEPANEL
  Panel for editing of devices.
  ## Props:
  *track*
  : Container for the devices.
</docs>

<style lang="scss">
  @import 'mixins.scss';
  .b-devicepanel.b-hflex {
    border: 3px solid #777;
    border-radius: $b-theme-border-radius;
    justify-content: flex-start;
    align-items: center;
  }
</style>

<template>
  <b-hflex class="b-devicepanel" style="width: 100%; height: 100%" >
    <b-more @click.native.stop="menuopen" :sibling="null" />
    <template v-for="device in devices" >
      <b-deviceeditor :device="device" center style="margin: 5px" :key="'deviceeditor' + device.$id" />
      <b-more @click.native.stop="menuopen" :sibling="device" :key="device.$id" />
    </template>
    <b-contextmenu ref="cmenu" @click="menuactivation" >
      <b-menutitle> Device </b-menutitle>
      <b-menuitem fa="plus-circle"      role="add-device" >      Add Device		</b-menuitem>
      <b-menuitem fa="times-circle"     role="delete-device" >   Delete Device		</b-menuitem>
    </b-contextmenu>
  </b-hflex>
</template>

<script>
function observable_device_data () {
  const data = {
    devices:	{ default: [],  	notify: n => this.track.on ("notify:devices", n),
		  getter: async c => Object.freeze (await this.track.list_devices()), },
  };
  return this.observable_from_getters (data, () => this.track);
}

export default {
  name: 'b-devicepanel',
  props: {
    track: { type: Bse.Track, },
  },
  data() { return observable_device_data.call (this); },
  methods: {
    menuactivation (role) {
      const popup_options = this.$refs.cmenu.popup_options;
      // close popup to remove focus guards
      this.$refs.cmenu.close();
      if (role == 'add-device')
	console.log ("create_device: after:", popup_options.device_sibling);
      if (role == 'add-device')
	this.track.create_device ('Dummy');
    },
    menucheck (role, component) {
      if (!this.track)
	return false;
      switch (role)
      {
	case 'add-device':   return true;
      }
      return false;
    },
    menuopen (event) {
      const sibling = event?.path[0]?.__vue__?.$attrs?.sibling;
      this.$refs.cmenu.popup (event, { check: this.menucheck.bind (this),
				       device_sibling: sibling });
    },
{'fraction_non_alphanumeric': 0.17046470062555855, 'fraction_numerical': 0.0071492403932082215, 'mean_word_length': 3.033333333333333, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 55, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '322606', 'n_tokens_mistral': 1594, 'n_tokens_neox': 1562, 'n_words': 339}