<commit_before><template lang='jade'>

.tempSect
  h1 Temperatura
  .thermometer
    .measure
      div.line(
        v-for='n in range'
        v-bind:class='{boldLine: n % 5 == 0}')
          p(v-if='n % 5 == 0').
            {{ isPositive ? range - n : -n }}
    .sensor
      .temperatureSensor.sensorVal(:style="{background: color, height: sensorVal }")
        span {{ degrees | round 2 }}°C

    .bottom

</template>

<script>
  import round from 'vue-round-filter';

  export default {
    data() {
      return {
        degrees: 0,
        range: 30,
      };
    },

    filters: {
      round,
    },

    computed: {
      sensorVal() {
        let percent = Math.abs(this.degrees) * 2.9;

        return `${this.isPositive ? percent + 10.5 : 97.5 - percent}%`;
      },

      isPositive() {
        return this.degrees > 0;
      },

      color() {
        return this.degrees >= 0 ? '#f42' : '#a0ccff';
      },
    },
    methods: {
      apiConnect(api) {
        this.degrees = api.temperature.current.value;
      },
    },

    ready() {
      this.$parent.api.basic.on('updated', this.apiConnect);
    },

    destroyed() {

    },
  };

</script>

<style lang='stylus'>
  @import "~styles/main"
  @import "~styles/section"
  thermometerColor = #f42

  .tempSect
    @extend .section, .flex, .fcolumn, .acenter
    overflow hidden

  .thermometer
    width 4.5em
    height 24em
    display flex
    padding .5em
    padding-top 2em
    background #fff
    border-radius 4em
    margin-bottom 6em
    position relative
    justify-content center
    .bottom
      top 90%
      width 35%
      height 32%
      content ''
      background #fff
      position absolute
      border-radius 2em
      overflow hidden
      left 50% - (@width/2)
    &:after
      content ''
      position absolute
      top -1.9%
      left 56%
      width 110%
      height 135%
      z-index 3
      transform skew(25deg) rotate(25deg)
      background rgba(0,0,0,.1)
    .sensor
      z-index 2
      width 15%
      height 107.5%
      position relative
      borderRound()
      background #eee
      &:before
        top 97%
        width 150%
        height 18%
        content ''
        background thermometerColor
        position absolute
        border-radius 2em
        left 49.5% - (@width/2)
      .sensorVal
        position absolute
        bottom 0
        left 0
        width 100%
        height 70%
        background thermometerColor
        span
          background #fff
          padding .2em
          box-shadow 0 .1em .1em rgba(#000, .2)
          color thermometerColor
          font-weight 600
          font-size 1.1em
          position relative<commit_msg>all termometers colored elements are mutable<commit_after><template lang='jade'>

.tempSect
  h1 Temperatura
  .thermometer
    .measure
      div.line(
        v-for='n in range'
        v-bind:class='{boldLine: n % 5 == 0}')
          p(v-if='n % 5 == 0').
            {{ isPositive ? range - n : -n }}
    .sensor
      .temperatureSensor.sensorVal(:style="{background: color, color: color, height: sensorVal }")
        span {{ degrees | round 2 }}°C
        .bottomColor

    .bottom

</template>

<script>
  import round from 'vue-round-filter';

  export default {
    data() {
      return {
        degrees: 0,
        range: 30,
      };
    },

    filters: {
      round,
    },

    computed: {
      sensorVal() {
        let percent = Math.abs(this.degrees) * 2.9;

        return `${this.isPositive ? percent + 10.5 : 97.5 - percent}%`;
      },

      isPositive() {
        return this.degrees > 0;
      },

      color() {
        return this.degrees >= 0 ? '#f42' : '#a0ccff';
      },
    },
    methods: {
      apiConnect(api) {
        this.degrees = api.temperature.current.value;
      },
    },

    ready() {
      this.$parent.api.basic.on('updated', this.apiConnect);
    },
  };

</script>

<style lang='stylus'>
  @import "~styles/main"
  @import "~styles/section"
  thermometerColor = #f42

  .tempSect
    @extend .section, .flex, .fcolumn, .acenter
    overflow hidden

  .thermometer
    width 4.5em
    height 24em
    display flex
    padding .5em
    padding-top 2em
    background #fff
    border-radius 4em
    margin-bottom 6em
    position relative
    justify-content center
    .bottom
      top 90%
      width 35%
      height 32%
      content ''
      background #fff
      position absolute
      border-radius 2em
      overflow hidden
      left 50% - (@width/2)
    &:after
      content ''
      position absolute
      top -1.9%
      left 56%
      width 110%
      height 135%
      z-index 3
      transform skew(25deg) rotate(25deg)
      background rgba(#000, .1)
    .sensor
      z-index 2
      width 15%
      height 107.5%
      position relative
      borderRound()
      background #eee
      .bottomColor
        top 98%
        width 150%
        height 4em
        content ''
        background inherit
        position absolute
        border-radius 2em
        left 49.5% - (@width/2)
      .sensorVal
        position absolute
        bottom 0
        left 0
        width 100%
        height 70%
        color thermometerColor
        background thermometerColor
        span
          background #fff
          padding .2em
          box-shadow 0 .1em .1em rgba(#000, .2)
          font-weight 600
          font-size 1.1em
          position relative
{'fraction_non_alphanumeric': 0.11047583917373663, 'fraction_numerical': 0.0367023238657322, 'mean_word_length': 1.6236090953072084, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 17, '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': '821893', 'n_tokens_mistral': 1849, 'n_tokens_neox': 1658, 'n_words': 439}