Rework minor ui and bugs

api/models.py

@@ -44,8 +44,8 @@ class Order(models.Model):
         UPI = 15, 'Updated invoice'
         DIS = 16, 'In dispute'
         MLD = 17, 'Maker lost dispute'
-        # TLD = 18, 'Taker lost dispute'
+        TLD = 18, 'Taker lost dispute'
-        # EXP = 19, 'Expired'
+        EXP = 19, 'Expired'
 
     # order info
     status = models.PositiveSmallIntegerField(choices=Status.choices, null=False, default=int(Status.WFB))
@@ -77,7 +77,7 @@ class Order(models.Model):
     # buyer payment LN invoice
     has_invoice = models.BooleanField(default=False, null=False) # has invoice and is valid
     invoice = models.CharField(max_length=300, unique=False, null=True, default=None)
-
+    
 class Profile(models.Model):
 
     user = models.OneToOneField(User,on_delete=models.CASCADE)

api/views.py

@@ -1,4 +1,4 @@
-from rest_framework import status
+from rest_framework import status, serializers
 from rest_framework.generics import CreateAPIView, ListAPIView
 from rest_framework.views import APIView
 from rest_framework import viewsets
@@ -101,19 +101,30 @@ class OrderView(viewsets.ViewSet):
                 data = ListOrderSerializer(order).data
                 nickname = request.user.username
 
-                #To do fix: data['status_message'] = Order.Status.get(order.status).label
+                # Add booleans if user is maker, taker, partipant, buyer or seller
-                data['status_message'] = Order.Status.WFB.label # Hardcoded WFB, should use order.status value.
+                data['is_maker'] = str(order.maker) == nickname
+                data['is_taker'] = str(order.taker) == nickname
+                data['is_participant'] = data['is_maker'] or data['is_taker']
+                data['is_buyer'] = (data['is_maker'] and order.type == int(Order.Types.BUY)) or (data['is_taker'] and order.type == int(Order.Types.SELL))
+                data['is_seller'] = (data['is_maker'] and order.type == int(Order.Types.SELL)) or (data['is_taker'] and order.type == int(Order.Types.BUY))
                 
-                # Check if requester is participant in the order and add boolean to response
+                # If not a participant and order is not public, forbid.
-                data['is_participant'] = (str(order.maker) == nickname or str(order.taker) == nickname)
+                if not data['is_participant'] and order.status != int(Order.Status.PUB):
+                    return Response({'bad_request':'Not allowed to see this order'},status.HTTP_403_FORBIDDEN)
+
+                # return nicks too
                 data['maker_nick'] = str(order.maker)
                 data['taker_nick'] = str(order.taker)
+                
+                #To do fix: data['status_message'] = Order.Status.get(order.status).label
+                # Needs to serialize the order.status into the message.
+                data['status_message'] = Order.Status.WFB.label # Hardcoded WFB, should use order.status value.
 
                 if data['is_participant']:
                     return Response(data, status=status.HTTP_200_OK)
                 else:
-                    # Non participants should not see the status or who is the taker
+                    # Non participants should not see the status, who is the taker, etc
-                    for key in ('status','status_message','taker','taker_nick'):
+                    for key in ('status','status_message','taker','taker_nick','is_maker','is_taker','is_buyer','is_seller'):
                         del data[key]
                     return Response(data, status=status.HTTP_200_OK)
 
@@ -139,6 +150,8 @@ class OrderView(viewsets.ViewSet):
 
             order.taker = self.request.user
             order.status = int(Order.Status.TAK)
+
+            #TODO REPLY WITH HODL INVOICE
             data = ListOrderSerializer(order).data
 
         # An invoice came in! update it

frontend/src/components/OrderPage.js

@@ -2,6 +2,17 @@ import React, { Component } from "react";
 import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider} from "@material-ui/core"
 import { Link } from 'react-router-dom'
 
+function msToTime(duration) {
+  var seconds = Math.floor((duration / 1000) % 60),
+    minutes = Math.floor((duration / (1000 * 60)) % 60),
+    hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+
+  minutes = (minutes < 10) ? "0" + minutes : minutes;
+  seconds = (seconds < 10) ? "0" + seconds : seconds;
+
+  return hours + "h " + minutes + "m " + seconds + "s";
+}
+
 function getCookie(name) {
   let cookieValue = null;
   if (document.cookie && document.cookie !== '') {
@@ -54,6 +65,9 @@ export default class OrderPage extends Component {
             makerNick: data.maker_nick,
             takerId: data.taker,
             takerNick: data.taker_nick,
+            isBuyer:data.buyer,
+            isSeller:data.seller,
+            expiresAt:data.expires_at,
         });
       });
   }
@@ -90,16 +104,43 @@ export default class OrderPage extends Component {
           </Typography>
           <Paper elevation={12} style={{ padding: 8,}}>
           <List dense="true">
-            <ListItem>
+            <ListItem >
               <ListItemAvatar sx={{ width: 56, height: 56 }}>
                 <Avatar 
                   alt={this.state.makerNick} 
                   src={window.location.origin +'/static/assets/avatars/' + this.state.makerNick + '.png'} 
                   />
               </ListItemAvatar>
-              <ListItemText primary={this.state.makerNick} secondary="Order maker" />
+              <ListItemText primary={this.state.makerNick} secondary="Order maker" align="right"/>
             </ListItem>
             <Divider />
+
+            {this.state.isParticipant ?
+              <>
+                {this.state.takerNick!='None' ?
+                  <>
+                    <ListItem align="left">
+                      <ListItemText primary={this.state.takerNick} secondary="Order taker"/>
+                      <ListItemAvatar > 
+                        <Avatar
+                          alt={this.state.makerNick} 
+                          src={window.location.origin +'/static/assets/avatars/' + this.state.takerNick + '.png'}
+                          />
+                      </ListItemAvatar>
+                    </ListItem>
+                    <Divider />               
+                  </>: 
+                  <>
+                    <ListItem>
+                      <ListItemText primary={this.state.statusText} secondary="Order status"/>
+                    </ListItem>
+                    <Divider />
+                  </>
+                  }
+              </>
+            :""
+            }
+            
             <ListItem>
               <ListItemText primary={parseFloat(parseFloat(this.state.amount).toFixed(4))+" "+this.state.currencyCode} secondary="Amount and currency requested"/>
             </ListItem>
@@ -116,31 +157,17 @@ export default class OrderPage extends Component {
             }
             </ListItem>
             <Divider />
-            {this.state.isParticipant ?
+
-              <>
-                <ListItem>
-                  <ListItemText primary={this.state.statusText} secondary="Order status"/>
-                </ListItem>
-              <Divider />
-              { this.state.takerNick!='None' ?
-                <><ListItem>
-                  <ListItemText primary={this.state.takerNick} secondary="Order taker"/>
-                    <ListItemAvatar sx={{ width: 56, height: 56 }}>
-                    <Avatar 
-                      alt={this.state.makerNick} 
-                      src={window.location.origin +'/static/assets/avatars/' + this.state.takerNick + '.png'} 
-                      />
-                  </ListItemAvatar>
-                </ListItem>
-              <Divider /> </>: ""}
-              </>
-            :""
-            }
             <ListItem>
               <ListItemText primary={'#'+this.orderId} secondary="Order ID"/>
             </ListItem>
+            <Divider />
+
+            <ListItem>
+              <ListItemText primary={msToTime( new Date(this.state.expiresAt) - Date.now())} secondary="Expires in "/>
+            </ListItem>
             </List>
-          
+
           </Paper>
 
           <Grid item xs={12} align="center">