post segment

client/src/components/Graph.vue

@@ -6,6 +6,7 @@
 import { defineComponent } from 'vue';
 import { HasticPod, TimeRange } from "./hastic_pod";
 import { getMetrics } from '../services/metrics.service';
+import { postSegment } from '../services/segments';
 import { LineTimeSerie } from "@chartwerk/line-pod";
 
 import _ from "lodash";
@@ -42,7 +43,12 @@ export default defineComponent({
     // const startTime = endTime - 1000; // 1000 seconds
     // TODO: fill segmentArray from service
     var s = new SegmentArray();
-    var pod = new HasticPod(document.getElementById('chart'), resolveData.bind(this), s);
+    var pod = new HasticPod(
+      document.getElementById('chart'),
+      resolveData.bind(this),
+      postSegment,
+      s
+    );
     pod.render();
   }
 });

client/src/components/hastic_pod/index.ts

@@ -6,16 +6,20 @@ import { Segment, SegmentId } from "@/types/segment";
 
 export type TimeRange = { from: number, to: number };
 export type UpdateDataCallback = (range: TimeRange) => Promise<LineTimeSerie[]>;
+export type UpdateSegmentCallback = (segment: Segment) => Promise<SegmentId>;
 
 export class HasticPod extends LinePod {
 
   private _udc: UpdateDataCallback;
+  private _usc: UpdateSegmentCallback;
+
   private _ctrlKeyIsDown: boolean;
   private _ctrlBrush: boolean;
-
   
-
+  constructor(
-  constructor(el: HTMLElement, udc: UpdateDataCallback, private _segmentSet: SegmentsSet<Segment>) {
+    el: HTMLElement, udc: UpdateDataCallback, usc: UpdateSegmentCallback,
+    private _segmentSet: SegmentsSet<Segment>
+  ) {
     super(el, undefined, {
       renderLegend: false,
       eventsCallbacks: {
@@ -25,6 +29,7 @@ export class HasticPod extends LinePod {
       }
     });
 
+    this._usc = usc;
     this._ctrlKeyIsDown = false;
     this._ctrlBrush = false;
 
@@ -97,6 +102,7 @@ export class HasticPod extends LinePod {
 
       const startTimestamp = this.xScale.invert(extent[0]);
       const endTimestamp = this.xScale.invert(extent[1]);
+      
       this.addLabeling(startTimestamp, endTimestamp);
     }
   }
@@ -104,9 +110,13 @@ export class HasticPod extends LinePod {
   protected addLabeling(from: number, to: number) {
     // TODO: implement
     // TODO: persistance of the label
-    const id = this.getNewTempSegmentId();
+    // const id = this.getNewTempSegmentId();
-    const segment = new Segment(id, from, to);
+    from = Math.floor(from);
+    to = Math.ceil(to);
+
+    const segment = new Segment(undefined, from, to);
     this._segmentSet.addSegment(segment);
+    this._usc(segment);
     this.renderSegment(segment);
   }
 
@@ -118,7 +128,6 @@ export class HasticPod extends LinePod {
   }
 
   protected renderSegment(segment: Segment) {
-
     const x = this.xScale(segment.from);
     const y = 0;
     const w = this.xScale(segment.to) - x;
@@ -152,7 +161,6 @@ export class HasticPod extends LinePod {
     console.log(m);
   }
 
-
   // TODO: move to "controller"
   private _tempIdCounted = -1;
   public getNewTempSegmentId(): SegmentId {

client/src/services/segments.ts

@@ -0,0 +1,27 @@
+import { API_URL } from "@/config";
+import { Segment, SegmentId } from "@/types/segment";
+import axios from 'axios';
+
+import _ from 'lodash';
+
+const SEGMENTS_API_URL = API_URL + "segments/";
+
+export async function getSegments(from: number, to: number) {
+  if(from >= to) {
+    throw new Error("`from` can`t be less than `to`");
+  }
+
+  const uri = SEGMENTS_API_URL + `?from=${from}&to=${to}`;
+  const res = await axios.get(uri);
+
+  const target = _.keys(res["data"]["data"])[0];
+  const values = res["data"]["data"][target];
+  return [target, values];
+}
+
+export async function postSegment(segment: Segment): Promise<SegmentId> {
+  delete segment.id; // because we post a new segment
+  const resp = await axios.post(SEGMENTS_API_URL, segment);
+  console.log(resp);
+  return 10 + "";
+}

client/src/types/segment.ts

@@ -1,10 +1,10 @@
 export type SegmentId = string;
 
 export class Segment {
-  constructor(private _id: SegmentId, public from: number, public to: number) {
+  constructor(private _id: SegmentId | undefined, public from: number, public to: number) {
-    if(this._id === undefined) {
+    // if(this._id === undefined) {
-      throw new Error('id is undefined');
+    //   throw new Error('id is undefined');
-    }
+    // }
     if(isNaN(+from)) {
       throw new Error('from can`t be NaN');
     }
@@ -23,8 +23,8 @@ export class Segment {
   }
 
   expandDist(allDist: number, portion: number): Segment {
-    var p = Math.round(this.middle - allDist * portion / 2);
+    let p = Math.round(this.middle - allDist * portion / 2);
-    var q = Math.round(this.middle + allDist * portion / 2);
+    let q = Math.round(this.middle + allDist * portion / 2);
     p = Math.min(p, this.from);
     q = Math.max(q, this.to);
     return new Segment(this._id, p, q);

server/src/services/data_service.rs

@@ -7,8 +7,8 @@ use std::sync::{Arc, Mutex};
 #[derive(Debug, Serialize, Deserialize)]
 pub struct Segment {
     pub id: Option<u64>,
-    pub start: u64,
+    pub from: u64,
-    pub end: u64,
+    pub to: u64,
 }
 
 // TODO: find a way to remove this unsafe
@@ -39,7 +39,7 @@ impl DataService {
         // TODO: merge with other segments
         self.connection.lock().unwrap().execute(
             "INSERT INTO segment (start, end) VALUES (?1, ?2)",
-            params![segment.start, segment.end],
+            params![segment.from, segment.to],
         )?;
         Ok(10)
     }
@@ -53,8 +53,8 @@ impl DataService {
             .query_map(params![from, to], |row| {
                 Ok(Segment {
                     id: row.get(0)?,
-                    start: row.get(1)?,
+                    from: row.get(1)?,
-                    end: row.get(2)?,
+                    to: row.get(2)?,
                 })
             })?
             .map(|e| e.unwrap())