CBO-Simplifier/explore.html at master · markjm/CBO-Simplifier · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>CBO Simplifier</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap-flatly.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <link href="css/customcss.css" rel="stylesheet">
    <style type="text/css">
    .form-group {
        background: WhiteSmoke;
    }
    </style>
</head>

<body>

    <div id="fb-root"></div>
    <script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>

    <script type="text/javascript">
    var apiurl = 'http://wwwp.cs.unc.edu/~camarche/426';
    var apiappend = '/api.php/bills?order=date+desc';
    var editable = false;
    </script>

    <nav class="navbar navbar-default" data-spy="affix" data-offset-top="71" data-offset-bottom="300">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li><a class="navbar-brand" href="index.html">Home</a></li>
                <li><a href="explore.html">Explore</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contribute.html">Contribute</a></li>
            </ul>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row content">
            <div id="sorts" class="col-md-4 text-center" data-spy="">
                <form class="form-horizontal">
                    <div class="panel form-group">
                        <label class="pull-left">Date</label>
                        <div class="btn-group pull-right">
                            <button id="date+desc" type="button" class="btn btn-default" aria-label="Left Align">
                                <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            </button>
                            <button id="date+asc" type="button" class="btn btn-default" aria-label="Left Align">
                                <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                    <div class="panel form-group">
                        <label class="pull-left">Committee</label>
                        <div class="btn-group pull-right">
                            <button id="committee+asc" type="button" class="btn btn-default" aria-label="Left Align">
                                <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                            </button>
                            <button id="committee+desc" type="button" class="btn btn-default" aria-label="Left Align">
                                <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                    <div class="panel form-group">
                        <label class="pull-left">Net Cost</label>
                        <div class="btn-group pull-right">
                            <button id="net+asc" type="button" class="btn btn-default" aria-label="Left Align">
                                <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                            </button>
                            <button id="net+desc" type="button" class="btn btn-default" aria-label="Left Align">
                                <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                </form>
                <button id="apply-filter" class="btn btn-primary btn-block">Apply Sort</button>
            </div>
            <div id="info" class="col-md-8">
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/retrieval.js"></script>


    <script type="text/javascript">
    var buttons = $(".btn-default");
    var last = null;
    buttons.click(function() {
        if (last) {
            last.toggleClass("btn-default btn-success");
        }
        $(this).toggleClass("btn-default btn-success");
        last = $(this);
    });

    var filter = $("#apply-filter");
    filter.click(function() {
        var selected = $(".btn-success").attr('id');
        apiappend = '/api.php/bills?order=' + selected;
        var list = $('#info');
        list.empty();
        loadPage();
    });
    </script>
</body>

</html>