ubersicht widget that pulls in next wipchat todo to work on

wipchat.coffee

# This is a simple example Widget, written in CoffeeScript, to get you started
# with Übersicht. For the full documentation please visit:
#
# https://github.com/felixhageloh/uebersicht
#
# You can modify this widget as you see fit, or simply delete this file to
# remove it.

# this is the shell command that gets executed every time this widget refreshes
command: "whoami"

# the refresh frequency in milliseconds
refreshFrequency: 5000

setProduct: (domElem, product) ->
  $(domElem).find(".post .product").html product

setTodo: (domElem, todo) ->
  $(domElem).find(".post .body").html todo

products: (domElem) ->
  query = """
    {
    user(id:1) {
      products {
        id
        name
      }
    }
    }
  """
  xhr = new XMLHttpRequest()
  xhr.responseType = 'json'
  xhr.open("POST", "https://wip.chat/graphql")
  xhr.setRequestHeader("Content-Type", "application/json")
  xhr.setRequestHeader("Accept", "application/json")
  xhr.onload = ->
    products = xhr.response.data.user.products

    unless products[window.product_index]
      window.product_index = 0
      console.log "reset product index"

    window.product_id = parseInt(products[window.product_index].id)

  xhr.send(JSON.stringify({query: query}))


update: (output, domElem) ->
  @products(domElem)
  return unless window.product_id

  query = """
    {
    product(id:#{window.product_id}) {
      id
      name
      posts(completed: false, limit: 1) {
        id
        body
        product {
          name
        }
      }
    }
    }
  """

  xhr = new XMLHttpRequest()
  xhr.responseType = 'json'
  xhr.open("POST", "https://wip.chat/graphql")
  xhr.setRequestHeader("Content-Type", "application/json")
  xhr.setRequestHeader("Accept", "application/json")
  xhr.onload = ->
    posts = xhr.response.data.product.posts
    $post = $(domElem).find(".post")
    if posts.length > 0
      $post.find(".product").html posts[0].product.name
      $post.find(".body").html posts[0].body
      console.log posts[0]
    else
      console.log "no pending"
      console.log xhr.response.data
      $post.find(".product").html xhr.response.data.product.name
      $post.find(".body").html "No pending todos."

    $(domElem).find(".post").removeClass "loading"

  xhr.send(JSON.stringify({query: query}))


# render gets called after the shell command has executed. The command's output
# is passed in as a string. Whatever it returns will get rendered as HTML.
render: (output) -> """
  <div class='products'></div>
  <div class='post loading'>
    <div class='loader'>Fetching next todo…</div>
    <div class='product'></div>
    <div class='body'></div>
  </div>
"""

afterRender: (domElem) ->
  window.product_index = 0
  window.product_id = null
  console.log "after render"
  $(domElem).find(".post").bind "click", (e) =>
    window.product_index = window.product_index + 1
    $(domElem).find(".post").addClass "loading"
    @update()

# the CSS style for this widget, written using Stylus
# (http://learnboost.github.io/stylus/)
style: """
  background: rgba(#000, 0.64)
  -webkit-backdrop-filter: blur(20px)
  box-sizing: border-box
  color: #fff
  font-family: system-ui
  width: 100%
  font-size: 0.8em
  border-top: 1px rgba(255,255,255,0.1) solid
  .post
    width: 100%
    padding: 0.5em
    .loader
      display: none
    &.loading
      .loader
        display: block
        opacity: 0.5
      .product, .body
        display: none
  .product
    display: inline-block
    font-weight: 600
    &:after
      content: ":"
  .body
    display: inline-block
"""