Difference between revisions of "Summer Milestone 10 lucamatsumoto Macro Work Submission"

From crowdresearch
Jump to: navigation, search
Line 79: Line 79:
  
 
: [[File:lucaSubmitWorkImpl4.png]]
 
: [[File:lucaSubmitWorkImpl4.png]]
 +
 +
====[8/16/2015]====
 +
 +
:'''Screenshot 4: Current Implementation'''
 +
 +
: [[File:lucaSubmitWorkImpl5.png]]
 +
 +
:'''What it does'''
 +
:* Upload multiple files
 +
:* Drag and Drop, or click dotted-area to select local files
 +
:* Delete uploaded file and RequesterInputFile when red "delete" button on the screen is pressed
 +
:* When Cancel button is pressed, uploaded files will be deleted
 +
:* When Submit button is pressed, it returns a list of RequesterInputFile ids.
 +
 +
:'''Implementation Note'''
 +
:* Uses RequesterInputFile as Durim suggested. To upload non-csv files, some methods are added to CSVManagerViewSet and RequesterInputFileSerializer
 +
 +
:'''Changes from the last PR #367'''
 +
::'''As suggested by Durim'''
 +
::* Uploaded Files is md-list instead of st-table
 +
 +
::'''As suggested by Rohit'''
 +
::* macroWorkSubmitController is renamed to MacroWorkSubmitController
 +
::* Instead of custom "bytes", it uses existing "angular-filter"
 +
::* Existence check is added to "watch"
 +
::* Uses scss and moved styles to different files
 +
::* Uses "controller as" syntax
 +
 +
:'''Comment'''
 +
:* It is still using delete method on QuerySet to delete database record. I tried delete on instance but it didn't delete database record.
 +
:* Couldn't figure out how to make the upload function reusable.
 +
:* Not sure if we really need "task info" and "comment" section. Will remove them if we don't need.
  
 
:'''Next Step'''
 
:'''Next Step'''
:* Implement backend api to receive uploaded files
+
:* Make upload function reusable
 +
:* Integrate this to the end-to-end flow
  
  
Line 122: Line 155:
 
     id        AutoField
 
     id        AutoField
 
     work      ForeignKey (id) -> Work
 
     work      ForeignKey (id) -> Work
     path     TextField
+
     file     ForeignKey (id) -> RequesterInputFile
  
 
=== URL ===
 
=== URL ===

Revision as of 22:52, 16 August 2015

Macro Work Submission Page

This is the rough design idea of the page to submit works for macro tasks.

Design Considerations

Macro Work v.s. Micro Work
What is the difference between macro and micro work? Although they are not fundamentally different, I would imagine,
  • Since macro tasks take longer time than micro tasks, the result document may be a lot longer, and it may have a complex format. It will be in binary format like PDF, or application specific files such as doc, ppt, xls, mp3 etc.
  • Requesters may or may not know how many files workers will create. For example, if the task is programming in Java, the number of source codes and their names may vary.
  • Requesters may want to specify file name patterns in some cases.
  • How do requesters get the files submitted by workers? Download manually from our site, or should we provide a convenient way?
Features for Macro Work Submission
  • Upload binary file(s)
  • Use the file names given by workers
  • Requester can specify file naming convention
  • Requester Google Drive/Drop Box integration to get the files (nice to have?)

Page Designs

The following are the page design ideas. It doesn't include all the features listed above.


Option 1: Add "file upload form" to the prototype page
If we have "file upload form" in our template, we can create a prototype page like this.
PrototypeWithUpload.png


Option 2: Create a new page to upload multiple files
To submit many files at one time with comments, we can add a page like this.
SubmitWork.png


Option 3: File Grid
If requester posts multiple files for the task and wanted to get a result file for each, we can use a grid style UI. The worker can see the progress too.
FileGrid.png


Option 4: Submit Work Page with Bulk Uploader
The first screen has a list of uploaded files. If "Add..." button is pressed, the second window will pop up for bulk file uploading.
SubmitWork2.png BulkFileUploader.png


Implementation Status

[8/12/2015]

I've been working on the front-end side of the page in Milestone 12.


Screenshot 1: Modal Uploader
LucaSubmitWorkImpl1.png
This is about the same as Option 4 design. However, I faced some issues with this.
  • This requires bootstrap.css. I am not sure if we can add it to the head for all. I tried to add it just for this page but couldn't make it work.
  • I am using ngFileUpload for file uploading, and ngStrap for modal. Somehow, drag&drop or mouse click doesn't work on modal. I couldn't figure out why.


Screenshot 2: Simplified Version
LucaSubmitWorkImpl2.png
This is much simpler than Option 4. In stead of spending too much time on troubleshooting the Screenshot 1 design, I moved the file upload area to the first page.
  • This doesn't require bootstrap.css.
  • ngFileUpload seems to work.


So for now, I will use the Screenshot 2 and make it fully functional. Then, will figure out the issue with ngFileUpload and ngStrap combination if needed.


[8/14/2015]

Screenshot 3: Changed to MD style
LucaSubmitWorkImpl4.png

[8/16/2015]

Screenshot 4: Current Implementation
LucaSubmitWorkImpl5.png
What it does
  • Upload multiple files
  • Drag and Drop, or click dotted-area to select local files
  • Delete uploaded file and RequesterInputFile when red "delete" button on the screen is pressed
  • When Cancel button is pressed, uploaded files will be deleted
  • When Submit button is pressed, it returns a list of RequesterInputFile ids.
Implementation Note
  • Uses RequesterInputFile as Durim suggested. To upload non-csv files, some methods are added to CSVManagerViewSet and RequesterInputFileSerializer
Changes from the last PR #367
As suggested by Durim
  • Uploaded Files is md-list instead of st-table
As suggested by Rohit
  • macroWorkSubmitController is renamed to MacroWorkSubmitController
  • Instead of custom "bytes", it uses existing "angular-filter"
  • Existence check is added to "watch"
  • Uses scss and moved styles to different files
  • Uses "controller as" syntax
Comment
  • It is still using delete method on QuerySet to delete database record. I tried delete on instance but it didn't delete database record.
  • Couldn't figure out how to make the upload function reusable.
  • Not sure if we really need "task info" and "comment" section. Will remove them if we don't need.
Next Step
  • Make upload function reusable
  • Integrate this to the end-to-end flow



Open Questions

1. Google Drive/Drop Box Integration (nice to have feature?)

Requesters may want to receive the work files in their Google Drive/Drop Box folder. If so, the files should not be uploaded to Google Drive/Drop Box directly. It should be done through Daemo. If we allow workers to upload files directly to Google Drive/Drop Box, we can't keep track of the work submission.

2. How long should we keep the files?

If we store uploaded files in our database, it will eat up the storage space. Should we ask requesters to download the files and remove them from our storage after a while?

END




Below is just for my memo. I need to think more on these.

Data Model

Current TaskWorkResult model is like this. TaskWorkerResult is for template tasks. It may not be related to this.

TaskWorkerResult
    task_worker = ForeignKey
    result = TextField
    template_item = ForeignKey
    statuses = ((1, 'Created'),(2, 'Accepted'),(3, 'Rejected'))
    status = IntegerField

It has just one TextField for result. We need a way to associate multiple files to the Task.

Work
    id             AutoField
    task           ForeignKey (id) -> Task
    comment        TextField
    file_count     IntegerField
    

The file count field above is to keep the number of files originally uploaded. This may be useful because the files may be deleted later.

WorkFile
    id        AutoField
    work      ForeignKey (id) -> Work
    file      ForeignKey (id) -> RequesterInputFile

URL

Page URL: /work/
API URL:  /api/work/