decred.org/dcrdex@v1.0.3/client/webserver/site/src/html/order.tmpl (about)

     1  {{define "microIcon"}}
     2  <img src="/img/coins/{{baseAssetSymbol .}}.png" class="micro-icon">
     3  {{end}}
     4  
     5  {{define "order"}}
     6  {{template "top" .}}
     7  {{$ord := .Order}}
     8  <div id="main" data-handler="order" class="main w-100 overflow-y-auto" data-oid="{{$ord.ID}}">
     9    <div class="px-5">
    10      <div class="px-1 py-2">
    11        <span class="fs22 demi me-2">[[[Order]]]</span>
    12        <span class="fs18" dir="ltr">{{$ord.ID}}</span>
    13        <span class="float-end ms-2"><a href="/orders" class="d-inline-block subtlelink fs15"><span class="fs12 ico-textfile"></span> [[[see all orders]]]</a></span>
    14      </div>
    15      {{- /* DATA CARDS */ -}}
    16      <div class="d-flex flex-wrap">
    17        <div class="order-datum border my-1 me-2">
    18          <div class="border-bottom py-1 px-3">[[[Exchange]]]</div>
    19          <div class="py-1 px-3">{{$ord.Host}}</div>
    20        </div>
    21        <div class="order-datum border my-1 me-2">
    22          <div class="border-bottom py-1 px-3">[[[Market]]]</div>
    23          <a href="/markets?host={{$ord.Host}}&base={{$ord.BaseID}}&quote={{$ord.QuoteID}}" class="plainlink hoverbg py-1 px-3">
    24            {{template "microIcon" $ord.BaseSymbol}} {{template "microIcon" $ord.QuoteSymbol}}
    25            <span id="mktBaseSymbol">{{toUpper $ord.BaseSymbol}}</span>-<span id="mktQuoteSymbol">{{toUpper $ord.QuoteSymbol}}</span>
    26          </a>
    27        </div>
    28        <div class="order-datum border my-1 me-2">
    29          <div class="border-bottom py-1 px-3">[[[Type]]]</div>
    30          <div class="py-1 px-3">{{ $ord.TypeString }}</div>
    31        </div>
    32        <div class="order-datum border my-1 me-2">
    33          <div class="border-bottom py-1 px-3">[[[Status]]]</div>
    34          <div class="py-1 px-3">
    35            <span id="status">{{$ord.StatusString}}</span>
    36            {{if $ord.Cancelable}}
    37              <span id="cancelBttn" class="ico-cross fs12 ms-1 pointer hoverbg" data-tooltip="[[[cancel_order]]]"></span>
    38            {{end}}
    39          </div>
    40        </div>
    41        <div class="order-datum border my-1 me-2">
    42          <div class="border-bottom py-1 px-3">[[[Offering]]]</div>
    43          <div class="py-1 px-3">{{$ord.OfferString}} {{$ord.FromTicker}} {{template "microIcon" $ord.FromSymbol}}</div>
    44        </div>
    45        <div class="order-datum border my-1 me-2">
    46          <div class="border-bottom py-1 px-3">[[[Asking]]]</div>
    47          <div class="py-1 px-3">
    48            {{if (not $ord.IsMarketOrder)}}
    49              {{$ord.AskString}}
    50            {{end}}
    51            {{$ord.ToSymbol}} {{template "microIcon" $ord.ToSymbol}}
    52          </div>
    53        </div>
    54        <div class="order-datum border my-1 me-2">
    55          <div class="border-bottom py-1 px-3">[[[Rate]]]</div>
    56          <div class="py-1 px-3">{{$ord.RateString}}</div>
    57        </div>
    58        <div class="order-datum border my-1 me-2">
    59          <div class="border-bottom py-1 px-3">[[[Filled]]]</div>
    60          <div class="py-1 px-3">
    61            {{$ord.FilledPercent}}%
    62            ({{$ord.FilledFrom}} {{template "microIcon" $ord.FromSymbol}}
    63            &rarr;
    64            {{$ord.FilledTo}} {{template "microIcon" $ord.ToSymbol}})
    65          </div>
    66        </div>
    67        <div class="order-datum border my-1 me-2">
    68          <div class="border-bottom py-1 px-3">[[[Settled]]]</div>
    69          <div class="py-1 px-3">
    70            {{$ord.SettledPercent}}%
    71            ({{$ord.SettledFrom}} {{template "microIcon" $ord.FromSymbol}}
    72            &rarr;
    73            {{$ord.SettledTo}} {{template "microIcon" $ord.ToSymbol}})
    74          </div>
    75        </div>
    76        <div class="order-datum border my-1 me-2">
    77          <div class="border-bottom py-1 px-3">[[[Fees]]] <span class="ico-info fs12" data-tooltip="[[[order_fees_tooltip]]]"></span></div>
    78          <div class="py-1 px-3">
    79            {{$ord.SwapFeesString}} {{template "microIcon" $ord.FromFeeSymbol}},
    80            {{$ord.RedemptionFeesString}} {{template "microIcon" $ord.ToFeeSymbol}}
    81          </div>
    82        </div>
    83        <div class="order-datum border my-1 me-2">
    84          <div class="border-bottom py-1 px-3">[[[Age]]]</div>
    85          <div class="py-1 px-3" data-stamp="{{$ord.SubmitTime}}"></div>
    86        </div>
    87      </div> {{- /* END DATA CARDS */ -}}
    88  
    89      {{- /* ACTIONS */ -}}
    90      <div class="fs18 demi pt-4 pb-2 d-hide" id="actionsLabel">[[[Actions]]]</div>
    91      <div class="d-flex align-items-stretch justify-content-start flex-wrap">
    92        <button id="accelerateBttn" type="button" class="px-2 py-1 fs15 go d-hide">[[[accelerate]]]</button>
    93      </div>
    94  
    95      {{- /* MATCHES */ -}}
    96      <div class="fs18 demi pt-4 pb-2{{if eq (len $ord.Matches) 0}} d-hide{{end}}" id="matchesLabel">[[[Matches]]]</div>
    97      <div class="d-flex align-items-stretch justify-content-start flex-wrap" id="matchBox">
    98  
    99        <div class="match-card me-4 mb-2 border" id="matchCardTmpl">
   100          <div class="match-header mb-2 p-2">
   101            <div class="d-flex justify-content-between align-items-center">
   102              <span class="match-data-label ms-3">[[[Match ID]]]</span>
   103            </div>
   104            <div class="mono mx-3 fs15" data-tmpl="matchID"></div>
   105          </div>
   106  
   107          <div class="row py-2">
   108            <div class="col-10 text-center">
   109              <span class="match-data-label" data-tmpl="statusHdr">[[[Status]]]</span><br>
   110              <span class="fs15" data-tmpl="status"></span>
   111            </div>
   112            <div class="col-14 text-center">
   113              <span class="match-data-label">[[[Time]]]</span><br>
   114              <span class="fs15" data-tmpl="matchTime"></span>
   115              <span class="fs14">(<span class="fs15" data-tmpl="matchTimeAgo"></span> [[[ago]]])</span>
   116            </div>
   117          </div>
   118  
   119          <div data-tmpl="cancelInfoDiv">
   120            <div class="text-center fs20 text-danger">[[[Cancellation]]]</div>
   121            <div class="text-center fs16" data-tmpl="cancelInfo">
   122              <span data-tmpl="cancelAmount"></span> <img src="" class="micro-icon" data-tmpl="cancelIcon"> (<span data-tmpl="cancelOrderPortion"></span>)
   123            </div>
   124          </div>
   125  
   126          <div data-tmpl="infoDiv">
   127            <div class="text-center demi fs20 py-2" data-tmpl="fromToDiv">
   128              <span data-tmpl="fromAmount"></span> <img src="" class="micro-icon" data-tmpl="fromIcon">
   129              &rarr;
   130              <span data-tmpl="toAmount"></span> <img src="" class="micro-icon" data-tmpl="toIcon">
   131            </div>
   132  
   133            <div class="row py-2">
   134              <div class="col-10 text-center">
   135                <span class="match-data-label">[[[Rate]]]</span><br>
   136                <span class="fs15" data-tmpl="rate"></span>
   137              </div>
   138              <div class="col-7 text-center">
   139                <span class="match-data-label">[[[Side]]]</span><br>
   140                <span class="fs15" data-tmpl="side"></span>
   141              </div>
   142              <div class="col-7 text-center">
   143                <span class="match-data-label">[[[Order Portion]]]</span><br>
   144                <span class="fs15" data-tmpl="orderPortion">
   145                  <span data-tmpl="orderPortion"></span>
   146                </span>
   147              </div>
   148            </div>
   149  
   150            <div class="pt-3">
   151              <div class="px-3 pb-3 d-hide" data-tmpl="makerSwap">
   152                <div class="d-inline-block">
   153                  <div class="d-flex align-items-center justify-content-between">
   154                    <span class="match-data-label">1. [[[Maker Swap]]] (<span data-tmpl="makerSwapAsset"></span>, <span data-tmpl="makerSwapYou">[[[you]]]</span><span data-tmpl="makerSwapThem">[[[them]]]</span>)</span>
   155                    <span class="match-data-label" data-tmpl="makerSwapMsg"></span>
   156                  </div>
   157                  <span data-tmpl="makerSwapPending">&lt;[[[Pending]]]&gt;</span>
   158                  <a target="_blank" class="mono plainlink" data-tmpl="makerSwapCoin"></a>
   159                </div>
   160              </div>
   161              <div class="px-3 pb-3 d-hide" data-tmpl="takerSwap">
   162                <div class="d-inline-block">
   163                  <div class="d-flex align-items-center justify-content-between">
   164                    <span class="match-data-label">2. [[[Taker Swap]]] (<span data-tmpl="takerSwapAsset"></span>, <span data-tmpl="takerSwapYou">[[[you]]]</span><span data-tmpl="takerSwapThem">[[[them]]]</span>)</span>
   165                    <span class="match-data-label" data-tmpl="takerSwapMsg"></span>
   166                  </div>
   167                  <span data-tmpl="takerSwapPending">&lt;[[[Pending]]]&gt;</span>
   168                  <a target="_blank" class="mono plainlink" data-tmpl="takerSwapCoin"></a>
   169                </div>
   170              </div>
   171              <div class="px-3 pb-3 d-hide" data-tmpl="makerRedeem">
   172                <div class="d-inline-block">
   173                  <div class="d-flex align-items-center justify-content-between">
   174                    <span class="match-data-label">3. [[[Maker Redemption]]] (<span data-tmpl="makerRedeemAsset"></span>, <span data-tmpl="makerRedeemYou">[[[you]]]</span><span data-tmpl="makerRedeemThem">[[[them]]]</span>)</span>
   175                    <span class="match-data-label" data-tmpl="makerRedeemMsg"></span>
   176                  </div>
   177                  <span data-tmpl="makerRedeemPending">&lt;[[[Pending]]]&gt;</span>
   178                  <a target="_blank" class="mono plainlink" data-tmpl="makerRedeemCoin"></a>
   179                </div>
   180              </div>
   181              <div class="px-3 pb-3 d-hide" data-tmpl="takerRedeem">
   182                <div class="d-inline-block">
   183                  <div class="d-flex align-items-center justify-content-between">
   184                    <span class="match-data-label">4. [[[Taker Redemption]]] (<span data-tmpl="takerRedeemAsset"></span>, <span data-tmpl="takerRedeemYou">[[[you]]]</span><span data-tmpl="takerRedeemThem">[[[them]]]</span>)</span>
   185                    <span class="match-data-label" data-tmpl="takerRedeemMsg"></span>
   186                  </div>
   187                  <span data-tmpl="takerRedeemPending">&lt;[[[Pending]]]&gt;</span>
   188                  <a target="_blank" class="mono plainlink" data-tmpl="takerRedeemCoin"></a>
   189                </div>
   190              </div>
   191              <div class="px-3 pb-3 d-hide" data-tmpl="refund">
   192                <span class="match-data-label text-danger">[[[Refund]]] (<span data-tmpl="refundAsset"></span>, [[[you]]])</span><br>
   193                <span data-tmpl="refundPending"></span>
   194                <a target="_blank" class="mono plainlink" data-tmpl="refundCoin"></a>
   195              </div>
   196            </div>
   197          </div>
   198        </div>
   199      </div>
   200  
   201      {{- /* FUNDING COINS */ -}}
   202      <div class="order-datum d-inline-block border my-3">
   203        <div class="text-start p-2">[[[Funding Coins]]]</div>
   204        <div class="fs14 text-start p-2">
   205          {{range $ord.FundingCoins}}
   206            <a target="_blank" class="plainlink mono" data-explorer-id="{{$ord.FromID}}" data-explorer-coin="{{.StringID}}">{{.StringID}}</a><br>
   207          {{end}}
   208        </div>
   209      </div>
   210  
   211      <div id="accelerationCoins" class="order-datum d-inline-block my-3 {{if not $ord.AccelerationCoins}}d-hide{{end}}">
   212        <div class="text-start">[[[acceleration_transactions]]]</div>
   213        <div class="fs14 text-start">
   214          {{range $ord.AccelerationCoins}}
   215            <a target="_blank" class="plainlink mono" data-explorer-id="{{$ord.FromID}}" data-explorer-coin="{{.StringID}}">{{.StringID}}</a><br>
   216          {{end}}
   217        </div>
   218      </div>
   219  
   220    </div>
   221    <div id="vOrderOpts">
   222      {{template "orderOptionTemplates"}}
   223    </div>
   224    <div id="forms" class="d-hide">
   225      <form class="d-hide" id="cancelForm" autocomplete="off">
   226        {{template "cancelOrderForm" .}}
   227      </form>
   228      <form class="d-hide" id="accelerateForm"  autocomplete="off">
   229        {{template "accelerateForm" .}}
   230      </form> 
   231    </div>
   232  </div>
   233  {{template "bottom"}}
   234  {{end}}