0

I recreated a kanban/task app that I'd found online, and now have it in a Page (../pages/kanban.aspx). Basically, there are (4) buckets, each with it's own Status (Not started, in progress, etc.). Task cards can be created and drag/dropped in any bucket depending on that status of that task. This is what it looks like in its default/reset state:

Kanban Tasks Default

Here is what it a sample use-case would look like:

Kanban Tasks Use Case

The difficulty that I'm having is that none of the activity is persistent or seems to be able to be stored in a session. The minute the page resets, so does all of the activity, and the kanban app returns to it's default state.

Ideally, I'd like the users to be able to create task cards, move them around, and have the value/activity be persistent, so that The task cards are EXACTLY where the user last left them, despite page refresh or browser close. Only upon HARD reset would the cards return to the default state.

I'm including the full code below. Would so appreciate the help -- thanks in advance!

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Default state</title>
      <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- css --> 
 <style>
  body {font-family:Roboto;}
  h2 {margin:5px;}
  input[type=text] {margin:10px}
  input[type=button] {margin:10px}  
  .container {width: 20%; float:left;clear: right;margin:10px; border-radius: 5px;}
  .sortable { list-style-type: none; margin:0; padding:2px; min-height:30px; border-radius: 5px;}
  .sortable li { margin: 3px 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;}
  .sortable li span { position: absolute; margin-left: -1.3em; }
  .card{background-color:white;border-radius:3px;}
  .head-lt {color:#fcfcf4;}
  .head-dk {color:#37474F;}
  </style>
  <script>
  $(function() {
    $( ".sortable" ).sortable({
      connectWith: ".connectedSortable",
      receive: function( event, ui ) {
        $(this).css({"background-color":"#fcfcff4"});
      }
    }).disableSelection();
    $('.add-button').click(function() {
        var txtNewItem = $('#new_text').val();
        $(this).closest('div.container').find('ul').append('<li class="card">'+txtNewItem+'</li>');
    });    
  });
  </script>      
</head>
<body>
<div>
<div class="container" style="background-color:#EF4931;">
<h2 class="head-lt">Not started</h2>
<ul class="sortable connectedSortable">
  <li class="card">Activity A1</li>
  <li class="card">Activity A2</li>
  <li class="card">Activity A3</li>
</ul>
<div class="link-div">
    <input type="text" id="new_text" value=""/>
    <input type="button" name="btnAddNew" value="Add" class="add-button"/>
</div>
</div>
<div class="container" style="background-color:#ffd300;">
<h2 class="head-dk">In-progress</h2>
<ul class="sortable connectedSortable" >
  <li class="card">Activity B1</li>
  <li class="card">Activity B2</li>
</ul>
</div>
<div class="container" style="background-color:#103c6d;">
<h2 class="head-lt">Final stage</h2>
<ul class="sortable connectedSortable" >
  <li class="card">Activity C1</li>
  <li class="card">Activity C2</li>
</ul>
</div>
<div class="container" style="background-color:#B9CEC5;">
<h2 class="head-dk">Completed</h2>
<ul class="sortable connectedSortable" >
</ul>
</div>
</div>

<script type="text/javascript">
function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);
    }
}
</script>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.