convert_fe/view.html at master · tosinek/convert_fe · 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
<html>
<head>
  <link rel="stylesheet" href="view.css">
</head>

<body>
  <div id="app">
    <h1>Currency conversion</h1>
    <div>
      <input type="number" id="amount" v-model="amount" placeholder="amount">
      <select-currency id="from" @set-currency="setCurrency"></select-currency> >
      <select-currency id="to" @set-currency="setCurrency"></select-currency>
      <button @click="convert" type="button">Convert</button>
    </div>

    <div>
      <h2 :class="{ isError }">{{result}}</h2>
    </div>

    <div class="divider"></div>

    <div>
      <h1>Stats</h1>
      <div v-if="fetchingStats">
        Loading
      </div>
      <div v-else>
        Requests: {{ stats.conversionCount }}, converted: ${{ formatNumber(stats.conversionAmountInUsd) }}, most popular: {{ mostPopular }}
      </div>
    </div>

    <div class="divider"></div>

    <div>
      <h1>Problems</h1>
      <ul>
        <li>Vue: First time using Vue.</li>
        <li>Lambda: First time using Lambda.</li>
        <li>Lambda: Setup CORS on the gateway.</li>
        <li>Lambda: Returning from promise vs callback mode. I ended up wraping http.get as a promise.</li>
        <li>Lambda: Setup debugging on localhost. Docker doesn't want to start the daemon. I have to painfully debug with console.logs on CloudWatch.</li>
        <li>Lambda: Importing NPM modules (wanted to use e.g. node-fetch). No solution as it requires local dev setup (docker start issue).</li>
        <li>Lambda: Permissions for invoking other functions.</li>
        <li>Dynamo: First time using DynamoDB.</li>
        <li>Dynamo: Permissions issues, although my account has full access everywhere. Solution: generate policy, attach to the Lambda fn, remove the condition.</li>
        <li>JS: Big numbers will be rounded. There are specialized libraries for big number support.</li>
      </ul>
    </div>

    <div class="divider"></div>

    <div>
      <h1>Author</h1>
      <div>Tom Soukup, tosinek@gmail.com</div>
      <div><a href="https://github.com/tosinek/convert_fe">VueJS repo</a>, <a href="https://github.com/tosinek/convert_be">AWS Lambda repo</a></div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="view.js"></script>
</body>