API tools faq
paste
asimryu

indexeddb - with order by options

asimryu
Jul 31st, 2016
315
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 15.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>indexedDB Address Book</title>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  7.     <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
  8.     <style>
  9.         .hide {
  10.             display: none;
  11.         }
  12.         #photos {
  13.             height:150px;
  14.             background: #FF0;
  15.             border: 1px solid #888;
  16.         }
  17.         .photolist-edit {
  18.             position: relative;
  19.             display: inline-block;
  20.             width: 100px;
  21.             height: 100px;
  22.             border: 1px solid #888;
  23.             margin: 5px;
  24.         }
  25.         .photolist-edit img {
  26.             position: absolute;
  27.             width: 100px;
  28.             height: 100px;
  29.             left: 0;
  30.             top: 0;
  31.         }
  32.         .photolist-delete {
  33.             position: absolute;
  34.             top: 3px;
  35.             right: 3px;
  36.             width: 20px;
  37.             height: 20px;
  38.             border-radius: 10px;
  39.             line-height: 20px;
  40.             text-align: center;
  41.             background-color: black;
  42.             color: white;
  43.             cursor: pointer;
  44.         }
  45.         .sort-selection {
  46.             margin: 10px 0;
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <div class="container">
  52.         <div class="jumbotron">
  53.             <h1>My Address Book</h1>
  54.         </div>
  55.         <div class="add-form">
  56.             <form class="form-horizontal">
  57.                 <div class="form-group">
  58.                     <label for="adname" class="col-sm-2 control-label">Name</label>
  59.                     <div class="col-sm-10">
  60.                         <input type="text" class="form-control" id="adname" placeholder="이름을 입력하세요." required>
  61.                     </div>
  62.                 </div>
  63.  
  64.                 <div class="form-group">
  65.                     <label for="ademail" class="col-sm-2 control-label">Email Address</label>
  66.                     <div class="col-sm-10">
  67.                         <input type="email" class="form-control" id="ademail" placeholder="[email protected]" required>
  68.                     </div>
  69.                 </div>
  70.  
  71.                 <div class="form-group">
  72.                     <label for="adaddress" class="col-sm-2 control-label">Home Address</label>
  73.                     <div class="col-sm-10">
  74.                         <input type="text" class="form-control" id="adaddress" placeholder="주소를 입력하세요." required>
  75.                     </div>
  76.                 </div>
  77.  
  78.                 <div class="form-group">
  79.                     <label for="adphone" class="col-sm-2 control-label">Phone Number</label>
  80.                     <div class="col-sm-10">
  81.                         <input type="text" class="form-control" id="adphone" placeholder="010-111-2222" required>
  82.                     </div>
  83.                 </div>
  84.  
  85.                 <div class="form-group">
  86.                     <label for="adphotos" class="col-sm-2 control-label">Photos</label>
  87.                     <div class="col-sm-10">
  88.                         <div id="photos" ondragover="dragover(event)" ondrop="drop(event)" ondragleave="dragleave(event)" class="col-sm-12"></div>
  89.                     </div>
  90.                 </div>         
  91.  
  92.                 <div class="form-group">
  93.                     <div class="col-sm-offset-2 col-sm-10">
  94.                         <button type="submit" class="btn-add btn btn-success">Add Friend</button>
  95.                     </div>
  96.                 </div>
  97.             </form>
  98.         </div>
  99.  
  100.         <div id="list">
  101.             <div class="sort-selection">
  102.                 <form class="form-inline">
  103.                     <strong>order by&nbsp;&nbsp;</strong>
  104.                     <div class="radio">
  105.                         <label>
  106.                             <input type="radio" name="orderby" id="orderbyAdname" value="adname" checked> Name
  107.                         </label>
  108.                     </div>
  109.                     <div class="radio">
  110.                         <label>
  111.                             <input type="radio" name="orderby" id="orderbyAdemail" value="ademail"> Email
  112.                         </label>
  113.                     </div>
  114.                     <div class="radio">
  115.                         <label>
  116.                             <input type="radio" name="orderby" id="orderbyAdaddress" value="adaddress"> Address
  117.                         </label>
  118.                     </div>     
  119.                     <div class="radio">
  120.                         <label>
  121.                             <input type="radio" name="orderby" id="orderbyAdphone" value="adphone"> Address
  122.                         </label>
  123.                     </div>         
  124.                     <strong>&nbsp;&nbsp;asc or desc&nbsp;&nbsp;</strong>
  125.                     <div class="radio">
  126.                         <label>
  127.                             <input type="radio" name="ascdesc" id="ascdescAsc" value="next" checked> asc
  128.                         </label>
  129.                     </div> 
  130.                     <div class="radio">
  131.                         <label>
  132.                             <input type="radio" name="ascdesc" id="ascdescDesc" value="prev"> desc
  133.                         </label>
  134.                     </div>
  135.                     <button type="submit" id="reorder" class="btn btn-sm btn-default">정렬하기</button>
  136.                 </form>
  137.             </div>
  138.             <table class="table">
  139.                 <tr>
  140.                     <th>Name</th>
  141.                     <th>Address</th>
  142.                     <th>Email</th>
  143.                     <th>Phone</th>
  144.                     <th>&nbsp;</th>
  145.                 </tr>
  146.             </table>
  147.         </div>
  148.     </div>
  149.  
  150.     <div id="moreinfo" class="hide" title="상세정보">
  151.         <h1 id="friendname"></h1>
  152.         <p id="friendemail"></p>
  153.         <p id="friendaddress"></p>
  154.         <p id="friendphone"></p>
  155.         <p id="friendphotos"></p>
  156.     </div>
  157.  
  158.     <div id="updatefrm" class="hide" title="정보수정">
  159.         <form class="form">
  160.             <div class="form-group">
  161.                 <label for="adname-input">Name</label>
  162.                 <input type="text" class="form-control" id="adname-input" value="">
  163.             </div>
  164.             <div class="form-group">
  165.                 <label for="ademail-input">Email</label>
  166.                 <input type="email" class="form-control" id="ademail-input" value="">
  167.             </div>
  168.             <div class="form-group">
  169.                 <label for="adaddress-input">Address</label>
  170.                 <input type="text" class="form-control" id="adaddress-input" value="">
  171.             </div>
  172.             <div class="form-group">
  173.                 <label for="adphone-input">Phone</label>
  174.                 <input type="text" class="form-control" id="adphone-input" value="">
  175.             </div>
  176.             <div class="form-group">
  177.                 <label for="adphotos-input">Photos</label>
  178.                 <div id="adphotos-input"></div>
  179.             </div>         
  180.         </form>
  181.     </div> 
  182.  
  183.     <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
  184.     <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  185.     <script>
  186.         var db;
  187.         //addressbook 데이터베이스 오픈(없으면 생성)
  188.         var request = window.indexedDB.open("adbook",1);
  189.  
  190.         //DB Open Error Handling
  191.         request.onerror = function(event) {
  192.             console.log("DB Open Error");
  193.         }
  194.  
  195.         //After DB Open
  196.         request.onsuccess = function(event) {
  197.           db = request.result;
  198.           readAllData();
  199.         }
  200.  
  201.         request.onupgradeneeded = function(event) {
  202.             var result = event.target.result;
  203.             var objectStore = result.createObjectStore("address",{ keyPath: "id", autoIncrement:true });
  204.  
  205.             //정렬을 위해 key들을 index에 추가
  206.             objectStore.createIndex("adname", "adname", { unique: false });
  207.             objectStore.createIndex("ademail", "ademail", { unique: false });
  208.             objectStore.createIndex("adaddress", "adaddress", { unique: false });
  209.             objectStore.createIndex("adphone", "adphone", { unique: false });
  210.         }
  211.  
  212.         function readAllData(orderKey, ascdescType){
  213.             var orderKey = orderKey ? orderKey : "adname";
  214.             var ascdescType = ascdescType ? ascdescType : "next";
  215.             var tr = db.transaction(["address"]);
  216.             var store = tr.objectStore("address");
  217.             //var index = store.index("adname");
  218.             //특정 키로 정렬하여 db 데이터 열기
  219.             var request = store.index(orderKey).openCursor(null, ascdescType);
  220.             request.onsuccess = function(event) {
  221.                 var cursor = event.target.result; //한 줄 얻어내기
  222.                 if (cursor) {
  223.                     addList(cursor.value);
  224.                     cursor.continue(); //다음 줄로 이동
  225.                 }
  226.             };
  227.         }
  228.  
  229.         function readData(id,act){
  230.             var tr = db.transaction(["address"]);
  231.             var store = tr.objectStore("address");
  232.             var request = store.get(id);
  233.             request.onsuccess = function(event){
  234.                 var data = request.result;
  235.                 if( act == "read") {
  236.                     popUpInfo(data);   
  237.                 } else if( act =="edit" ) {
  238.                     popUpEdit(data);   
  239.                 }
  240.                
  241.             };
  242.             request.onerror = function(event){
  243.                 console.log("read error");
  244.             };
  245.         }
  246.  
  247.         function popUpInfo(data){
  248.             if( ! data ) return;
  249.             $("#friendname").text(data.adname);
  250.             $("#friendemail").text(data.ademail);
  251.             $("#friendaddress").text(data.adaddress);
  252.             $("#friendphone").text(data.adphone);
  253.             if(data.photos){
  254.                 var photolist = data.photos;
  255.                 var i;
  256.                 for( i=0; i<photolist.length;i++){
  257.                     var src = photolist[i].src;
  258.                     var img = "<img src='" + src + "' width='100' height='100' style='margin: 5px;'>";
  259.                     $("#friendphotos").append(img);
  260.                 }
  261.             }
  262.  
  263.             $("#moreinfo").dialog({
  264.                 width: 500,
  265.                 height: 500,
  266.                 title: data.adname + " 상세정보",
  267.                 modal: true
  268.             });
  269.         }
  270.  
  271.         var photoeditlist = [];
  272.  
  273.         function popUpEdit(data){
  274.             if( ! data ) return;
  275.             var id;
  276.             $("#updatefrm").dialog({
  277.                 width: 500,
  278.                 height: 500,
  279.                 title: data.adname + " 정보수정",
  280.                 modal: true,
  281.                 open: function(){
  282.                     id = data.id;
  283.                     $("#adname-input").val(data.adname);
  284.                     $("#ademail-input").val(data.ademail);
  285.                     $("#adaddress-input").val(data.adaddress);
  286.                     $("#adphone-input").val(data.adphone);
  287.                     if(data.photos){
  288.                         photoeditlist = data.photos;
  289.                         var i;
  290.                         for( i=0; i<photoeditlist.length;i++){
  291.                             var src = photoeditlist[i].src;
  292.                             var img = "<div class='photolist-edit'>";
  293.                             img += "<img src='" + src + "'>";
  294.                             img += "<div class='photolist-delete' data-imgid='" + i + "'>X</div>";
  295.                             img += "</div>";
  296.                             $("#adphotos-input").append(img);
  297.                         }
  298.                     }
  299.                 },
  300.                 buttons: {
  301.                     "저장":function(){
  302.                         var tr = db.transaction(["address"], "readwrite");
  303.                         var store = tr.objectStore("address");
  304.                         var request = store.get(id);
  305.  
  306.                         request.onsuccess = function(event){
  307.                             var data = event.target.result;
  308.                             data.adname = $("#adname-input").val();
  309.                             data.ademail = $("#ademail-input").val();
  310.                             data.adaddress = $("#ademail-input").val();
  311.                             data.adphone = $("#adphone-input").val();
  312.                             data.photos = photoeditlist;
  313.  
  314.                             var dbupdate = store.put(data);
  315.                             dbupdate.onsuccess = function(event){
  316.                                 console.log('데이터 수정 성공');
  317.                                 $("#list" + id + " .adname").text(data.adname);
  318.                                 $("#updatefrm").dialog("close");
  319.                             };
  320.                             dbupdate.onerror = function(event){
  321.                                 console.log('데이터 수정 실패');
  322.                             };
  323.                         };
  324.                         request.onerror = function(event){
  325.                             console.log('데이터 수정 실패');
  326.                         }
  327.                     },
  328.                     "닫기":function(){
  329.                         $(this).dialog("close");
  330.                     }
  331.                 },
  332.                 close: function(){
  333.                     $("#adname-input").val("");
  334.                     $("#ademail-input").val("");
  335.                     $("#ademail-input").val("");
  336.                     $("#adphone-input").val("");   
  337.                     $("#adphotos-input").html("");
  338.                     while (photoeditlist.length) { photoeditlist.pop(); }
  339.                 }
  340.             });
  341.         }
  342.  
  343.         $("#adphotos-input").on("click",".photolist-delete",function(){
  344.             var id = $(this).attr("data-imgid");
  345.             photoeditlist.splice(id, 1);//배열에서 특정 index를 제거함
  346.             $(this).parent(".photolist-edit").remove();
  347.  
  348.             //배열에서 하나를 삭제하였으므로 포토리스트에서 버튼마다 주어진 번호(배열기준)를 다시 0부터 순서대로 부여해주어야 함.
  349.             var i = 0;
  350.             $("#adphotos-input .photolist-delete").each(function(){
  351.                 $(this).attr("data-imgid",i);
  352.                 i++;
  353.             });
  354.  
  355.         });
  356.  
  357.         function addList(data){
  358.             if( ! data ) return;
  359.             var html  = "<tr id='list" + data.id + "'>";
  360.                 html += "<td class='adname'>" + data.adname + "</td>";
  361.                 html += "<td class='adaddress'>" + data.adaddress + "</td>";
  362.                 html += "<td class='ademail'>" + data.ademail + "</td>";
  363.                 html += "<td class='adphone'>" + data.adphone + "</td>";
  364.                 html += "<td>";
  365.                 html += "   <a class='btn-del btn btn-danger' data-id='" + data.id + "'>삭제</a>";
  366.                 html += "   &nbsp;<a class='btn-read btn btn-primary' data-id='" + data.id + "'>보기</a>";
  367.                 html += "   &nbsp;<a class='btn-edit btn btn-warning' data-id='" + data.id + "'>수정</a>";
  368.                 html += "</td>";
  369.                 html += "</tr>";
  370.             //$("#list table tr:first").append(html);
  371.             $(html).insertAfter("#list table tr:last");
  372.         }
  373.  
  374.  
  375.  
  376.         function deleteData(id){
  377.             if( ! id ) return false;
  378.             var tr = db.transaction(["address"], "readwrite");
  379.             var store = tr.objectStore("address");
  380.             var request = store.delete(id);
  381.             request.onsuccess = function(event) {
  382.                 $("#list" + id).remove();
  383.             }; 
  384.             request.onerror = function(event) {
  385.                 //some error code
  386.             }
  387.         }
  388.  
  389.  
  390.         function saveData(data){
  391.             var tr = db.transaction(["address"], "readwrite");
  392.             var store = tr.objectStore("address");
  393.             var request = store.add(data);
  394.             request.onsuccess = function(event){
  395.                 //마지막에 추가한 레코드의 id를 구함
  396.                 var id = event.target.result;
  397.                 data.id = id; // 데이터 객체 data에 id를 추가
  398.                 addList(data);
  399.             };
  400.             request.onerror = function(event) {
  401.                 console.log("Error : data save error");
  402.             }  
  403.         }
  404.  
  405.         function updateData(id){
  406.             var tr = db.transaction(["address"], "readwrite");
  407.             var store = tr.objectStore("address");
  408.             var request = store.get(id);
  409.  
  410.             request.onsuccess = function(event){
  411.                 var data = event.target.result;
  412.                 data.adname = $("#adname-input").val();
  413.                 data.ademail = $("#ademail-input").val();
  414.                 data.adaddress = $("#ademail-input").val();
  415.                 data.adphone = $("#adphone-input").val();
  416.  
  417.                 var dbupdate = store.put(data);
  418.                 dbupdate.onsuccess = function(event){
  419.                     console.log('데이터 수정 성공');
  420.                     return true;
  421.                 };
  422.                 dbupdate.onerror = function(event){
  423.                     console.log('데이터 수정 실패');
  424.                     return false;
  425.                 };
  426.             };
  427.             request.onerror = function(event){
  428.                 console.log('데이터 수정 실패');
  429.                 return false;
  430.             }
  431.         }
  432.  
  433.         $("#reorder").on("click",function(event){
  434.             event.preventDefault();
  435.             $("#list table tr:not(:first)").remove();
  436.             var orderKey = $("input[name='orderby']:checked").val();
  437.             var ascdescType = $("input[name='ascdesc']:checked").val();
  438.             readAllData(orderKey,ascdescType);
  439.         });
  440.  
  441.         $(".btn-add").on("click",function(e){
  442.             e.preventDefault();
  443.             var friend = {};
  444.             friend.adname = $("#adname").val();
  445.             friend.ademail = $("#ademail").val();
  446.             friend.adaddress = $("#adaddress").val();
  447.             friend.adphone = $("#adphone").val();
  448.             friend.photos = photos;
  449.             saveData(friend);
  450.         });
  451.  
  452.         $("#list").on("click",".btn-del",function(){
  453.             var id = $(this).attr("data-id");
  454.             if( ! id ) return;
  455.             id = parseInt(id,10);
  456.             deleteData(id);
  457.         });
  458.  
  459.         $("#list").on("click",".btn-read",function(){
  460.             var id = $(this).attr("data-id");
  461.             if( ! id ) return;
  462.             id = parseInt(id,10);
  463.             readData(id,"read");
  464.         });
  465.  
  466.         $("#list").on("click",".btn-edit",function(){
  467.             var id = $(this).attr("data-id");
  468.             if( ! id ) return;
  469.             id = parseInt(id,10);
  470.             readData(id,"edit");
  471.         });
  472.  
  473.         function dragover(event){
  474.             event.preventDefault();
  475.             var id = event.target.id;
  476.             $("#" + id).css({"background":"red"});
  477.         }
  478.  
  479.         function dragleave(event){
  480.             event.preventDefault();
  481.             var id = event.target.id;
  482.             $("#" + id).css({"background":"#ff0"});
  483.         }
  484.  
  485.         var photos;
  486.         function drop(event){
  487.             event.preventDefault();
  488.             photos = [];
  489.             var data = event.dataTransfer;
  490.             var files = data.files;
  491.             var i;
  492.             for( i=0; i<files.length; i++){
  493.                 if( files[i].type == "image/jpeg" || files[i].type == "image/png" || files[i].type == "image/gif" ) {
  494.                     addPhotos(files[i]);
  495.                 }
  496.             }
  497.         }
  498.  
  499.         function addPhotos(file){
  500.             var photo = {};
  501.             photo.name = file.name;
  502.             photo.size = file.size;
  503.             photo.type = file.type;
  504.             var reader = new FileReader();
  505.             reader.addEventListener("load",function(){
  506.                 photo.src = reader.result;
  507.                 //console.log(photo);
  508.                 photos.push(photo);
  509.             });
  510.             reader.readAsDataURL(file);
  511.         }      
  512.     </script>
  513. </body>
  514. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!