<commit_before><div class="column">
  <div class="block">

    <div class="pure-g header_block_inline m_b_1">
      <div class="pure-u-1 pure-u-md-12-24">
        <h2 class="with_description">¿Cuál es tu contribución al presupuesto del Ayuntamiento de Mataró?</h2>
        <p>Parte del presupuesto de tu municipio se financia directamente de impuestos y tasas locales. Calcula cuánto aportas tú al presupuesto de acuerdo a tu vivienda, vehículos...</p>
      </div>

      <div class="pure-u-1 pure-u-md-12-24 right">
        <%= image_tag('illustrations/presupuestos.jpg', class: 'medium_img') %>
      </div>
    </div>

    <div id="gobierto-planification" class="gobierto_planification">

      <div class="planification-header m_v_3" v-if="json.length">

        <div class="header-resume">
          <h3>Estado de ejecución global</h3>
          <span>38%</span>
        </div>

        <div class="header-detail">
          <div>{{ detailed.roots }} ejes</div>
          <div>{{ detailed.lines }} líneas de actuación</div>
          <div>{{ detailed.acts }} actuaciones</div>
          <div>{{ detailed.projects }} proyectos</div>
        </div>

      </div>

      <div class="planification-content">

        <section class="level_1">
          <div class="node-root" v-for="(model, index) in json" :class="['cat_' + (index % 5 + 1)]">
            <node-root :model="model"></node-root>
          </div>
        </section>

        <section class="level_2" :class="['cat_' + (selected.id % 5 + 1)]">
          <div class="lines-header">
            <div>{{ selected.children.length }} lineas de actuación</div>
            <div>% progress</div>
          </div>

          <ul class="lines-list">
            <li class="node-list mb2" v-for="(model, index) in selected.children">
              <h3><a href="">
                <i class="fa fa-caret-right"></i>
                {{ model.attributes.title }}
              </a></h3>
              <div>{{ model.children.length }} actuaciones</div>
              <div>{{ model.attributes.percent || 0 }}%</div>
            </li>
          </ul>
        </section>

        <section class="level_3 cat_1">

          <div class="breadcrumb">
            <a href="">
              <i class="fa fa-caret-left"></i>
              Ver todo en Personas y familias
            </a>
          </div>

          <div class="node header">
            <h3><a href="">
              <i class="fa fa-caret-right"></i>
              Promoure polítiques que afavoreixin la qualitat de vida de la gent gran
            </a></h3>
            <div class="sub_elements">5 actuaciones</div>
            <div class="progress">35%</div>
          </div>

          <div class="">

            Cobrir les necessitats bàsiques a famílies amb manca de recursos suficients.

            Garantir els subministraments d’aigua, llum i gas a les famílies sense recursos.

            Optimitzar l’accessibilitat i la qualitat dels serveis socials bàsics.

            Establir les accions que afavoreixin la protecció de la família i la infància.

            Garantir ajuts socials malgrat les retallades d’altres administracions.


          </div>

        </section>

      </div>

    </div>

  </div>
</div>

<!-- node root template -->
<script type="text/x-template" id="node-root-template">
  <a href="#" @click="open">
    <div class="node-img js-img">
      <img :src="model.attributes.img" alt="">
    </div>
    <div class="node-info js-info">
      <div class="info-progress progress" :style="{ width: model.attributes.complete }"></div>
      <div class="info-content">
        <h3>{{ model.attributes.title }}</h3>
        <span>{{ model.attributes.complete }}</span>
      </div>
    </div>
  </a>
</script>

<!-- node lines template -->


<script type="text/javascript">

  // define the node root component
  Vue.component('node-root', {
    template: '#node-root-template',
    props: ['model'],
    data() {
      return {}
    },
    methods: {
      open() {
        this.$root.selected = this.model;

        // TODO: Revisar esto...
        $('section.level_1').velocity({flex: "0 0 25%"});
        $('section.level_1 .js-img').velocity({flex: "0"});
        $('section.level_1 .js-info').velocity({padding: "1.5em"});
        $('section.level_1 .js-info h3, section.level_1 .js-info span').velocity({"font-size": "1.25rem" });

        $('section.level_2').velocity("transition.slideRightBigIn");
        $('section.level_2').css("display: flex");
        $(this).parents('.timeline_row').toggleClass('toggled');

        $(this).find('.fa').toggleClass('fa-caret-right fa-caret-down');
        $(this).siblings('.description').toggle();
      }
    }
  });

  var app = new Vue({
    el: '#gobierto-planification',
    name: 'gobierto-planification',
    data() {
      return {
        json: {},
        selected: null
      }
    },
    created: function() {
      this.getJson();
    },
    computed: {
      detailed() {
        if (!this.json.length) return {}
        let detail = {};
        detail = {
          roots: this.json.length,
          lines: _.flatten(_.map(this.json, 'children')).length,
          acts: this.json.length,
          projects: this.json.length
        };
        return detail
      }
    },
    methods: {
      getJson: function() {
        $.getJSON('/planification.json', function(json) {
          this.json = json;
          if (json.length) this.selected = json[0] // fallback
        }.bind(this));
      }
    }
  });
</script>

<script type="text/javascript">



  //close everything
  $(document).click(function (e) {
    e.preventDefault();

    var container = $(".planification-content");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $('section.level_2, section.level_3').hide();
<commit_msg>add todos<commit_after><div class="column">
  <div class="block">

    <div class="pure-g header_block_inline m_b_1">
      <div class="pure-u-1 pure-u-md-12-24">
        <h2 class="with_description">¿Cuál es tu contribución al presupuesto del Ayuntamiento de Mataró?</h2>
        <p>Parte del presupuesto de tu municipio se financia directamente de impuestos y tasas locales. Calcula cuánto aportas tú al presupuesto de acuerdo a tu vivienda, vehículos...</p>
      </div>

      <div class="pure-u-1 pure-u-md-12-24 right">
        <%= image_tag('illustrations/presupuestos.jpg', class: 'medium_img') %>
      </div>
    </div>

    <div id="gobierto-planification" class="gobierto_planification">

      <div class="planification-header m_v_3" v-if="json.length">

        <div class="header-resume">
          <h3>Estado de ejecución global</h3>
          <span>38%</span>
        </div>

        <div class="header-detail">
          <div>{{ detailed.roots }} ejes</div>
          <div>{{ detailed.lines }} líneas de actuación</div>
          <div>{{ detailed.acts }} actuaciones</div>
          <div>{{ detailed.projects }} proyectos</div>
        </div>

      </div>

      <div class="planification-content">

        <section class="level_1">
          <div class="node-root" v-for="(model, index) in json" :class="['cat_' + (index % 5 + 1)]">
            <node-root :model="model"></node-root>
          </div>
        </section>

        <section class="level_2" :class="['cat_' + (selected.id % 5 + 1)]">
          <div class="lines-header">
            <div>{{ selected.children.length }} lineas de actuación</div>
            <div>% progress</div>
          </div>

          <ul class="lines-list">
            <%# TODO: Puede ser un componente, para encapsular el metodo de mostrar hijo (expand) %>
            <li class="node-list mb2" v-for="(model, index) in selected.children">
              <h3><a href="" @click="expand">
                <i class="fa fa-caret-right"></i>
                {{ model.attributes.title }}
              </a></h3>
              <div>{{ model.children.length }} actuaciones</div>
              <div>{{ model.attributes.percent || 0 }}%</div>
            </li>
          </ul>
        </section>

        <section class="level_3 cat_1">

          <div class="breadcrumb">
            <a href="">
              <i class="fa fa-caret-left"></i>
              Ver todo en Personas y familias
            </a>
          </div>

          <div class="node header">
            <h3><a href="">
              <i class="fa fa-caret-right"></i>
              Promoure polítiques que afavoreixin la qualitat de vida de la gent gran
            </a></h3>
            <div class="sub_elements">5 actuaciones</div>
            <div class="progress">35%</div>
          </div>

          <div class="">

            Cobrir les necessitats bàsiques a famílies amb manca de recursos suficients.

            Garantir els subministraments d’aigua, llum i gas a les famílies sense recursos.

            Optimitzar l’accessibilitat i la qualitat dels serveis socials bàsics.

            Establir les accions que afavoreixin la protecció de la família i la infància.

            Garantir ajuts socials malgrat les retallades d’altres administracions.


          </div>

        </section>

      </div>

    </div>

  </div>
</div>

<!-- node root template -->
<script type="text/x-template" id="node-root-template">
  <a href="#" @click="open">
    <div class="node-img js-img">
      <img :src="model.attributes.img" alt="">
    </div>
    <div class="node-info js-info">
      <div class="info-progress progress" :style="{ width: model.attributes.complete }"></div>
      <div class="info-content">
        <h3>{{ model.attributes.title }}</h3>
        <span>{{ model.attributes.complete }}</span>
      </div>
    </div>
  </a>
</script>

<!-- node lines template -->


<script type="text/javascript">

  // define the node root component
  Vue.component('node-root', {
    template: '#node-root-template',
    props: ['model'],
    data() {
      return {}
    },
    methods: {
      open() {
        this.$root.selected = this.model;

        // TODO: Revisar esto...
        $('section.level_1').velocity({flex: "0 0 25%"});
        $('section.level_1 .js-img').velocity({flex: "0"});
        $('section.level_1 .js-info').velocity({padding: "1.5em"});
        $('section.level_1 .js-info h3, section.level_1 .js-info span').velocity({"font-size": "1.25rem" });

        $('section.level_2').velocity("transition.slideRightBigIn");
        $('section.level_2').css("display: flex");
        $(this).parents('.timeline_row').toggleClass('toggled');

        $(this).find('.fa').toggleClass('fa-caret-right fa-caret-down');
        $(this).siblings('.description').toggle();
      }
    }
  });

  var app = new Vue({
    el: '#gobierto-planification',
    name: 'gobierto-planification',
    data() {
      return {
        json: {},
        selected: null
      }
    },
    created: function() {
      this.getJson();
    },
    computed: {
      detailed() {
        if (!this.json.length) return {}
        let detail = {};
        detail = {
          roots: this.json.length,
          lines: _.flatten(_.map(this.json, 'children')).length,
          acts: this.json.length,
          projects: this.json.length
        };
        return detail
      }
    },
    methods: {
      getJson: function() {
        $.getJSON('/planification.json', function(json) {
          this.json = json;
          if (json.length) this.selected = json[0] // fallback
        }.bind(this));
      },
      expand: function() {

      }
    }
  });
</script>

<script type="text/javascript">



  //close everything
  $(document).click(function (e) {
    e.preventDefault();

    var container = $(".planification-content");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      // TODO: Dinamizar para que no sea exclusivo de un nivel
      $('section.level_2, section.level_3').hide();

{'fraction_non_alphanumeric': 0.1654359910395752, 'fraction_numerical': 0.009790093752592715, 'mean_word_length': 2.1341653666146647, 'pattern_counts': {'":': 2, '<': 222, '<?xml version=': 0, '>': 222, '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': '1997505', 'n_tokens_mistral': 3923, 'n_tokens_neox': 3761, 'n_words': 873}