wire transfer

public/js/components/ATMDisplay.js

@@ -0,0 +1,78 @@
+import { get_balance, atm_transfer } from '../api/atm.js';
+import { get_claims, is_logged_in } from "../service/login.js";
+
+
+export default {
+    props: ["username"],
+    data: function() {
+        return {
+            balance: 0,
+            target: "",
+            amount: 0,
+            errmsg: "",
+            busy: false,
+            done: false
+        };
+    },
+    mounted: function() {
+        this.update();
+    },
+    methods: {
+        update: function() {
+            get_balance(this.username).then(r => this.balance = r.balance);
+        },
+        transfer: function() {
+            this.errmsg = "";
+            this.done = false;
+            this.busy = true;
+
+            atm_transfer({
+                target: this.target,
+                amount: this.amount
+            })
+            .then(r => {
+                if (r.success) {
+                    this.done = true;
+                    this.amount = 0;
+                    this.balance = r.source_balance;
+                } else {
+                    this.errmsg = r.errmsg;
+                }
+
+                this.busy = false;
+            });
+        },
+        format_money: function(x) {
+            // https://stackoverflow.com/questions/2901102/how-to-format-a-number-with-commas-as-thousands-separators
+            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "'");
+        }
+    },
+    computed: {
+        can_transfer: function() {
+            return (is_logged_in() && get_claims().username == this.username);
+        }
+    },
+    template: /*html*/`
+    <div>
+        Your balance: <b>$ {{ format_money(balance) }}</b>
+        <div v-if="can_transfer">
+            <hr>
+            <h5>Wiretransfer</h5>
+            <span class="input-group">
+                <input type="text" class="form-control" placeholder="Receiving player" v-model="target" :disabled="busy"/>
+                <input type="number" min="0" class="form-control" placeholder="Amount" v-model="amount" :disabled="busy"/>
+                <button class="btn btn-secondary" v-on:click="transfer" :disabled="!target || !amount || busy">
+                    <i class="fa fa-spinner fa-spin" v-if="busy"></i>
+                    <i class="fa-solid fa-credit-card" v-else></i>
+                    Transfer
+                    <i class="fa-solid fa-check" v-if="done"></i>
+                </button>
+            </span>
+            <div class="alert alert-danger" v-if="errmsg">
+                <i class="fa fa-exclamation-mark"></i>
+                <b>Wiretransfer error: </b> {{errmsg}}
+            </div>
+        </div>
+    </div>
+    `
+};

public/js/components/Userprofile.js

@@ -1,4 +1,6 @@
 import ChangePassword from './ChangePassword.js';
+import ATMDisplay from './ATMDisplay.js';
+
 import { has_priv, get_claims, is_logged_in } from "../service/login.js";
 import { has_feature } from "../service/features.js";
 import { get as get_playerinfo } from '../api/playerinfo.js';
@@ -7,23 +9,22 @@ import format_time from '../util/format_time.js';
 import format_duration from '../util/format_duration.js';
 import format_count from '../util/format_count.js';
 import { execute_chatcommand } from "../api/chatcommand.js";
-import { get_balance } from '../api/atm.js';
 
 export default {
     props: ["username"],
     data: function() {
         return {
             playerinfo: null,
             xban_record: null,
-            new_priv: "",
-            balance: 0
+            new_priv: ""
         };
     },
     mounted: function() {
         this.update();
     },
     components: {
-        "change-password": ChangePassword
+        "change-password": ChangePassword,
+        "atm-display": ATMDisplay
     },
     computed: {
         can_change_pw: function() {
@@ -36,10 +37,6 @@ export default {
     methods: {
         update_playerinfo: function() {
             get_playerinfo(this.username).then(pi => this.playerinfo = pi);
-
-            if (has_feature("atm")) {
-                get_balance(this.username).then(r => this.balance = r.balance);
-            }
         },
         update: function() {
             this.playerinfo = null;
@@ -66,10 +63,6 @@ export default {
         format_time: format_time,
         format_duration: format_duration,
         format_count: format_count,
-        format_money: function(x) {
-            // https://stackoverflow.com/questions/2901102/how-to-format-a-number-with-commas-as-thousands-separators
-            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "'");
-        },
         getPrivBadgeClass: function(priv) {
             if (priv == "server" || priv == "privs") {
                 return { "badge": true, "bg-danger": true };
@@ -170,11 +163,11 @@ export default {
                 <br>
                 <div class="card" v-if="has_feature('atm')">
                     <div class="card-header">
-                        <i class="fa-solid fa-money"></i>
+                        <i class="fa-solid fa-money-bill"></i>
                         ATM
                     </div>
                     <div class="card-body">
-                        Your balance: <b>$ {{ format_money(balance) }}</b>
+                        <atm-display :username="username"/>
                     </div>
                 </div>
                 <br v-if="has_feature('atm')">

types/command/atm.go

@@ -15,8 +15,8 @@ type ATMTransferRequest struct {
 }
 
 type ATMTransferResponse struct {
-	Success      bool          `json:"success"`
-	ErrorMessage string        `json:"errmsg"`
-	SourceAmount types.JsonInt `json:"source_amount"`
-	TargetAmount types.JsonInt `json:"target_amount"`
+	Success       bool          `json:"success"`
+	ErrorMessage  string        `json:"errmsg"`
+	SourceBalance types.JsonInt `json:"source_balance"`
+	TargetBalance types.JsonInt `json:"target_balance"`
 }