expense-manager/index.html at master · mitul45/expense-manager · 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>

<head>
  <title>Expense Manager</title>
  <meta charset='utf-8' />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="vendor/mdl/material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="vendor/mdl/material.min.js"></script>
  <link rel="icon" type="image/png" href="icons/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="icons/favicon-16x16.png" sizes="16x16" />
  <link rel="manifest" href="manifest.json">
</head>

<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">
          Expense Manager
        </span>
        <div class="mdl-layout-spacer"></div>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="#" id="signout-button">Logout</a>
          <a class="mdl-navigation__link" href="https://github.com/mitul45/expense-manager" title="Fork me on Github">
            <svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 438.549 438.549">
              <path fill="#FFF" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736 15.166 259.057 5.365 219.27 5.365c-39.78 0-76.47 9.804-110.062 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.853 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.42-1.996 2.474-2.282 3.71-5.14 3.71-8.562 0-.57-.05-5.708-.144-15.417-.098-9.71-.144-18.18-.144-25.406l-6.567 1.136c-4.187.767-9.47 1.092-15.846 1-6.375-.09-12.992-.757-19.843-2-6.854-1.23-13.23-4.085-19.13-8.558-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.9-9.233-8.992-14.56-4.093-5.33-8.232-8.944-12.42-10.847l-1.998-1.43c-1.332-.952-2.568-2.1-3.71-3.43-1.143-1.33-1.998-2.663-2.57-3.997-.57-1.335-.097-2.43 1.428-3.29 1.525-.858 4.28-1.275 8.28-1.275l5.708.853c3.807.763 8.516 3.042 14.133 6.85 5.615 3.807 10.23 8.755 13.847 14.843 4.38 7.807 9.657 13.755 15.846 17.848 6.184 4.093 12.42 6.136 18.7 6.136 6.28 0 11.703-.476 16.273-1.423 4.565-.95 8.848-2.382 12.847-4.284 1.713-12.758 6.377-22.56 13.988-29.41-10.847-1.14-20.6-2.857-29.263-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.98-3.9-12.373-5.852-26.647-5.852-42.825 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.38-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.284 18.794 7.953 23.84 10.995 5.046 3.04 9.09 5.618 12.135 7.708 17.706-4.947 35.977-7.42 54.82-7.42s37.116 2.473 54.822 7.42l10.85-6.85c7.418-4.57 16.18-8.757 26.26-12.564 10.09-3.806 17.803-4.854 23.135-3.14 8.562 21.51 9.325 40.923 2.28 58.24 15.035 16.18 22.558 35.788 22.558 58.818 0 16.178-1.958 30.497-5.853 42.966-3.9 12.47-8.94 22.457-15.125 29.98-6.19 7.52-13.9 13.85-23.13 18.985-9.233 5.14-18.183 8.85-26.84 11.135-8.663 2.286-18.416 4.004-29.264 5.146 9.894 8.563 14.842 22.078 14.842 40.54v60.237c0 3.422 1.19 6.28 3.572 8.562 2.38 2.278 6.136 2.95 11.276 1.994 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.16 41.826-81.126 41.826-128.906-.01-39.77-9.818-76.454-29.414-110.05z"
              />
            </svg>
          </a>
        </nav>
      </div>
    </header>
    <main class="mdl-layout__content">
      <div class="page-content">
        <div class="flex-container">
          <button id="authorize-button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Login</button>
          <div class="mdl-spinner mdl-js-spinner is-active" id="form-loader"></div>

          <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect" id="forms">
            <div class="mdl-tabs__tab-bar">
              <a href="#add-expense" class="mdl-tabs__tab is-active"> Expense</a>
              <a href="#transfer" class="mdl-tabs__tab"> Transfer </a>
            </div>

            <div class="mdl-tabs__panel is-active" id="add-expense">
              <form id="expense-form">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                  <input class="mdl-textfield__input" type="text" id="expense-description" data-required>
                  <label class="mdl-textfield__label" for="expense-description">Description</label>
                </div>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                  <input class="mdl-textfield__input" type="date" id="expense-date" data-required>
                </div>
                <div class="dropdown">
                  <span>From Account</span>
                  <select id="expense-account" data-required></select>
                </div>
                <div class="dropdown">
                  <span>Category</span>
                  <select id="expense-category" data-required></select>
                </div>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                  <input class="mdl-textfield__input" type="number" id="expense-amount" step="0.01" data-required>
                  <label class="mdl-textfield__label" for="expense-amount">Amount</label>
                </div>
                <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="is-income">
                    <input type="checkbox" id="is-income" class="mdl-switch__input" />
                    <span class="mdl-switch__label"> income? </span>
                </label>
                <br>
                <br>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="add-expesne" type="submit">
                    Save
                </button>
              </form>
            </div>
            <div class="mdl-tabs__panel" id="transfer">
              <form id="transfer-form">
                <p id="tt1"><i class="material-icons">info</i>&nbsp;What is this?</p>
                <span for="tt1" class="mdl-tooltip">Record a transaction which is not expense/income. e.g. paying for your credit card bills (saving account -> credit card), withdrawing cash (checkings account -> cash), or making an investment.</span>

                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                  <input class="mdl-textfield__input" type="text" id="transfer-description" data-required>
                  <label class="mdl-textfield__label" for="transfer-description">Description</label>
                </div>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                  <input class="mdl-textfield__input" type="date" id="transfer-date" data-required>
                  <label class="mdl-textfield__label" for="transfer-date">Date</label>
                </div>
                <div class="dropdown">
                  <span>From Account</span>
                  <select id="transfer-from-account" data-required>
                  </select>
                </div>
                <div class="dropdown">
                  <span>To Account</span>
                  <select id="transfer-to-account" data-required>
                  </select>
                </div>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                  <input class="mdl-textfield__input" type="number" id="transfer-amount" step="0.01" data-required>
                  <label class="mdl-textfield__label" for="transfer-amount">Amount</label>
                </div>
                <br>
                <br>
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="save" type="submit"
                  onclick="addExpense(event)">
                                    Save
                </button>
              </form>
            </div>
          </div>

          <footer class="footer">
            Built using <a href="https://developers.google.com/sheets/">Google Sheets API</a> and <a href="https://getmdl.io">Material Design Lite</a>            by <a href="https://mitul45.github.io">Mitul</a>. Hosted on <a href="https://pages.github.com/">GitHub Pages</a>.
          </footer>
        </div>
        <div id="toast-container" class="mdl-js-snackbar mdl-snackbar">
          <div class="mdl-snackbar__text"></div>
          <button class="mdl-snackbar__action" type="button"></button>
        </div>
      </div>
    </main>
  </div>

  <script type="text/javascript" src="utils.js"></script>
  <script type="text/javascript" src="expense.js"></script>
  <script type="text/javascript" src="transfer.js"></script>
  <script type="text/javascript" src="init.js"></script>
  <script type="text/javascript" src="register-serviceworker.js"></script>

  <script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()"
    id="google-api">

    </script>

  <!--  GA -->
  <script>
    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-84862014-2', 'auto');
    ga('send', 'pageview');
  </script>
</body>

</html>