Stations.vue 7.38 KB
Newer Older
1
<template>
Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
2
3
4
5
6
7
8
9
10
11
  <div class="p-4">
    <l-container class="mb-4">
      <l-container-title
        slot="toolbar"
        text="Stations"
        icon="network-wired"
        color="bg-pastel-purple"
      />
      <l-csv-import @on-import="onImportStations" />
    </l-container>
Andrzej Obracaj's avatar
Andrzej Obracaj committed
12

Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
13
14
15
16
    <l-info-box
      class="mb-4"
      :active="stations.length > 0"
    >Right click a row to edit, delete or add a new record</l-info-box>
Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    <hot-table :data="stations" :settings="settings" ref="hot">
      <hot-column title="ID" data="id" read-only="true"></hot-column>
      <hot-column title="Name" data="name" read-only="true"></hot-column>
      <hot-column title="Begin Position" data="begin_position" read-only="true"></hot-column>
      <hot-column title="End Position" data="end_position" read-only="true"></hot-column>
      <hot-column title="Network" data="network" read-only="true"></hot-column>
      <hot-column title="City" data="city" read-only="true"></hot-column>
      <hot-column title="National Station Code" data="national_station_code" read-only="true"></hot-column>
      <hot-column title="Media Monitored" data="media_monitored_name" read-only="true"></hot-column>
      <hot-column title="Mobile" data="mobile" read-only="true"></hot-column>
      <hot-column title="Measurement Regime" data="measurement_regime_name" read-only="true"></hot-column>
      <hot-column title="Area Classification" data="area_classification_name" read-only="true"></hot-column>
      <hot-column title="Distance Junction" data="distance_junction" read-only="true"></hot-column>
      <hot-column title="Traffic Volume" data="traffic_volume" read-only="true"></hot-column>
      <hot-column title="Heavy Duty Fraction" data="heavy_duty_fraction" read-only="true"></hot-column>
      <hot-column title="Street Width" data="street_width" read-only="true"></hot-column>
      <hot-column title="Height Facades" data="height_facades" read-only="true"></hot-column>
Andrzej Obracaj's avatar
bug    
Andrzej Obracaj committed
34
      <!-- <hot-column title="Geom" data="geom" read-only="true"></hot-column> -->
Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
35
36
37
38
39
40
41
      <hot-column title="Municipality" data="municipality" read-only="true"></hot-column>
      <hot-column title="Eoi Code" data="eoi_code" read-only="true"></hot-column>
    </hot-table>
    <l-l-edit
      :showing="edit"
      @save="onSaveStations"
      @close="edit = false"
Andrzej Obracaj's avatar
Andrzej Obracaj committed
42
      :stations="stations"
Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
43
      :mediavalues="mediavalues"
Andrzej Obracaj's avatar
Andrzej Obracaj committed
44
45
      :measurementregimes="measurementregimes"
      :areaclassifications="areaclassifications"
Andrzej Obracaj's avatar
Andrzej Obracaj committed
46
      :networks="networks"
Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
47
      :selected="selected"
48
      :isnew="isnew"
Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
49
50
    />
  </div>
51
52
53
</template>

<script>
Andrzej Obracaj's avatar
Andrzej Obracaj committed
54
import ContextMenu from "./context.menu";
55
56
57
58
import HandsontableHelper from "@/helpers/settings/handsontable";
import "handsontable/dist/handsontable.full.css";
import { HotTable, HotColumn } from "@handsontable/vue";
import Handsontable from "handsontable";
59
import StationsService from "./stations.service";
60

Andrzej Obracaj's avatar
Andrzej Obracaj committed
61
62
63
64
65
66
67
68
import LLEdit from "./LLEdit";

import LCsvImport from "@/components/LCsvImport";
import { LInput, LButton } from "@/components/forms";

import Notify from "@/helpers/notify";
import LInfoBox from "@/components/LInfoBox";

69
70
71
72
export default {
  name: "stations",
  components: {
    HotTable,
Andrzej Obracaj's avatar
Andrzej Obracaj committed
73
74
75
76
77
78
    HotColumn,
    LInput,
    LButton,
    LInfoBox,
    LLEdit,
    LCsvImport
79
80
81
  },
  data() {
    return {
Andrzej Obracaj's avatar
Andrzej Obracaj committed
82
      edit: false,
83
84
      loading: false,
      stations: [],
Andrzej Obracaj's avatar
Andrzej Obracaj committed
85
      mediavalues: [],
Andrzej Obracaj's avatar
Andrzej Obracaj committed
86
87
      measurementregimes: [],
      areaclassifications: [],
Andrzej Obracaj's avatar
Andrzej Obracaj committed
88
      networks: [],
Andrzej Obracaj's avatar
Andrzej Obracaj committed
89
90
      settings: HandsontableHelper.settings(false),
      manualSelection: false,
91
      isnew: false,
Andrzej Obracaj's avatar
Andrzej Obracaj committed
92
      selected: {}
93
94
95
    };
  },
  mounted() {
Andrzej Obracaj's avatar
Andrzej Obracaj committed
96
97
98
99
    this.settings.afterSelectionEnd = this.selectRowOnly;
    this.settings.dropdownMenu = false;
    this.settings.contextMenu = ContextMenu(this);
    Notify.loadData(null, this.loadInitialData);
100
101
  },

Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
102
  methods: {
Andrzej Obracaj's avatar
Andrzej Obracaj committed
103
104
105
106
107
108
109
110
111
112
113
    selectRowOnly(r, c, r2, c2) {
      if (this.manualSelection) {
        this.manualSelection = false;
        return;
      }
      const hot = this.$refs.hot.hotInstance;
      hot.deselectCell();
      this.manualSelection = true;
      hot.selectCells([[r, 0, r, hot.countCols() - 1]], false, false);
    },
    async loadInitialData() {
114
      this.stations = await StationsService.stations();
Andrzej Obracaj's avatar
Andrzej Obracaj committed
115
116
117
      this.mediavalues = await StationsService.mediavalues();
      this.measurementregimes = await StationsService.measurementregimes();
      this.areaclassifications = await StationsService.areaclassifications();
Andrzej Obracaj's avatar
Andrzej Obracaj committed
118
      this.networks = await StationsService.networks();
119
      // debugger;
120
    },
Andrzej Obracaj's avatar
Andrzej Obracaj committed
121
122
123
124
125
126
127
128
129
130
131
132
133
134
    async deleteStations(response) {
      if (response) {
        await Notify.loadData(
          "Please wait while data is deleting",
          async () => {
            const rowsAffected = await Stations.delete(row.id);
            const activeEditor = hot.getActiveEditor();
            hot.alter("remove_row", clickedRow, 1);
          }
        );
        Notify.success("Responsible Authorities deleted!");
      }
    },
    async saveStations(ra) {
135
      // debugger;
Andrzej Obracaj's avatar
Andrzej Obracaj committed
136
137
      const rowsAffected = await StationsService.update(ra);
      console.log("SAVED TO DB");
138
      // debugger;
Andrzej Obracaj's avatar
Andrzej Obracaj committed
139
140
141
142
143
144
145
      const current = this.stations.find(n => n.id == ra.id);
      for (var prop in current) {
        if (Object.prototype.hasOwnProperty.call(current, prop)) {
          if (current[prop] != "id" && ra[prop]) {
            current[prop] = ra[prop];
          }
        }
146
      }
Andrzej Obracaj's avatar
Andrzej Obracaj committed
147
148
149
150
151
152
    },
    async importStations(file) {
      let formData = new FormData();
      formData.append("csv", file);
      await StationsService.import(formData);
      this.stations = await StationsService.stations();
Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
153
      Notify.success("Stations imported!");
Andrzej Obracaj's avatar
Andrzej Obracaj committed
154
155
156
157
158
159
160
161
162
163
    },
    async onImportStations(file) {
      await Notify.loadData("Importing stations", this.importStations, file);
    },
    onEditStations(t, o) {
      const clickedRow = o[0].start.row;
      const hot = this.$refs.hot.hotInstance;
      const physicalIndex = hot.toPhysicalRow(clickedRow);
      let row = hot.getSourceDataAtRow(physicalIndex);
      this.selected = row;
164
      this.isnew = false;
Andrzej Obracaj's avatar
Andrzej Obracaj committed
165
166
      this.edit = true;
    },
167
168
169
    onNewStations(t, o) {
      const hot = this.$refs.hot.hotInstance;
      let row = hot.getSourceDataAtRow(0);
Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
170
171
      var newRow = Object.assign({}, row);
      Object.getOwnPropertyNames(newRow).forEach(function(prop) {
172
173
        newRow[prop] = null;
      });
Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
174
      newRow.id = "Id";
Andrzej Obracaj's avatar
bug    
Andrzej Obracaj committed
175
      newRow.begin_position = new Date().toISOString().slice(0, 19);
176
177
178
      this.selected = newRow;
      this.isnew = true;
      this.edit = true;
Rune Åvar Ødegård's avatar
Rune Åvar Ødegård committed
179
    },
Andrzej Obracaj's avatar
Andrzej Obracaj committed
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
    onDeleteStations(t, o) {
      const clickedRow = o[0].start.row;
      const hot = this.$refs.hot.hotInstance;
      const physicalIndex = hot.toPhysicalRow(clickedRow);
      let row = hot.getSourceDataAtRow(physicalIndex);

      Notify.prompt(async response => {
        if (response) {
          await Notify.loadData(
            "Please wait while data is deleting",
            async () => {
              const rowsAffected = await StationsService.delete(row.id);
              const activeEditor = hot.getActiveEditor();
              hot.alter("remove_row", clickedRow, 1);
            }
          );
Andrzej Obracaj's avatar
Andrzej Obracaj committed
196
          Notify.success("Station deleted!");
Andrzej Obracaj's avatar
Andrzej Obracaj committed
197
        }
Andrzej Obracaj's avatar
Andrzej Obracaj committed
198
      }, "This will delete all data connected to this Station. <br/><br/>Do you want to continue?");
Andrzej Obracaj's avatar
Andrzej Obracaj committed
199
200
201
    },

    async onSaveStations(station) {
202
      // debugger;
Andrzej Obracaj's avatar
Andrzej Obracaj committed
203
      await Notify.loadData(
Andrzej Obracaj's avatar
Andrzej Obracaj committed
204
        "Saving changes to Stations " + station.id,
Andrzej Obracaj's avatar
Andrzej Obracaj committed
205
206
207
208
        this.saveStations,
        station
      );
      this.selected = {};
209
210
211
    }
  }
};
Andrzej Obracaj's avatar
Andrzej Obracaj committed
212
</script>
213