MEAN Stack NodeJS PUT requestion code is not being run - node.js

Question

I have created a simple booking app where using the MEAN stack. The app is working fine for the GET functionality. But for some reason my PUT code will just not run i.e. I have added console.log to try and write to the console when the PUT code runs. But this code is not being hit at all. I have tried using Postman to test if the functionality works and Postman works. See my code below:
export class Tank {
id: string;
date: string;
tankNumber: number;
sessionOne: boolean;
sessionTwo: boolean;
sessionThree: boolean;
sessionFour: boolean;
sessionFive: boolean;
constructor(
id: string,
date: string,
tankNumber: number,
sessionOne: boolean,
sessionTwo: boolean,
sessionThree: boolean,
sessionFour: boolean,
sessionFive: boolean
) {
this.id = id;
this.date = date;
this.tankNumber = tankNumber;
this.sessionOne = sessionOne;
this.sessionTwo = sessionTwo;
this.sessionThree = sessionThree;
this.sessionFour = sessionFour;
this.sessionFive = sessionFive;
}
}
Below is my HTML code that sends the booking request:
<mat-card *ngIf="dateSelectionButtonPressed">
<mat-card-header>
<mat-card-title>Tank 1</mat-card-title>
</mat-card-header>
<mat-card-content *ngFor="let session of tankAvailability; let i = index">
<div class="tank-one" *ngIf="session.tankNumber == 1">
<button *ngIf="session.sessionOne === false" mat-raised-button color="primary" (click)="bookSession(session.id, session.date, session.tankNumber, session.sessionOne = true, session.sessionTwo, session.sessionThree, session.sessionFour, session.sessionFive)">07.00</button>
<button *ngIf="session.sessionTwo === false" mat-raised-button color="primary" (click)="bookSession(session.id, session.date, session.tankNumber, session.sessionOne, session.sessionTwo = true, session.sessionThree, session.sessionFour, session.sessionFive)">09.00</button>
<button *ngIf="session.sessionThree === false" mat-raised-button color="primary" (click)="bookSession(session.id, session.date, session.tankNumber, session.sessionOne, session.sessionTwo, session.sessionThree = true, session.sessionFour, session.sessionFive)">11.00</button>
<button *ngIf="session.sessionFour === false" mat-raised-button color="primary" (click)="bookSession(session.id, session.date, session.tankNumber, session.sessionOne, session.sessionTwo, session.sessionThree, session.sessionFour = true, session.sessionFive)">13.00</button>
<button *ngIf="session.sessionFive === false" mat-raised-button color="primary" (click)="bookSession(session.id, session.date, session.tankNumber, session.sessionOne, session.sessionTwo, session.sessionThree, session.sessionFour, session.sessionFive = true)">15.00</button>
</div>
</mat-card-content>
</mat-card>
Below is my booking code:
import { Component, OnInit, OnDestroy } from '#angular/core';
import { Tank } from '../../models/tank.model';
import { FormGroup, FormControl } from '#angular/forms';
import { TankService } from 'src/app/services/tank.service';
#Component({
selector: 'app-booking',
templateUrl: './booking.component.html',
styleUrls: ['./booking.component.css']
})
export class BookingComponent implements OnInit, OnDestroy {
private tankSub: Subscription;
// public payPalConfig?: IPayPalConfig;
selectedDate: any;
convertedDate: string;
dateSelectionButtonPressed = false;
tankAvailability: Tank[] = [];
tankOneAvailability: string[] = [];
tank: Tank;
constructor(private tankService: TankService) { }
bookSession(id, date, tankNumber, sessionOne, sessionTwo, sessionThree, sessionFour, sessionFive) {
const tank = new Tank(id, date, tankNumber, sessionOne, sessionTwo, sessionThree, sessionFour, sessionFive);
this.tankService.updateTankWithNewBooking(tank);
}
}
Below is my service for sending the Tank object along with ID to the back end server:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { Tank } from '../models/tank.model';
#Injectable({
providedIn: 'root'
})
export class TankService {
private tanks: Tank[] = [];
private tanksUpdate = new Subject<Tank[]>();
constructor(private httpClient: HttpClient) { }
// Update tank with new booked session
updateTankWithNewBooking(tank: Tank) {
console.log(tank);
return this.httpClient.put<{ message: string }>('http://localhost:3000/api/tank/' + tank.id, tank);
}
}
Below is my backend server side NodeJS code:
const express = require('express');
const bodyParser = require('body-parser')
const mongoose = require('mongoose');
const TankSchemaModel = require('./models/tank');
const app = express();
mongoose.connect('xxxxxxx', { useNewUrlParser: true })
.then(() => {
console.log('Connected to database!');
})
.catch((err) => {
console.log(err + 'Connection failed!!');
});
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PUT, PATCH, DELETE, OPTIONS"
);
next();
});
// create a tank
app.post('/api/tank', (req, res, next) => {
const tank = new TankSchemaModel({
date: '22-08-2019',
tankNumber: 1,
sessionOne: false,
sessionTwo: true,
sessionThree: false,
sessionFour: false,
sessionFive: true
/* date: req.body.date,
tankNumber: req.body.tankNumber,
sessionOne: req.body.sessionOne,
sessionTwo: req.body.sessionTwo,
sessionThree: req.body.sessionThree,
sessionFour: req.body.sessionFour,
sessionFive: req.body.sessionFive */
});
// save tank to database
tank.save().then(createdTankDetails => {
res.status(201).json({
message: 'Tank detals created successfully!',
tankId: createdTankDetails._id
});
});
});
// get all tank data
app.get('/api/tanks', (req, res, next) => {
TankSchemaModel.find().then(documents => {
res.status(200).json({
message: 'Tank data fetched successfully',
tanks: documents
});
});
});
// get tank data by date
app.get('/api/tanks/:date', (req, res, next) => {
TankSchemaModel.find( { date: { $eq: req.params.date } } ).then(documents => {
res.status(200).json({
message: 'Tank details successfully fetched!',
tanks: documents
});
});
});
// edit a tank
app.put('/api/tank/:id', (req, res, next) => {
console.log("Beans!");
console.log(req.params.id);
console.log(req.body);
console.log(req.body.date);
TankSchemaModel.findOneAndUpdate({ _id: req.params.id },
{
$set: {
// _id: req.body.id,
date: req.body.date,
tankNumber: req.body.tankNumber,
sessionOne: req.body.sessionOne,
sessionTwo: req.body.sessionTwo,
sessionThree: req.body.sessionThree,
sessionFour: req.body.sessionFour,
sessionFive: req.body.sessionFive
}
}, (err, result) => {
if(err) {
console.log(err);
res.status(401).json({
message: 'Tank booking failed!'
});
} else {
res.status(200).json({
message: 'Tank booking updated successfully!'
});
}
});
});
module.exports = app;