yudis · ariefsuharsono · Feb 22, 2013 · Feb 22, 2013 · Feb 22, 2013 · Feb 22, 2013
diff --git a/MEMBER.md b/MEMBER.md
@@ -0,0 +1,4 @@
+NIM : Nama : GitHub ID : e-mail
+13510053 : Fabrian Oktavino : sm2mlg : [email protected]
+13510055 : Atika Yusuf : atikayusuf : [email protected]
+13510087 : Arief Suharsono : ariefsuharsono : [email protected]
diff --git a/README.md b/README.md
@@ -1,17 +0,0 @@
-IF3038-2013
-===========
-
-Repositori ini adalah repositori dasar yang akan dijadikan basis oleh setiap kelompok peserta kuliah IF3038.
-Pengumpulan Tugas:
-- Sebutkan URL repositori yang akan dinilai
-  - Repositori ini harus merupakan fork dari repo ini (baik secara langsung atau tidak langsung)
-- Sebutkan anggota dari kelompok (NIM NAMA MAIL GITHUB_ID)
-- Kontributor dari repositori tersebut HANYA anggota kelompok yang bersangkutan
-
-Rule dan Konvensi:
-- Setiap peserta harus menggunakan akun pribadi, dan bukan shared-account, pada setiap kegiatan/hubungan dengan github
-- Proyek yang dikumpulkan harus memuat file berikut:
-  - INSTALL.md - berisi how-to untuk proses peng-install-an dari aplikasi
-  - MEMEBER.md - berisi NIM NAMA MAIL GITHUB_ID dari anggota grup ini
-  - src/ - berisi semua kode sumber dari aplikasi yang akan anda kumplukan
-  - docs/ - berisi dokumentasi dari aplikasi, jika diperlukan

diff --git a/Tubes 1/MEMBER.md b/Tubes 1/MEMBER.md
@@ -0,0 +1,3 @@
+13510019 Andreas Bara Timur [email protected]
+13510039 Felix Terahadi [email protected]
+13510087 Arief Suharsono [email protected] ariefsuharsono
diff --git a/Tubes 1/README.md b/Tubes 1/README.md
@@ -0,0 +1,17 @@
+IF3038-2013
+===========
+
+Repositori ini adalah repositori dasar yang akan dijadikan basis oleh setiap kelompok peserta kuliah IF3038.
+Pengumpulan Tugas:
+- Sebutkan URL repositori yang akan dinilai
+  - Repositori ini harus merupakan fork dari repo ini (baik secara langsung atau tidak langsung)
+- Sebutkan anggota dari kelompok (NIM NAMA MAIL GITHUB_ID)
+- Kontributor dari repositori tersebut HANYA anggota kelompok yang bersangkutan
+
+Rule dan Konvensi:
+- Setiap peserta harus menggunakan akun pribadi, dan bukan shared-account, pada setiap kegiatan/hubungan dengan github
+- Proyek yang dikumpulkan harus memuat file berikut:
+  - INSTALL.md - berisi how-to untuk proses peng-install-an dari aplikasi
+  - MEMEBER.md - berisi NIM NAMA MAIL GITHUB_ID dari anggota grup ini
+  - src/ - berisi semua kode sumber dari aplikasi yang akan anda kumplukan
+  - docs/ - berisi dokumentasi dari aplikasi, jika diperlukan
diff --git a/Tubes 1/src/.dropbox b/Tubes 1/src/.dropbox
@@ -0,0 +1 @@
+233579635
diff --git a/Tubes 1/src/Felix/Dashboard.html b/Tubes 1/src/Felix/Dashboard.html
@@ -0,0 +1,36 @@
+
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<title> Dashboard </title>
+		<link rel="stylesheet" type="text/css" href="dashboard.css">
+		<script src="dashboard.js"></script>
+	</head>
+	<body onload="loadCategory(); loadContentCategory(-1);">
+
+	    <a href="#x" class="overlay" id="join_form"></a>
+        <div class="popup">
+            <p>Add Category</p>
+            <div>
+                <label for="category">category name</label>
+                <input type="text" id="category" value="" />
+            </div>
+            <div>
+                <label>permission</label><br>
+                <textarea rows="4" cols="32" id="permission"></textarea>
+            </div>
+            <input type="button" value="Add Category" />
+
+            <a class="close" href="#close"></a>
+        </div>
+	<div id="dashboard-header">  
+		<h1 id="dashboard-title"> Dashboard </h1>
+	</div>
+
+	<div id="dashboard-listcategory">
+
+	</div>
+	<div id="dashboard-tugas">
+
+	</body>
+</html>
diff --git a/Tubes 1/src/Felix/HTML5_Logo_512.png b/Tubes 1/src/Felix/HTML5_Logo_512.png
diff --git a/Tubes 1/src/Felix/dashboard.css b/Tubes 1/src/Felix/dashboard.css
@@ -0,0 +1,213 @@
+.label-biodata{
+	font-family:"Times New Roman", Times, serif;
+	color:white;
+	font-size:15px;
+
+}
+
+#dashboard-header{
+	width:980px;
+	border : 1px solid #ccc;
+	border-radius : 5px;
+	-mox-border-radius : 5px;
+	-webkit-border-radius : 5px;
+	-o-border-radius : 5px;
+    border-style: dashed;
+	margin: 10px 0px;
+}
+
+#dashboard-tugas{
+	width:600px; 
+	height:500px; 
+	float:right;
+	border : 1px solid #ccc;
+	border-radius : 5px;
+	-mox-border-radius : 5px;
+	-webkit-border-radius : 5px;
+	-o-border-radius : 5px;
+    border-style: dashed;
+	padding: 25px 25px;
+	overflow:auto;
+}
+
+#dashboard-listcategory{
+	width:250px; 
+	height:500px;
+	float:left;
+	border : 1px solid #ccc;
+	border-radius : 5px;
+	-mox-border-radius : 5px;
+	-webkit-border-radius : 5px;
+	-o-border-radius : 5px;
+    border-style: dashed;
+	margin-right:10px;
+	padding : 25px;
+	overflow:auto;
+
+}
+
+h1{color:white;}
+h2{color:white;}
+h3{color:white;}
+h4{color:white;}
+h5{color:white;}
+h6{color:white;}
+h7{color:white;}
+#dashboard-title{
+	text-align: center;
+}
+
+.dash-category{
+	color:yellow;
+}
+.dash-category:hover{
+	color:orange;
+}
+
+.category-content{
+	height:auto;
+	border-radius : 5px;
+	-mox-border-radius : 5px;
+	-webkit-border-radius : 5px;
+	-o-border-radius : 5px;
+    border-style: dotted;
+	border-color: white;
+	margin-bottom:25px;
+	padding: 0px 25px 25px;
+}
+
+li{color:white;}
+a{color:yellow;}
+
+a:hover{
+	color:orange;
+}
+
+a.tag{
+	color:yellow;
+}
+a.tag:hover{
+	color:orange;
+}
+
+button{
+	float:right;
+}
+
+
+a#login_pop:hover, a#join_pop:hover {
+    border-color: #eee;
+}
+.overlay {
+    background-color: rgba(100, 100, 100, 0.6);
+    bottom: 0;
+    cursor: default;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    visibility: hidden;
+    z-index: 1;
+
+    -webkit-transition: opacity .5s;
+    -moz-transition: opacity .5s;
+    -ms-transition: opacity .5s;
+    -o-transition: opacity .5s;
+    transition: opacity .5s;
+}
+.overlay:target {
+    visibility: visible;
+    opacity: 1;
+}
+.popup {
+    background-color: #888;
+    border: 3px solid #222;
+    display: inline-block;
+    left: 50%;
+    opacity: 100%;
+    padding: 15px;
+    position: fixed;
+    text-align: justify;
+    top: 40%;
+    visibility: hidden;
+    z-index: 10;
+
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+    border-radius: 10px;
+
+    -webkit-box-shadow: 0 1px 1px 2px rgba(255, 255, 0, 0.4) inset;
+    -moz-box-shadow: 0 1px 1px 2px rgba(255, 255, 0, 0.4) inset;
+    -ms-box-shadow: 0 1px 1px 2px rgba(255, 255, 0, 0.4) inset;
+    -o-box-shadow: 0 1px 1px 2px rgba(255, 255, 0, 0.4) inset;
+    box-shadow: 0 1px 1px 2px rgba(255, 255, 0, 0.4) inset;
+
+    -webkit-transition: opacity .5s, top .5s;
+    -moz-transition: opacity .5s, top .5s;
+    -ms-transition: opacity .5s, top .5s;
+    -o-transition: opacity .5s, top .5s;
+    transition: opacity .5s, top .5s;
+}
+.overlay:target+.popup {
+    top: 25%;
+    opacity: 1;
+    visibility: visible;
+}
+.close {
+    background-color: rgba(0, 0, 0, 0.8);
+    height: 30px;
+    line-height: 30px;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    text-decoration: none;
+    top: -15px;
+    width: 30px;
+
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    -ms-border-radius: 15px;
+    -o-border-radius: 15px;
+    border-radius: 15px;
+}
+.close:before {
+    color: rgba(255, 255, 255, 0.9);
+    content: "X";
+    font-size: 24px;
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
+}
+.close:hover {
+    background-color: rgba(64, 128, 128, 0.8);
+}
+.popup p, .popup div {
+    margin-bottom: 10px;
+}
+.popup label {
+    display: inline-block;
+    text-align: left;
+    width: 120px;
+}
+.popup input[type="text"], .popup input[type="password"] {
+    border: 1px solid;
+    border-color: #999 #ccc #ccc;
+    margin: 0;
+    padding: 2px;
+
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    -ms-border-radius: 2px;
+    -o-border-radius: 2px;
+    border-radius: 2px;
+}
+.popup input[type="text"]:hover, .popup input[type="password"]:hover {
+    border-color: #555 #888 #888;
+}
diff --git a/Tubes 1/src/Felix/dashboard.js b/Tubes 1/src/Felix/dashboard.js
@@ -0,0 +1,73 @@
+
+var kategori = [
+	{ID: "Kategori 0", task: {Name:["task01","task02"],Deadline: ["01-01-2013","01-02-2013"], Deskripsi: ["deskripsi tugas 1","deskripsi tugas 2"]}, tag: ["tag01", "tag02"]},
+	{ID: "Kategori 1", task: {Name:["task03","task04"],Deadline: ["02-01-2013","02-02-2013"], Deskripsi: ["deskripsi tugas 3","deskripsi tugas 4"]}, tag: ["tag11", "tag12"]},
+	{ID: "Kategori 2", task: {Name:["task05","task06"],Deadline: ["03-01-2013","03-02-2013"], Deskripsi: ["deskripsi tugas 5","deskripsi tugas 6"]}, tag: ["tag21", "tag22"]},
+];			
+
+
+function loadCategory()
+{
+	var xx = document.getElementById("dashboard-listcategory");
+	xx.innerHTML = xx.innerHTML + "<a class=\"dash-category\" href=\"#\" onclick=\"loadContentCategory(-1)\">all</a><br>";
+
+	for (var b = 0; b < kategori.length; b++)
+	{
+		xx.innerHTML = xx.innerHTML + ("<a id=\"dash-category" + b + "\" href=\"#\" onclick=\"loadContentCategory(" + b + ")\">" + kategori[b].ID + "</a><br>");
+	}	
+
+	xx.innerHTML = xx.innerHTML + "<a class=\"dash-category\" href=\"#join_form\" id=\"join_pop\">add category</a>";
+}
+
+function loadTask(var1){
+	var a = Math.floor(var1/10);
+	var b = var1 % 10;
+	var xx = document.getElementById("dashboard-tugas");
+	xx.innerHTML = "";	
+	xx.innerHTML += "<h3>" + kategori[a].task.Name[b] + "</h3><br><h4>" + kategori[a].task.Deskripsi[b] + "</h4>";
+
+}
+
+function makeTask(var1)
+{
+	var xx = document.getElementById("dashboard-tugas");
+	xx.innerHTML = "";
+	xx.innerHTML += "<h4>halaman pembuatan tugas</h4>";
+}
+
+function loadContentCategory(var1)
+{
+	var yy = document.getElementById("dashboard-tugas");
+	yy.innerHTML = "";
+
+	if (var1 != -1){
+		var zz = "";
+		zz += "<div class=\"category-content\"><h3>" + kategori[var1].ID + "</h3><hr><h4>Task:</h4><ol>";
+		for (c = 0; c < kategori[var1].task.Name.length; c++){
+			zz += "<li><a id=\"dash-task" + var1 + "" + c + "\" href=\"#\" onclick=\"loadTask(" + var1 + "" + c + ")\">"+ kategori[var1].task.Name[c] + " deadline: " + kategori[var1].task.Deadline[c] + "</a></li>";
+		}
+		zz += "</ol><h4>tag :</h4>";
+
+		for (d = 0; d < kategori[var1].tag.length; d++){
+			zz+= "<a class=\"tag\" href=\"#\">" + kategori[var1].tag[d] + " </a>";
+		}
+		zz += "<br></div><button onclick=\"makeTask(" + var1 + ")\">Add Task</button>";
+		yy.innerHTML += zz;	
+	} else {
+		for (var a = 0; a < kategori.length; a++)
+		{
+			var zz = "";
+			zz += "<div class=\"category-content\"><h3>" + kategori[a].ID + "</h3><hr><h4>Task:</h4><ol>";
+			for (c = 0; c < kategori[a].task.Name.length; c++){
+				zz += "<li><a id=\"dash-task" + a + "" + c + "\" href=\"#\" onclick=\"loadTask(" + a + "" + c + ")\">"+ kategori[a].task.Name[c] + " deadline: " + kategori[a].task.Deadline[c] + "</a></li>";
+			}
+			zz += "</ol><h4>tag :</h4>";
+
+			for (d = 0; d < kategori[a].tag.length; d++){
+				zz+= "<a class=\"tag\" href=\"#\">" + kategori[a].tag[d] + " </a>";
+			}
+			zz += "<br></div>";
+			yy.innerHTML += zz;
+		}
+	}
+}