@using StackApis.ServiceModel

@inherits ViewPage

@{

ViewBag.Title = "ServiceStack Questions";

}

<script>

var app = angular.module('soApp', []);

app.controller('soCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {

$scope.makeRequest = function (path) {

$http.get(path).success(function (response) {

$scope.questionsResult = response.Results;

});

};

$('input,select').change(function () {

$scope.makeRequest(constructUrl());

});

function processInputChange() {

if ($scope.titleSearchTimeout != null) {

$timeout.cancel($scope.titleSearchTimeout);

$scope.titleSearchTimeout = null;

}

$scope.titleSearchTimeout = $timeout(function () {

$scope.makeRequest(constructUrl());

}, 200);

}

$scope.titleSearchTimeout = null;

var watch = ['titleSearch', 'scoreSelect', 'scoreVal', 'viewsSelect', 'viewsVal', 'answersSelect', 'answersVal', 'orderBySelect'];

angular.forEach(watch, function (input) {

$scope.$watch(input, processInputChange);

});

function constructUrl(model) {

var path = '@(new StackOverflowQuery().ToGetUrl())' +

'?Score' + ($scope.scoreSelect || 'GreaterThan') + '=' + ($scope.scoreVal || 0) +

'&ViewCount' + ($scope.viewsSelect || 'GreaterThan') + '=' + ($scope.viewsVal || 0) +

'&AnswerCount' + ($scope.answersSelect || 'GreaterThan') + '=' + ($scope.answersVal || 0) +

'&OrderByDesc=' + ($scope.orderBySelect || 'Score') +

($scope.titleSearch ? '&TitleContains=' + $scope.titleSearch : '');

return path;

}

$scope.filterResult = function () {

$scope.makeRequest(constructUrl());

};

$scope.scoreSelect = 'GreaterThan';

$scope.viewsSelect = 'GreaterThan';

$scope.answersSelect = 'GreaterThan';

$scope.orderBySelect = 'Score';

$scope.makeRequest('/questions');

}]);

</script>

<div ng-app="soApp">

<div ng-controller="soCtrl">

<input type="text" name="titleSearch" ng-model="titleSearch" class="input-lg" placeholder="Title search" style="width:100%" />

<div class="col-sm-6 col-md-3 col-lg-3">

<form style="margin-top:32px">

<div>

<div class="form-group">

<select id="filterScoreBySelect" class="form-control" ng-model="scoreSelect">

<option value="GreaterThan">Score greater than</option>

<option value="LessThan">Score less than</option>

</select>

</div>

<div class="form-group">

<input id="scoreInput" class="form-control" type="number" placeholder="Score" ng-model="scoreVal" />

</div>

<div class="form-group">

<select id="filterViewsBySelect" class="form-control" ng-model="viewsSelect">

<option value="GreaterThan">Views greater than</option>

<option value="LessThan">Views less than</option>

</select>

</div>

<div class="form-group">

<input id="viewsInput" class="form-control" type="number" placeholder="Views" ng-model="viewsVal" />

</div>

<div class="form-group">

<select id="filterAnswersBySelect" class="form-control" ng-model="answersSelect">

<option value="GreaterThan">Answers greater than</option>

<option value="LessThan">Answers less than</option>

</select>

</div>

<div class="form-group">

<input id="answerInput" class=" form-control" type="number" placeholder="Answers" ng-model="answersVal"/>

</div>

<div class="form-group">

<label>

Order by <select id="orderByDescSelect" ng-model="orderBySelect">

<option value="Score">Score</option>

<option value="ViewCount">Views</option>

<option value="AnswerCount">Answers</option>

</select> descending

</label>

</div>

</div>

</form>

</div>

<div class="col-sm-6 col-md-9 col-lg-9">

<table class="table">

<thead>

<tr>

<th>Score</th>

<th>Answers</th>

<th>Title</th>

<th>Total Views</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="question in questionsResult">

<td ng-bind="question.Score"></td>

<td ng-bind="question.AnswerCount"></td>

<td><a href="{{question.Link}}">{{question.Title}}</a></td>

<td ng-bind="question.ViewCount"></td>

</tr>

</tbody>

</table>

</div>

</div>

</div>