Skip to content

Feat/create delete tank functionality on ui #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
danvanhorn wants to merge 4 commits into
base: dev
Choose a base branch
from
Draft

Feat/create delete tank functionality on ui #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e9aa2ee
feat: add tank delete button
danvanhorn Sep 15, 2019
5f4c49f
feat: use single request for tank monitoring
danvanhorn Sep 22, 2019
6af2fb0
chore: add build and test pre-push hooks
danvanhorn Sep 22, 2019
626368b
fix: remove old import to non-existent type
danvanhorn Sep 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "npm run build && npm run test",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
Expand Down
32 changes: 29 additions & 3 deletions src/components/admin/edit-tank.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
<p>{{ feedback.server.tank }}</p>
</div>
<button v-on:click="tankUpdate">Submit</button>
<button v-on:click="tankDelete">Delete</button>
<button v-on:click="clearTank">Select a Tank</button>
</div>
</template>
Expand All @@ -38,8 +39,6 @@ interface IUpdateTankState {
};
}

// tslint:disable: no-console

export default Vue.extend({
name: 'edit-tank',
props: ['tanks', 'statuses'],
Expand Down Expand Up @@ -72,7 +71,7 @@ export default Vue.extend({
tank
);
if (response.ok) {
this.feedback.server.tank = `Tank ${name} succesfully updated.`;
this.feedback.server.tank = `${name} succesfully updated.`;
setTimeout(async () => {
this.feedback.server.tank = ``;
this.clearTank();
Expand All @@ -85,6 +84,33 @@ export default Vue.extend({
}
}
},
async tankDelete() {
if (this.tank) {
const { id, name, status } = this.tank;
const tank = {
disabled: true,
in_use: false,
name,
status
};
try {
const response = await this.$http.patch(
`${process.env.VUE_APP_API}/tanks/id/${id}`,
tank
);
if (response.ok) {
this.feedback.server.tank = `Tank ${name} succesfully deleted.`;
setTimeout(async () => {
this.feedback.server.tank = ``;
this.clearTank();
}, 5000);
}
} catch (err) {
console.error(err);
this.feedback.server.tank = `Failed to delete ${this.tank_name}`;
}
}
},
populateTank() {
if (this.tank_id) {
this.tank = this.tanks.filter((tank: Tank) => tank.id === parseInt(this.tank_id, 10))[0];
Expand Down
130 changes: 11 additions & 119 deletions src/components/tank-monitoring.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,24 @@
<h2>Tank Info</h2>
<div id="tankContents" v-if="tanks.length > 0">
<a v-on:click="showTankInfo(tank.id)" v-for="tank in tanks" v-bind:key="tank.id">
<div class="tank" v-bind:class="tank.action_id">
<div class="tank" v-bind:class="tank.classname">
<div class="tank-name">
{{ tank.name }}
</div>
<table>
<tr>
<td v-if="tank.airplane_code">{{ tank.airplane_code }}</td>
<td v-if="tank.beer_name">{{ tank.beer_name }}</td>
<td v-if="tank.pressure">{{ tank.pressure }} psi</td>
<td v-else>{{ tank.status }}</td>
</tr>
<tr>
<td v-if="tank.batch">{{ tank.batch.name }}</td>
<td v-if="tank.batch_name">{{ tank.batch_name }}</td>
<td v-if="tank.temperature">{{ tank.temperature }}ºF</td>
</tr>
</table>

<div v-if="tank.action && tank.action !== 'No Action'" class="tank-action">
{{ tank.action }}
<div v-if="tank.action_name && tank.action_name !== 'No Action'" class="tank-action">
{{ tank.action_name }}
</div>
</div>
</a>
Expand Down Expand Up @@ -62,16 +62,17 @@ import { HttpResponse } from 'vue-resource/types/vue_resource';
// tslint:disable: max-func-body-length no-any

interface ITank {
action?: string;
action_name?: string;
action_id?: number | string;
batch?: any;
batch_name?: any;
pressure?: number;
temperature?: number;
recipe_id?: number;
airplane_code?: string;
beer_name?: string;
id?: number;
name?: string;
status?: string;
classname?: string;
}

// tslint:disable:no-any no-console
Expand Down Expand Up @@ -115,26 +116,8 @@ export default Vue.extend({
this.file = null;

try {
const data: HttpResponse[] = await Promise.all([
this.$http.get(`${process.env.VUE_APP_API}/tanks/`),
this.$http.get(`${process.env.VUE_APP_API}/batches/`),
this.$http.get(`${process.env.VUE_APP_API}/actions/`),
this.$http.get(`${process.env.VUE_APP_API}/recipes/`)
]);
const [tanksResponse, batchResponse, actionsResponse, recipeResponse] = data;

const tanks: Tank[] = orderBy(tanksResponse.data as Tank[], (t: Tank) => t.name, 'asc');

this.tanks = await Promise.all(
tanks.map((tankInfo: Tank) =>
this.createTankModel(
tankInfo,
batchResponse.data as Batch[],
recipeResponse.data as Recipe[],
actionsResponse.data as Action[]
)
)
);
const response = await this.$http.get(`${process.env.VUE_APP_API}/tanks/monitoring/`);
this.tanks = response.data as ITank[];
} catch (err) {
// tslint:disable-next-line:no-console
console.error(err);
Expand All @@ -145,97 +128,6 @@ export default Vue.extend({
// send us over to the tank info page and set the id on the url
// to be the tankID that we clicked on.
router.push({ name: 'tank-info', params: { tankID } });
},
async createTankModel(
tankInfo: Tank,
batches: Batch[],
recipes: Recipe[],
actions: Action[]
): Promise<ITank> {
// create a temporary tank for us to fill with data
const tank: ITank = {
// keep track of tank id for searching
id: Number(tankInfo.id),
// keep track of tank name for displaying
name: tankInfo.name,
status: tankInfo.status
};

// Get batch information
const batch: Batch = batches
.filter((b: Batch) => b.completed_on === null && b.tank_id === tankInfo.id)
.sort((a: Batch, b: Batch) => {
return moment.utc(b.started_on).diff(moment.utc(a.started_on));
})[0];

if (batch) {
tank.batch = {};
tank.batch.tank_id = tank.id;
// add in our batchesID to the tank info box
tank.batch.id = batch.id;
tank.batch.name = batch.name;
// add the recipeID to the tank info box
tank.recipe_id = batch.recipe_id;
tank.batch.recipe_id = batch.recipe_id;

tank.batch.volume = batch.volume;
tank.batch.bright = batch.bright;
tank.batch.generation = batch.generation;

// Set recipe information
for (const recipe of recipes) {
if (batch.recipe_id === recipe.id) {
tank.airplane_code = recipe.airplane_code;
}
}

// Get version information if tank is in use
if (tankInfo.in_use) {
const versionsResponse = await this.$http.get(
`${process.env.VUE_APP_API}/versions/batch/${batch.id}/`
);
const versions: Version[] = (versionsResponse.data as Version[])
.map((v: Version) => {
v.measured_on = moment(v.measured_on);

return v;
})
.sort((a: Version, b: Version) => {
return moment.utc(a.measured_on).diff(moment.utc(b.measured_on));
});

if (versions.length > 0) {
const lastVersion = versions[versions.length - 1];

tank.pressure = lastVersion.pressure;
tank.temperature = lastVersion.temperature;
}
}

// Get task information
const tasksResponse = await this.$http.get(
`${process.env.VUE_APP_API}/tasks/batch/${batch.id}/`
);
const activeTasks: Task[] = (tasksResponse.data as Task[]).filter(
(t: Task) => !t.completed_on
);

if (activeTasks.length > 0) {
const task: Task = activeTasks[0];
tank.action_id = task.action_id;

// Set action data
for (const action of actions) {
if (tank.action_id === action.id) {
tank.action = action.name;
tank.action_id = action.classname;
}
}
}
}

// return tank
return tank;
}
}
});
Expand Down
1 change: 1 addition & 0 deletions src/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export type Tank = {
name: string;
status: string;
in_use: boolean;
disabled?: boolean;
update_user?: number;
};

Expand Down