javascript - How to make this book shelf grid have drag/select features? -

javascript - How to make this book shelf grid have drag/select features? -

introduction

i writing toy project proof of concept , force myself. application asp.net5 mvc6 library user interface. want create grid representation of library shelf dynamic properties, i stuck on lastly 2 weeks. entire thing open source , can find have done far here.

problem

i want user able drag finger across grid select whatever want. unselect same gesture. thought "check out" books doing this. stuck figuring out how implement m3

in other words, how can create dom object have created interactive?

consider image below. have 5 mock scenarios.

m1 basic situation. click on shelf , can see representation of 3 x 5 shelf.

m2 reddish represents occupied position on book shelf. want utilize database info , how show user.

m3 greenish represents user wants select. assuming on tablet. them able drag figure across screen.

m4 scenario isn't of import right (checking out everything)

m5this means user can go different bookshelves , different grid. bookshelf 3 x 5.

accomplished

m1 finished.

m5 finished. because have row , column specified shelf in database:

so can draw grid follows:

<div class="grid"> @{ int columnn = model.columnnumber;} @{ int rown = model.rownumber;} @{ int container = 1;} <div class="btn-group btn-group-justified" role="group"> <!--select button--> <button id="toggle-well-all" type="button" class="btn btn-info"><i class="fa fa-table"></i></button> @for (int = 1; <= columnn; i++) { <!--column header--> <button id="toggle-well-column-@i" type="button" class="btn btn-info">@i.tostring()</button> } </div> @{int = 0; <!--define row based on bin row size --> (int j = 1; j <= rown; j++) { <!--define row header button --> <div class="btn-group btn-group-justified" role="group"> <!--row header--> <button id="toggle-well-row-@j" type="button" class="btn btn-info">@j.tostring()</button> <!--well column--> @for (int k = 1; k <= columnn; k++) { <!--well button--> <button type="button" id="select-well-@container" class="btn btn-default bin-well bin-row-@j bin-col-@k" data-toggle="button"></button> container++; } </div> } } </div> notes

in order create clean possible trying create next approach:

use c# , razor create dom represent bookshelf use ? create dom have interactive features need once have interactive features, plan on tying database? learning javascript

attempts

doing javascript first. bad idea. couldn't javascript read razor , c# code. also, not best practice. approaching dom first now.

any assistance rendered more appreciated. willing hear , learn. have worked , failed lot on this, reaching out lastly ditch effort. give thanks much reading.

this big question. asking how build web application total stack. there no 1 reply offer solve you. so, instead i'll tell how approach problem in little detail.

to start need break problem downwards simpler things , knock them out 1 @ time. since using mvc, assume utilize of model view controller design pattern.

with in mind, start model in c#. @ minimum need book , shelf type. book type have availability property. shelf have set of books , maybe type property describes shelf configuration (ie 3x5, 5x7).

once model created, create false store represents info access layer. store have handful of shelves in in various configurations various books.

i utilize false store work on razor view render shelf table. utilize css classes mark status of book in table , info attributes identify book. maintain working here until can render each of possible shelf configurations table proper css classes.

the end result table might this:

<table id="shelf"> <tr> <td class="book available" data-id="1">fight club</td> <td class="book checkedout" data-id="2">the great , secret show</td> </tr> <tr> <td class="book available" data-id="3">the winds of winter</td> <td class="book checkedout" data-id="4">ready player one</td> </tr> </table>

next, start working on client side javascript observe user interaction events. maybe start touch event on books writes book id browser console. refine event subscriptions can differentiate on status of book.

here illustration jquery in case not clear mean. might start client side script looks this:

$(function() { $("#shelf .book").on("touch", function() { var id = $(this).data("id"); console.log(id); }); });

and differentiate status of book, might this:

$(function() { $("#shelf .book").on("touch", ".available", function() { var id = $(this).data("id"); console.log(id + " available"); }); $("#shelf .book").on("touch", ".checkedout", function () { var id = $(this).data("id"); console.log(id + " checkedout"); }); });

note: did not test above code. consider psudo-code might need tweaking.

now have event handlers touch events book id, write ajax phone call post id controller action specific action want take. available books, post /books/checkout/id. , checkedout books, post books/checkin/id. stub out bookscontroller's action methods homecoming positive response.

in ajax phone call success event, swap css class appropriately. example, available book post ajax phone call /books/checkout/id , on success remove available class , add together checkedout class.

next, work on making false store store info in database.

then, wire books controller action stubs modify info in database.

finally, consider error condition. happens if post book id checkout action checked out? if book id doesn't exist? if checkout book, how other people viewing shelf know checked out?

as, can see approaching problem breaking little pieces. , implementing little things build bigger thing. hopping between various layers backend, controller, client side ui stubbing go , replacing new code needed.

but not all! lastly consider quality of code have. effort remove duplication (especially if duplicated 3 or more times). @ names of variables, classes , methods, accurately represent going on? remember variable, class , method names can long want create them descriptive. has more meaning "var x" or "var bookid"?

basically saying refactor brevity , clarity. 6 month older self give thanks when come seek edit code.

don't me started on unit tests....

good luck.

javascript c# asp.net-mvc razor asp.net-core