Skip to content

Commit

Permalink
removed the complexity of fileID
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsamridh86
tsamridh86 committed Apr 10, 2017
1 parent 054ebc2 commit a4515bf
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 117 deletions.
5 changes: 5 additions & 0 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,9 @@
{
padding-left: 20px;
padding-right: 20px;
}

.link
{
cursor: pointer;
}
213 changes: 100 additions & 113 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,133 +1,120 @@
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Search Engine</title>
</head>
<body>
<div class="row">
<div class="col s12 m12">
<div class="card white darken-1">
<div class="card-content black-text">
<div class="row">
<div class="col m2" >
<span class="card-title orange-text">Search Engine</span>
</div>
<div class="input-field col s11 m9">
<input placeholder="Type here" id="query" name = "q" type="text" class="validate">
<label for="query">Enter your query</label>
</div>
<div class="col s1 m1">
<a class="btn-floating waves-effect waves-light red shiftDown" id="search"><i class="material-icons">search</i></a>
</div>
</div>
<div class="row">
<div class="col s6 m1">
<a class="btn-floating waves-effect waves-light red" id="setting" href="#modal"><i class="material-icons">settings</i></a>
</div>
<div class="col s6 m1">
<a class="waves-effect waves-light btn more">more</a>
</div>
<div class="input-field col s12 m5 hidden">
<select id="searchCategory">
<option value="none" disabled selected>Choose your option</option>
<option value="text">Text file</option>
<option value="image">Image File</option>
<option value="pdf">PDF document</option>
<option value="audio">Audio file</option>
<option value="video">Video file</option>
<option value="other">Other file</option>
</select>
<label>Select Category</label>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Search Engine</title>
</head>
<body>
<div class="row">
<div class="col s12 m12">
<div class="card white darken-1">
<div class="card-content black-text">
<div class="row">
<div class="col m2" >
<span class="card-title orange-text">Search Engine</span>
</div>
<div class="input-field col s11 m9">
<input placeholder="Type here" id="query" name = "q" type="text" class="validate">
<label for="query">Enter your query</label>
</div>
<div class="col s1 m1">
<a class="btn-floating waves-effect waves-light red shiftDown" id="search"><i class="material-icons">search</i></a>
</div>
</div>
<div class="input-field col s12 m5 hidden">
<select id="sortCategory">
<option value="" disabled selected>Choose your option</option>
<option value="dateModified">Date modified</option>
<option value="fileName">Name</option>
<option value="category">Category</option>
</select>
<label>Sort by</label>
<div class="row">
<div class="col s6 m1">
<a class="btn-floating waves-effect waves-light red" id="setting" href="#modal"><i class="material-icons">add</i></a>
</div>
<div class="col s6 m1">
<a class="waves-effect waves-light btn more">more</a>
</div>
<div class="input-field col s12 m5 hidden">
<select id="searchCategory">
<option value="none" disabled selected>Choose your option</option>
<option value="text">Text file</option>
<option value="image">Image File</option>
<option value="pdf">PDF document</option>
<option value="audio">Audio file</option>
<option value="video">Video file</option>
<option value="other">Other file</option>
</select>
<label>Select Category</label>
</div>
<div class="input-field col s12 m5 hidden">
<select id="sortCategory">
<option value="" disabled selected>Choose your option</option>
<option value="dateModified">Date modified</option>
<option value="fileName">Name</option>
<option value="category">Category</option>
</select>
<label>Sort by</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mainContent" class="row">
</div>
<div id="modal" class="modal">
<div class="modal-content">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s4"><a id="init" href="#add">add</a></li>
<li class="tab col s4"><a href="#update">update</a></li>
<li class="tab col s4"><a href="#delete">delete</a></li>
</ul>
</div>
<div id="add" class="col s12">
<p><h4>Add New Document</h4></p>
<form action="" method="post" enctype="multipart/form-data">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" id="uploadTarget">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
<div id="mainContent" class="row">
</div>
<div id="modal" class="modal">
<div class="modal-content">
<div class="row">
<div id="add" class="col s12">
<p><h4>Add New Document</h4></p>
<form action="" method="post" enctype="multipart/form-data">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" id="uploadTarget">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
<div class="modal-footer">
<a href="#!" id="uploadFile" class=" modal-action modal-close waves-effect waves-green btn-flat">Upload</a>
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
</form>
<div class="modal-footer">
<a href="#!" id="uploadFile" class=" modal-action modal-close waves-effect waves-green btn-flat">Upload</a>
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
</div>
<div id="update" class="col s12">
<p><h4>Update an Existing Document</h4></p>
<form action="" method="post" enctype="multipart/form-data">
<div class="input-field">
<input placeholder="Type here" id="updateId" type="number" class="validate" >
<label for="updateId">Enter the ID of the file to be replaced</label>
</div>
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" id="updateTarget">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
<div class="modal-footer">
<a href="#!" id="updateFile" class=" modal-action modal-close waves-effect waves-green btn-flat">Update</a>
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
</div>
</div>
</div>
<div id="update" class="modal">
<div class = "modal-content">
<p><h4>Update an Existing Document</h4></p>
<form action="" method="post" enctype="multipart/form-data">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" id="updateTarget">
</div>
<div id="delete" class="col s12">
<p><h4>Delete an Existing Document</h4></p>
<form action="" method="post" enctype="multipart/form-data">
<div class="input-field">
<input placeholder="Type here" id="deleteId" type="number" class="validate">
<label for="deleteId">Enter the ID of the file to be deleted</label>
</div>
</form>
<div class="modal-footer">
<a href="#!" id="deleteFile" class=" modal-action modal-close waves-effect waves-green btn-flat">Delete</a>
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
<div class="modal-footer">
<a href="#!" id="updateFile" class=" modal-action modal-close waves-effect waves-green btn-flat">Update</a>
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
</div></div>
<div id="delete" class="modal">
<div class="modal-content">
<p><h4>Delete an Existing Document</h4></p>
<p> Are you sure you want to delete the file ? </p>
<div class="modal-footer">
<a href="#!" id="deleteFile" class=" modal-action modal-close waves-effect waves-green btn-flat">Delete</a>
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/index.js">
</script>
Expand Down
24 changes: 20 additions & 4 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,27 @@ function createCard (fileName, downloadLocation, category , dateModified , fileI
return "<div class='col s12 m6'>"+
"<div class='card white darken-1'>"+
" <div class='card-content black-text'>"+
"<span class='card-title'><a href='"+downloadLocation+"' >"+fileName+"</a></span>"+
"<span class='card-title'><a href='"+downloadLocation+"' >"+fileName+"</a><a class='right link' data-file-id = '"+fileId+"' onclick='updateFile(this);'><i class='material-icons'>update</i></a><a class='right link' data-file-id = '"+fileId+"' onclick='deleteFile(this);'><i class='material-icons'>delete</i></a></a></span>"+
"<p> File Type :"+category.capitalize()+"</p>"+
"<p> File Id : "+fileId+"</p>"+Date(dateModified)+
"</p>"+Date(dateModified)+
"</div>"+"</div>"+"</div>";

}

function updateFile(element)
{
var fileId = $(element).data("file-id");
$("#update").modal("open");
$("#updateFile").data("file-id",fileId);
}

function deleteFile(element)
{
var fileId = $(element).data("file-id");
$("#delete").modal("open");
$("#deleteFile").data("file-id",fileId);
}

//function to upload the file
$("#uploadFile").click(function(){
var fileData = $("#uploadTarget").prop('files')[0];
Expand All @@ -55,10 +69,12 @@ $("#uploadFile").click(function(){
});
});



//function to update the file
$("#updateFile").click(function(){
var fileData = $("#updateTarget").prop('files')[0];
var fileId = $("#updateId").val();
var fileId = $("#updateFile").data("file-id");
if (!fileId)
{
alert("Replacement Id Not Found");
Expand Down Expand Up @@ -90,7 +106,7 @@ $("#updateFile").click(function(){

//function to delete the file
$("#deleteFile").click(function(){
var fileId = $("#deleteId").val();
var fileId = $("#deleteFile").data("file-id");
if(!fileId)
{
alert("No File to be deleted");
Expand Down

0 comments on commit a4515bf

Please sign in to comment.