mercredi 21 avril 2021

Object and array structuring based on form entry values

I have the following two scenarios that I need to build but unsure how to represent this from a JavaScript perspective. I am using React and the user will be presented with a form to enter the following info for both scenarioss, where each day of the week will be presented to the user as follows:

Scenario 1: Weekly

Day of week = Monday (which can have one or more of the following entries)
    Task Name 
    Task Start Time
    Task End Time

    . . . 
       . . . 

Day of week = Sunday (which can have one or more of the following entries)
    Task Name 
    Task Start Time
    Task End Time

For this scenario, I was thinking of the following structure where there would also be a button for the user to add/remove taskDetails:

const weeklyTasks = {
         dayOfWeek: "Monday",
         taskDetails: [
             {
               taskName: "",
               taskStartTime: "",
               taskEndTime: ""
             }
         ],
         dayOfWeek: "Tuesday",
         taskDetails: [
             {
               taskName: "",
               taskStartTime: "",
               taskEndTime: ""
             }
         ],

         . . . 
             . . .
         dayOfWeek: "Sunday",
         taskDetails: [
             {
               taskName: "",
               taskStartTime: "",
               taskEndTime: ""
             }
         ]
       }

Scenario 2: Fornightly

Week 1:
    Day of week = Monday (which can have one or more of the following entries)
        Task Name 
        Task Start Time
        Task End Time
    
        . . . 
           . . . 
    
    Day of week = Sunday (which can have one or more of the following entries)
        Task Name 
        Task Start Time
        Task End Time


Week 2
    Day of week = Monday (which can have one or more of the following entries)
        Task Name 
        Task Start Time
        Task End Time
    
        . . . 
           . . . 
    
    Day of week = Sunday (which can have one or more of the following entries)
        Task Name 
        Task Start Time
        Task End Time

For this scenario, I was thinking of the following structure where there would also be a button for the user to add/remove taskDetails:

const FortnightlyTasks = {
         weekNumber: 1,
         dayOfWeek: "Monday",
         taskDetails: [
             {
               taskName: "",
               taskStartTime: "",
               taskEndTime: ""
             }
         ],
         dayOfWeek: "Tuesday",
         taskDetails: [
             {
               taskName: "",
               taskStartTime: "",
               taskEndTime: ""
             }
         ],

         . . . 
             . . .
         dayOfWeek: "Sunday",
         taskDetails: [
             {
               taskName: "",
               taskStartTime: "",
               taskEndTime: ""
             }
         ],
         weekNumber: 2,
         dayOfWeek: "Monday",
         taskDetails: [
             {
               taskName: "",
               taskStartTime: "",
               taskEndTime: ""
             }
         ],
         dayOfWeek: "Tuesday",
         taskDetails: [
             {
               taskName: "",
               taskStartTime: "",
               taskEndTime: ""
             }
         ],

         . . . 
             . . .
         dayOfWeek: "Sunday",
         taskDetails: [
             {
               taskName: "",
               taskStartTime: "",
               taskEndTime: ""
             }
         ]
       }

Aucun commentaire:

Enregistrer un commentaire