zwetser.mobl

application zwetser

title "Zwetser"
database "zwetser"

import mobl
import zwetser::logic
import zwetser::data
import zwetser::account
import twitter

load "zwitter.css"

screen root() {
  init {
    //resetDatabase();
    var account = Account.all().one();
    if(account != null) {
      showUpdates(account);
    }
  }
  header("Accounts")
  topRightButton("Add", onclick={ addAccount(); })
  group {
    list(account in Account.all().order("username", true)) {
      itemArrow(onclick={ showUpdates(account); }) {
        outputString(account.username)
        sideButton("Edit", onclick={ editAccount(account); })
      }
    }
  }
}

screen newTweet(account : Account) {
  var text = ""
  topRightButton("Tweet", onclick={
    async {
      twitter::postUpdate(account.username, account.password, text);
      mobl::notify::notify("Tweet posted!");
    }
    screen return;
  })
  backButton("Timeline", onclick={ screen return; })
  basicView("Compose") {
    inputs {
      inputText(text)
    }
  }
}

screen replyTweet(update : TwitterUpdate) {
  var text = "@" + update.screenName + " "
  topRightButton("Reply", onclick={
    async {
      twitter::postReply(update.account.username, update.account.password, update.updateId, text);
      mobl::notify::notify("Tweet posted!");
    }
    screen return;
  })
  backButton("Tweet", onclick={ screen return; })
  basicView("Reply @" + update.screenName) {
    inputs {
      inputText(text)
    }
  }
}

screen showUpdates(account : Account) {
  init {
    async {
      updateStream(account);
    }
    async {
      updateMentions(account);
    }
  }
  backButton("Accounts", onclick={ screen return; })
  <img src="lib/img/compose.png" onclick={ newTweet(account); } class="topRight"/>

  template showTweets(coll : Collection<TwitterUpdate>) {
    var limit = 10
    <div id="tweets">
    list(update in coll.limit(limit)) {
      <div class="tweet" onclick={ showUpdate(update); }>
        <span class="icon"><img src=update.iconUrl width="48" height="48"/></span>
        <span class="text">
          <strong>outputString(update.screenName) ": "</strong>
          outputString(update.text)
          <span class="meta">"Posted " outputDate(update.date)</span>
        </span>
      </div>
    }
    altButton("Load more", onclick={ limit = limit + 10; })
    </div>
  }
  template timeline() {
    showTweets(account.updates.filter("mention", "=", false).order("date", false))
  }
  template mentions() {
    showTweets(account.updates.filter("mention", "=", true).order("date", false))
  }
  template search() {
    var phrase = "#mobl"
    var searchPhrase = ""
    var limit = 10
    searchbox(phrase, onsearch={ searchPhrase = phrase; })
    <div id="tweets">
    list(twupdate in twitter::search(searchPhrase).limit(limit)) {
      <div class="tweet">
        <span class="icon"><img src=twupdate.profile_image_url width="48" height="48"/></span>
        <span class="text">
          <strong>outputString(twupdate.from_user) ": "</strong>
          outputString(twupdate.text)
          <span class="meta">"Posted " outputDate(twupdate.created_at)</span>
        </span>
      </div>
    }
    altButton("Load more", onclick={ limit = limit + 10; })
    </div>
  }
  tabset([("All", "lib/toolbar/icon_users.png", timeline), ("Mentions", "lib/toolbar/icon_users.png", mentions), ("Search", "lib/toolbar/icon_users.png", search)])
}

screen showUpdate(update : TwitterUpdate) {
  backButton("Timeline", onclick={ screen return; })
  basicView("Tweet", toolBar=template { toolbarButton("post", onclick={ replyTweet(update); }) }) {
    <div class="bubble">
      outputString(update.text)
      <span class="meta">"Posted " outputDate(update.date)</span>
    </div>
    <div class="postermeta">
      <img src=update.iconUrl width="48" height="48" align="middle"/> " "
      outputString(update.screenName)
    </div>
  }
}