order status click row to select

src/charts/shape.js

@@ -173,7 +173,7 @@ export class Shape {
         // text label
         let text = allocationText(this.model.buy, this.model.allocation, this.model.amount, this.model.baseSymbol, this.model.amountSymbol)
         if (this.model.breakout)
-            text += ' ' + (this.model.textLocation==='above' ? '▲Breakout▲' : '▼Breakout▼')
+            text += ' ' + (this.model.textLocation==='above' ? '▲Breakout▲' : '▼Breakdown▼')
         if (this.model.extraText)
             text += ' '+this.model.extraText
         if (this.debug) text = `${this.id} ` + text

src/common.js

@@ -154,3 +154,7 @@ export function timestamp(date = null) {
 export function dateString(datetime) {
     return datetime.toLocaleString({dateStyle: 'medium', timeStyle: 'short'})
 }
+
+export function logicalXOR(a, b) {
+    return (a || b) && !(a && b)
+}

src/components/Status.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <v-data-table :headers="datatableHeaders" :items="orders" item-value="id"
-                  :show-select="true" :show-expand="true" v-model="selected" select-strategy="single">
+                  :show-select="false" :show-expand="true" v-model="selected" select-strategy="single"
+                  :row-props="rowPropsHandler" :hover="true"
+    >
       <template v-slot:item.startTime="{ value }">{{ timestampString(value) }}</template>
       <template v-slot:item.input="{ item }">
         <span v-if="item.order.amountIsInput">
@@ -238,6 +240,11 @@ const datatableHeaders = [
   // {title: '', align: 'end', key: 'action'},
 ];
 
+const rowPropsHandler = ({ item }) => ({
+  class: selected.value.indexOf(item.id) !== -1 ? 'selected-row' : '',
+  onClick: () => selected.value = [item.id],
+})
+
 const orders = computed(()=>{
   // example twap
   // status = [
@@ -393,8 +400,6 @@ function describeTrancheTime(st, trancheIndex, isStart) {
 </script>
 
 <style scoped lang="scss">
-@use "src/styles/vars" as *;
-
 // columns
 .num {
   min-width: 1em;
@@ -417,5 +422,12 @@ function describeTrancheTime(st, trancheIndex, isStart) {
 }
 .cancel {
 }
-
+</style>
+
+<style lang="scss">
+@use "src/styles/settings" as *;
+
+tr.selected-row {
+  background-color: #616161;
+}
 </style>

src/components/chart/DiagonalBuilder.vue

@@ -405,12 +405,12 @@ function dirtyLine(a, b) {
   return result
 }
 
-const name = computed(()=>props.builder.breakout?'Breakout':'Limit')
+const name = computed(()=>props.builder.breakout?(props.order.buy?'Breakout':'Breakdown'):'Limit')
 
 const description = computed(()=>{
   const buy = props.order.buy
   const above = buy === props.builder.breakout
-  const plural = props.builder
+  const plural = props.builder.rungs > 1 ? 's' : ''
   return (buy?'Buy ':'Sell ')+(above?'above':'below')+' the line'+(plural?'s':'')
 })
 

src/components/chart/LimitBuilder.vue

@@ -1,5 +1,5 @@
 <template>
-  <rung-builder :name="(builder.breakout?'Breakout':'Limit')+(builder.rungs>1?' Ladder':'')"
+  <rung-builder :name="(builder.breakout?(order.buy?'Breakout':'Breakdown'):'Limit')+(builder.rungs>1?' Ladder':'')"
                 :description="description"
                 :order="order" :builder="builder"
                 v-model="priceEndpoints" :mode="0" :flip="flipped"
@@ -200,7 +200,8 @@ const stdWidth = computed(()=>co.meanRange)
 const description = computed(()=>{
   const buy = props.order.buy
   const above = buy === props.builder.breakout
-  return (buy?'Buy ':'Sell ')+(above?'above':'below')+' the line'
+  const plural = props.builder.rungs > 1 ? 's' : ''
+  return (buy?'Buy ':'Sell ')+(above?'above':'below')+' the line'+plural
 })
 
 function getModelValue(model) {

src/components/chart/RungBuilder.vue

@@ -18,9 +18,12 @@
                     :disabled="rungsDisabled"
                     style="width: 6.6em; max-height: 2.5em; height: 2.5em"
       />
-      <v-switch v-model="builder.breakout" label="Breakout" persistent-hint :color="color" hide-details/>
+      <v-switch v-model="breakout" :label="order.buy?'Breakout':'Breakdown'"
+                persistent-hint :color="switchColor" :base-color="switchColor" hide-details direction="vertical"
+                density="compact"
+      />
       <div class="mx-auto"><span style="font-size: .7em; vertical-align: top"
-                                 :style="builder.breakout?{color:color}:null">
+                                 :style="builder.breakout?{color:new Color(color).lighten(0.5).string()}:null">
         {{description}}
       </span></div>
     </div>
@@ -66,6 +69,7 @@ import {
   vectorNeg,
   vectorSub
 } from "@/vector.js";
+import {logicalXOR} from "@/common.js";
 
 const co = useChartOrderStore()
 const endpoints = defineModel('modelValue')  // 2-item list of points/values
@@ -111,6 +115,11 @@ watchEffect(()=>{
   }
 })
 
+const breakout = computed({
+  get() {return !logicalXOR(props.builder.breakout, props.order.buy)},
+  set(v) {props.builder.breakout = !logicalXOR(v, props.order.buy)},
+})
+
 function setEndpoints(a, b) {
   endpoints.value = [devectorize(a), devectorize(b)]
 }
@@ -235,6 +244,7 @@ const color = computed({
     props.builder.color = c.saturation <= maxLightness ? v : c.lightness(maxLightness).rgb().string()
   }
 })
+const switchColor = computed(()=>props.builder.breakout ? color.value : null)
 const colorStyle = computed(() => {
   // return {'color': color.value}
   return {}