{% extends 'layouts/layout_old.html' %}

{% block css.custom %}
  <link rel='stylesheet' href='/static/css/covmanager.css'>
{% endblock css.custom %}

{% block body_content %}
<div id="main" class="panel panel-default">
  <div class="panel-heading"><i class="bi bi-clipboard-data"></i> Coverage Collections</div>
  <div class="panel-body">
    <div class="panel panel-default" style="float: left;">
    <div class="panel-heading"><i class="bi bi-archive-fill"></i> Repository Filters</div>
    <div class="panel-body">
      <div>
        <label>Repository:</label><input type="text" class="form-control" v-model="search.repository.value"
          @focus="suggestions.repository.enabled = true" @blur="suggestions.repository.enabled = false"/>
        <div v-show="suggestions.repository.enabled">
          <div v-for="name in suggestions.repository.value" v-on:mousedown="take_suggestion('repository', name)">!{ name }!</div>
        </div>
      </div>
      <div><label>Revision:</label><input type="text" class="form-control" v-model="search.revision.value"/></div>
      <div><label>Branch:</label><input type="text" class="form-control" v-model="search.branch.value"/></div>
    </div>
    </div>

    <div class="panel panel-default" style="float: left;">
    <div class="panel-heading"><i class="bi bi-funnel-fill"></i> Misc Filters</div>
    <div class="panel-body">
      <div>
        <label>Tool:</label> <input type="text" class="form-control" v-model="search.tools.value"
          @focus="suggestions.tools.enabled = true" @blur="suggestions.tools.enabled = false"/>
        <div v-show="suggestions.tools.enabled">
          <div v-for="name in suggestions.tools.value" v-on:mousedown="take_suggestion('tools', name)">!{ name }!</div>
        </div>
      </div>
      <div><label>Description:</label> <input type="text" class="form-control" v-model="search.description.value"/></div>
      <div><label>Result Limit:</label> <input type="text" class="form-control" v-model="search.limit.value"/></div>
    </div>
    </div>

    <div class="panel panel-default" style="float: left;">
    <div class="panel-heading"><i class="bi bi-calendar-range"></i> Date Filters</div>
    <div class="panel-body">
      <!--
      <label>Newer than:</label><datepicker placeholder="Select Date"></datepicker>
      <label>Older than:</label><datepicker placeholder="Select Date"></datepicker>
      -->
    </div>
    </div>

    <div class="panel panel-default" style="float: right;">
    <div class="panel-heading"><i class="bi bi-lightning-charge-fill"></i> Actions</div>
    <div class="panel-body">
      <button @click="navigate('diff')" class="btn btn-default">View Differences</button>
      <button @click="aggregate()" class="btn btn-default">Aggregate</button>
      <button @click="navigate('patch')" class="btn btn-default">Patch Analysis</button>
      <button @click="summary()" class="btn btn-default">Report Summary</button>
    </div>
    </div>

  </div>
  <table class="table table-condensed table-hover table-bordered table-db">
    <thead>
      <tr>
        <th @click="sortBy('id')" :class="{ active: sortKey == 'id' }" style="width: 25px;">ID</th>
        <th @click="sortBy('created')" :class="{ active: sortKey == 'created' }" style="width: 80px;">Created</th>
        <th @click="sortBy('repository')" :class="{ active: sortKey == 'repository' }" style="width: 50px;">Repository</th>
        <th @click="sortBy('revision')" :class="{ active: sortKey == 'revision' }" style="width: 100px;">Revision</th>
        <th @click="sortBy('branch')" :class="{ active: sortKey == 'branch' }" style="width: 50px;">Branch</th>
        <th @click="sortBy('tools')" :class="{ active: sortKey == 'tools' }" style="width: 50px;">Tools</th>
        <th @click="sortBy('description')" :class="{ active: sortKey == 'description' }" style="width: 150px;">Description</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="collection in ordered_collections" :id="collection.id" @click="collection_click_handler(collection.id)">
        <td><a :href="`${collection.id}/browse`">!{ collection.id }!</a></td>
        <td>!{ collection.created | formatDate }!</td>
        <td><a :href="`../repositories/`">!{ collection.repository }!</a></td>
        <td>!{ collection.revision }!</td>
        <td>!{ collection.branch }!</td>
        <td>!{ collection.tools }!</td>
        <td>!{ collection.description }!</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
let URLS = {
  collections_api: '{% url 'covmanager:collections_api' %}',
  diff: '{% url 'covmanager:collections_diff' %}',
  patch: '{% url 'covmanager:collections_patch' %}',
  aggregate: '{% url 'covmanager:collections_aggregate_api' %}',
  repository_search : '{% url 'covmanager:repositories_search_api' %}',
  tools_search : '{% url 'covmanager:tools_search_api' %}',
}

let pmanager = new HashParamManager()

let covmanager = new Vue({
  el: '#main',
  data: {
    collections: null,
    sortKey: "",
    reverse: false,
    block_fetch: true,
    search_initialized: false,

    search: {
      branch: { value : "", contains : true },
      description: { value : "", contains : true },
      repository: { value : "", contains: true, postfix: "__name" },
      revision: { value : "", contains : true },
      tools: { value : "", contains: true, postfix: "__name" },
      limit: { value : "10", contains : false },
    },

    suggestions: {
      repository: { value: [], enabled : false},
      tools: { value: [], enabled : false},
    },

    selected_collections: [],
  },
  created: function () {
    let self = this
    pmanager.forEach(function(k,v) {
      // TODO: This is a shortcut that saves us iterating through this.search
      // for every key that we are trying to map to a field in our search
      // object, but this won't work once we have more postfixes.
      k = k.replace(/__contains$/, '')
      k = k.replace(/__name$/, '')

      if (k != "" && k in self.search) {
        self.search[k].value = v
      }
    })

    self.fetch()
  },
  watch: {
    // This handles all search updates
    search: {  handler: 'fetch', deep: true },

    // Watches for changes to values that need suggestions
    'search.repository.value': function() {
      this.update_suggestions('repository')
    },
    'search.tools.value': function() {
      this.update_suggestions('tools')
    },

    collections: function() {
      /* Whenever our search results change, deselect everything */
      this.selected_collections = []
      for (let i = 0; i < this.collections.length; ++i) {
        let target = $("#" + this.collections[i].id)
          if (target)
            target.toggleClass("collection-selected", false)
      }
    }
  },
  filters: {
    formatDate: function (datetime) {
      return formatClientTimestamp(datetime)
    },
  },
  computed: {
    ordered_collections: function () {
      return _.orderBy(this.collections, [this.sortKey], [this.reverse ? 'desc' : 'asc'])
    },
  },
  methods: {
    apiurl: function() {
      let url = URLS.collections_api

      for (k in this.search) {
        let obj = this.search[k]
        let v = obj.value

        if ("postfix" in obj) {
          k += obj.postfix
        }

        if ("contains" in obj && obj.contains) {
          k += "__contains"
        }

        pmanager.update_value(k, v)
      }

      let query = pmanager.get_query()

      if (query) {
        url += "?" + query
        pmanager.update_hash()
      }

      return url;
    },
    fetch: _.throttle (function () {
      this.loading = true
      fetch(this.apiurl(), {
        method: 'GET',
        credentials: 'same-origin'
      }).then(response => {
        if (response.ok) {
          return response.json()
        }
        swal('Oops', E_SERVER_ERROR, 'error')
        this.loading = false
      }).then(json => {
        this.collections = json["results"]
        this.loading = false
        this.block_fetch = false
      })
    }, 500),
    navigate: function (dst) {
      let ids = []

      if (this.selected_collections.length > 0) {
        ids = this.selected_collections;
      } else {
        for (let i = 0; i < this.ordered_collections.length; ++i) {
          ids.push(this.ordered_collections[i].id)
        }
      }

      if (ids) {
        let url = URLS[dst] + '#ids=' + ids.join(',')
        if (window.location.hash) {
          url += "&" + window.location.hash.substr(1)
        }

        var win = window.open(url, '_blank');
        win.focus();
      }
    },
    sortBy: function (sortKey) {
      this.reverse = (this.sortKey === sortKey) ? !this.reverse : false
      this.sortKey = sortKey
    },
    update_suggestions: _.throttle (function (key) {
      fetch(URLS[key + '_search'] + "?name=" + this.search[key].value, {
        method: 'GET',
        credentials: 'same-origin'
      }).then(response => {
        if (response.ok) {
          return response.json()
        }
        swal('Oops', E_SERVER_ERROR, 'error')
      }).then(json => {
        this.suggestions[key].value = json["results"]
      })
    }, 500),
    take_suggestion: function(key, val) {
      this.suggestions[key].enabled = false
      this.suggestions[key].value = []
      this.search[key].value = val
    },
    aggregate: function() {
      let ids = []

      if (this.selected_collections.length > 0) {
        ids = this.selected_collections;
      } else {
        for (let i = 0; i < this.ordered_collections.length; ++i) {
          ids.push(this.ordered_collections[i].id)
        }
      }

      if (ids) {
        swal({
          title: "Create Collection Aggregation",
          text: 'Enter optional new description for result collection',
          content: 'input',
          buttons: true,
        }).then(description => {
          if (!description) {
            /* User pressed cancel button */
            return;
          }

          // Call API, get new collection id back, then navigate to it
          this.loading = true

          let data = {
            'ids': ids.join(",")
          }
          if (description) {
            data['description'] = description
          }

          fetch(URLS.aggregate, {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
              "Content-Type": "application/json; charset=utf-8",
              "X-Requested-With": "XMLHttpRequest"
            },
            body: JSON.stringify(data),
          })
          .then(response => {
            this.loading = false
            if (response.ok) {
              return response.json()
            }
            swal('Oops', E_SERVER_ERROR, 'error')
          })
          .then(json => {
            let newid = json["newid"]
            if (newid) {
              window.open(json["newid"] + "/browse", '_self');
            } else {
              swal('Oops', E_SERVER_ERROR, 'error')
            }
          })
        })
      }
    },
    summary: function() {
      let target_collection = null

      if (this.selected_collections.length == 1) {
        target_collection = this.selected_collections[0]
      } else if (this.collections.length == 1) {
        target_collection = this.collections[0].pk
      } else {
        swal('Error', "Function requires exactly one collection to be selected.", 'error')
        return
      }

      window.open(`${target_collection}/summary/`, '_blank').focus()
    },
    collection_click_handler: function(id) {
      var self = this
      let idx = self.selected_collections.indexOf(id)
      let target = $("#" + id)

      if (idx < 0) {
        self.selected_collections.push(id)
        if (target)
          target.toggleClass("collection-selected", true)
      } else {
        self.selected_collections.splice(idx, 1)
        if (target)
          target.toggleClass("collection-selected", false)
      }
    },
  }
})
</script>
{% endblock body_content %}