feature/addData

[D4ni3l8]

This is the initial add data page. I will make a dropbox where the user is able to insert files and upload them to firebase.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 253f600):

https://adv-web-grp1--pr35-feature-adddata-j8sq5b9b.web.app

_{(expires Sun, 30 Apr 2023 11:27:44 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e45f8bd17b7de44787580bea572e36aa09784b8c}

[LiamSingh64]

added bootstrap so it looks better, input-types changed so they reflect data-types more appropriately, added html element to upload a file

[LiamSingh64]

Is the user only allowed to upload .csv data? If yes, I will change <input type="file"> to <input type="file" accept=".csv">

[rwx-yxu]

Is the user only allowed to upload .csv data? If yes, I will change <input type="file"> to <input type="file" accept=".csv">

I would suggest to review the usecase for add data #8

[rwx-yxu]

current layout for reference:

[LiamSingh64]

Please lemme know if i'm missing anything from the hcm json data being added to firestore Here's how it currently looks with example: { ACTCmutation: 0 AgeatMRI: 45, ApicalHCM: 1, Diabetes: 1, Hypertension: 1, MYBPC3mutation: MYH7: 0, MYL2: 0, Myectomy: 0, SuddenCardiacDeath: 0, TNNCI: 0, TNNI3: 0, TNNT2mutation: 0, TPM1: 0, TT: 0, female: 0, ledv: 0, lesv: 2, lsv: 8, lvef: 4, lvmass: 6, redv: 1, resv: 3, rsv: 9, rvef: 5, rvmass: 7, scar: 0 }

[LiamSingh64]

TODO:

• [x] Add timestamp to document
• [ ] Find User email and send confirmation
• [x] Add modal after submission for success/failure
• [x] Add file parsing method and auto-fill fields for user confirmation
• [x] Add validation for empty/invalid inputs

[LiamSingh64]

Think I MIGHT have added loads of empty test documents to prod database! :dizzy_face:

Good thing we can just reset/reupload dataset right?😬

[LiamSingh64]

https://firebase.google.com/docs/extensions/official/firestore-send-email We need to trigger an email to the user after a doc has been added to comply with the usecase, which this extension does exactly!

Looks like to use this however, we will need to setup our own SMTP server? I'll try to find an alternative but this looks like the prime method for sending user emails at the moment😢

"SendGrid" looks like it will get the job done and it's free tier limits to 100 emails/day (which is fine)

[LiamSingh64]

I will set up an account with SendGrid and download the TriggerEmail extension, to hopefully implement a triggered email on document uploads for HCM data...:crossed_fingers:

[LiamSingh64]

• [x] - Get rid of non-genes in mutations
• [x] - Split HeartData into right/left (2 cols)
• [x] - Change Checkboxes into Radios so it fits on 1 line below HeartData https://getbootstrap.com/docs/5.2/components/button-group/#checkbox-and-radio-button-groups
• [x] - Add user-id to document https://github.com/advweb-grp1/advanced-web-final-year-project/pull/35#issuecomment-1509956637

[LiamSingh64]

build failing due to NavBar.vue, have a fix ready!

[LiamSingh64]

• [x] Commit Fix for failing build (NavBar.spec.js)
• [x] Change 'Upload Patient Data File or Add Manually' to header 'Upload Patient Data' ABOVE <input type='file'>
• [x] Add submit button below uploadFile
• [x] Add 'Add Manually' header below submit button
• [x] Make input field width equal to uploadFile width
• [x] Make first checkbutton row equal column width (Bootstrap)
• [x] Change addHcmData and parsePatientData so uploaded csv can have multiple rows that will be added to firestore collection

[LiamSingh64]

This PR:

• Creates AddView.vue so uses can either upload a .csv which is parsed to 'bulk' add patient data, or manually input and submit individual patient information. This is added to the FireStore collection and Pinia Store
• Adds ModalComponent.vue (with slots for Title and Body) which can be triggered programmatically using document.getElementById('modalTrigger').click();
• adds addData to NavBarItems once user is logged in

[LiamSingh64]

• [x] put asterix
• [x] captilize age
• [x] change to "submit data" and "add file"
• [x] default gender
• [x] add extra fields from chat
• [x] add small easy unit tests

[LiamSingh64]

Converting JS Date to/from Excel 'Date'

function JSDateToExcelDate(inDate) {
  inDate = new Date(inDate);
  var returnDateTime = 25569.0 + ((inDate.getTime() - (inDate.getTimezoneOffset() * 60 * 1000)) / (1000 * 60 * 60 * 24));
  return returnDateTime;
}

  function ExcelDateToJSDate(serial) {
   var utc_days  = Math.floor(serial - 25569);
   var utc_value = utc_days * 86400;                                        
   var date_info = new Date(utc_value * 1000);

   var fractional_day = serial - Math.floor(serial) + 0.0000001;

   var total_seconds = Math.floor(86400 * fractional_day);

   var seconds = total_seconds % 60;

   total_seconds -= seconds;

   var hours = Math.floor(total_seconds / (60 * 60));
   var minutes = Math.floor(total_seconds / 60) % 60;

   return new Date(date_info.getFullYear(), date_info.getMonth(), date_info.getDate(), hours, minutes, seconds);
}

[rwx-yxu]

Bulk upload and manual upload works. Only change I would suggest is to clear the forms after a successful submission. There is also a question around if we should make it okay for 0 values but probs something that our tutor can answer tbh.