Aufgabe 2: Struktur vorbereitet
This commit is contained in:
Selina
parent
40394d2012
commit
bf4ce7d58c
19 changed files with 868 additions and 25 deletions
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
270
aufgabe2/css/main.css
Normal file
270
aufgabe2/css/main.css
Normal file
|
|
@ -0,0 +1,270 @@
|
||||||
|
a:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Add a black background color to the top navigation */
|
||||||
|
.topnav {
|
||||||
|
background: linear-gradient(to bottom, lightgrey, white);
|
||||||
|
border: 1px solid lightgrey;
|
||||||
|
overflow: hidden;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav ul, .topnav li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topnav ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.topnav .wambo { /* der bereich der den content hält : brauchen wir für die flexbox*/
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.topnav .pic-wrapper, .topnav a, .topnav #hamburger-toggle {
|
||||||
|
height: 75px;
|
||||||
|
line-height: 75px;
|
||||||
|
}
|
||||||
|
/* geht auch ohne .topnav .pic-wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
}*/
|
||||||
|
.topnav a {
|
||||||
|
display: block;
|
||||||
|
transition: 0.5s all ease;
|
||||||
|
padding: 0 15px;
|
||||||
|
padding-top: 12px;
|
||||||
|
/*box-sizing: border-box; kommt bereits über reset.css */
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.topnav a, .footer {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.topnav a:hover {
|
||||||
|
background: lightgrey;
|
||||||
|
|
||||||
|
}
|
||||||
|
.topnav .pic-wrapper {
|
||||||
|
margin-right: 15px; /* abstand zu <ul> / links */
|
||||||
|
}
|
||||||
|
.topnav .pic-wrapper:hover img {
|
||||||
|
margin-top: -80px;
|
||||||
|
}
|
||||||
|
/* das <li> */
|
||||||
|
.topnav .icon {
|
||||||
|
display: block;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
border-left: 1px solid lightgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lastBorder {
|
||||||
|
border-right: 1px solid lightgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.topnav #hamburger-toggle {
|
||||||
|
display: none; /* normal net sichtbar */
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
width: 1170px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 1050px) {
|
||||||
|
.page {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 500px) {
|
||||||
|
.page {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#section {
|
||||||
|
margin-top: 85px; /* wie die header hoch ist; notwendig da header position fixed hat; 75px + 10px extra */
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: 20px 0;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 145%;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
border: 1px solid lightgrey;
|
||||||
|
border-top-color: lightgreen;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
column-count: 3;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
box-shadow: 0 2px 3px lightgrey;
|
||||||
|
|
||||||
|
margin-bottom: 12px; /* damit control nicht so daran klebt */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1000px) {
|
||||||
|
.text {
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 500px) {
|
||||||
|
.text {
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text a {
|
||||||
|
color: lightgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text a:hover {
|
||||||
|
color: darkgreen;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.table-wrapper {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#t01 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#t01 tr:nth-child(odd) {
|
||||||
|
background-color: lightgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#t01 th {
|
||||||
|
background-color: #fff;
|
||||||
|
white-space: nowrap; /* kein umbruch bei schmaler ansicht */
|
||||||
|
}
|
||||||
|
/* die sort up sort down icons neben den Spaltennamen */
|
||||||
|
table#t01 th i {
|
||||||
|
font-size: 0.6em;
|
||||||
|
color: lightgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#t01 th, table#t01 td {
|
||||||
|
line-height: 1em;
|
||||||
|
padding: 11px 0;
|
||||||
|
font-size: 14px; /* same as section */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1200px) {
|
||||||
|
table#t01 th:nth-child(n+7), table#t01 td:nth-child(n+7) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 900px) {
|
||||||
|
table#t01 th:nth-child(n+5), table#t01 td:nth-child(n+5) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
table#t01 th:nth-child(n+4), table#t01 td:nth-child(n+4) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxed {
|
||||||
|
border: 1px solid green;
|
||||||
|
width: 80%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 3px solid lightgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.did {
|
||||||
|
border: 1px solid;
|
||||||
|
float: left;
|
||||||
|
padding: 2em;
|
||||||
|
min-height: 150px;
|
||||||
|
min-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
border-top: 2px solid lightgreen;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.foo-left {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foo-right {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option_list ul li {
|
||||||
|
display: inline;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option_list ul {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option_list li {
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hamburger menu stuff */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 950px) {
|
||||||
|
.topnav #hamburger-toggle {
|
||||||
|
display: block; /* normal net sichtbar */
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.topnav .wambo {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.topnav #menu {
|
||||||
|
display: none;
|
||||||
|
background-color: #ffffff;
|
||||||
|
position: fixed; /* absolute geht nicht wenn das parent fixed ist ; muss auch fixed sein */
|
||||||
|
top: 77px;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.topnav a {
|
||||||
|
padding-top: 0;
|
||||||
|
height: 3em;
|
||||||
|
line-height: 3em;
|
||||||
|
}
|
||||||
|
.topnav #menu.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
139
aufgabe2/css/reset.css
Normal file
139
aufgabe2/css/reset.css
Normal file
|
|
@ -0,0 +1,139 @@
|
||||||
|
/*
|
||||||
|
HTML5 Reset :: style.css
|
||||||
|
----------------------------------------------------------
|
||||||
|
We have learned much from/been inspired by/taken code where offered from:
|
||||||
|
|
||||||
|
Eric Meyer :: http://meyerweb.com
|
||||||
|
HTML5 Doctor :: http://html5doctor.com
|
||||||
|
and the HTML5 Boilerplate :: http://html5boilerplate.com
|
||||||
|
|
||||||
|
-------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
/* Let's default this puppy out
|
||||||
|
-------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: normal;
|
||||||
|
vertical-align: baseline;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
|
||||||
|
|
||||||
|
/* Handle box-sizing while better addressing child elements:
|
||||||
|
http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
|
||||||
|
|
||||||
|
/* Responsive images and other embedded objects */
|
||||||
|
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
|
||||||
|
img,
|
||||||
|
object,
|
||||||
|
embed {max-width: 100%;}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
|
||||||
|
In fact, it *will* cause problems with Google Maps' controls at small size.
|
||||||
|
If this is the case for you, try uncommenting the following:
|
||||||
|
|
||||||
|
#map img {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* force a vertical scrollbar to prevent a jumpy page */
|
||||||
|
html {overflow-y: scroll;}
|
||||||
|
|
||||||
|
/* we use a lot of ULs that aren't bulleted.
|
||||||
|
you'll have to restore the bullets within content,
|
||||||
|
which is fine because they're probably customized anyway */
|
||||||
|
ul {list-style: none;}
|
||||||
|
|
||||||
|
blockquote, q {quotes: none;}
|
||||||
|
|
||||||
|
blockquote:before,
|
||||||
|
blockquote:after,
|
||||||
|
q:before,
|
||||||
|
q:after {content: ''; content: none;}
|
||||||
|
|
||||||
|
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
|
||||||
|
|
||||||
|
del {text-decoration: line-through;}
|
||||||
|
|
||||||
|
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
|
||||||
|
|
||||||
|
/* tables still need cellspacing="0" in the markup */
|
||||||
|
table {border-collapse: separate; border-spacing: 0;}
|
||||||
|
th {font-weight: bold; vertical-align: bottom;}
|
||||||
|
td {font-weight: normal; vertical-align: top;}
|
||||||
|
|
||||||
|
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
|
||||||
|
|
||||||
|
input, select {vertical-align: middle;}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: pre; /* CSS2 */
|
||||||
|
white-space: pre-wrap; /* CSS 2.1 */
|
||||||
|
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
|
||||||
|
word-wrap: break-word; /* IE */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="radio"] {vertical-align: text-bottom;}
|
||||||
|
input[type="checkbox"] {vertical-align: bottom;}
|
||||||
|
.ie7 input[type="checkbox"] {vertical-align: baseline;}
|
||||||
|
.ie6 input {vertical-align: text-bottom;}
|
||||||
|
|
||||||
|
select, input, textarea {font: 99% sans-serif;}
|
||||||
|
|
||||||
|
small {font-size: 85%;}
|
||||||
|
|
||||||
|
strong {font-weight: bold;}
|
||||||
|
|
||||||
|
td, td img {vertical-align: top;}
|
||||||
|
|
||||||
|
/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
|
||||||
|
sub, sup {font-size: 75%; line-height: 0; position: relative;}
|
||||||
|
sup {top: -0.5em;}
|
||||||
|
sub {bottom: -0.25em;}
|
||||||
|
|
||||||
|
/* standardize any monospaced elements */
|
||||||
|
pre, code, kbd, samp {font-family: monospace, sans-serif;}
|
||||||
|
|
||||||
|
/* hand cursor on clickable elements */
|
||||||
|
.clickable,
|
||||||
|
label,
|
||||||
|
input[type=button],
|
||||||
|
input[type=submit],
|
||||||
|
input[type=file],
|
||||||
|
button {cursor: pointer;}
|
||||||
|
|
||||||
|
/* Webkit browsers add a 2px margin outside the chrome of form elements */
|
||||||
|
button, input, select, textarea {margin: 0;}
|
||||||
|
|
||||||
|
/* make buttons play nice in IE */
|
||||||
|
button,
|
||||||
|
input[type=button] {width: auto; overflow: visible;}
|
||||||
|
|
||||||
|
/* scale images in IE7 more attractively */
|
||||||
|
.ie7 img {-ms-interpolation-mode: bicubic;}
|
||||||
|
|
||||||
|
/* prevent BG image flicker upon hover
|
||||||
|
(commented out as usage is rare, and the filter syntax messes with some pre-processors)
|
||||||
|
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* let's clear some floats */
|
||||||
|
.clearfix:after { content: " "; display: block; clear: both; }
|
||||||
95
aufgabe2/index.php
Normal file
95
aufgabe2/index.php
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Page Title</title>
|
||||||
|
<meta name="description" content="Die Daten der Welt im Überblick" />
|
||||||
|
<meta name="author" content="Michael Hübener und Selina Marie-Alice Schönherr">
|
||||||
|
<meta name="keywords" content="Welt, Daten, Überblick, HTML">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
|
||||||
|
<script src="js/table.js"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
|
||||||
|
crossorigin="anonymous">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header class="topnav" id="header">
|
||||||
|
<div class="page">
|
||||||
|
<nav class="wambo">
|
||||||
|
<div class="pic-wrapper">
|
||||||
|
<img src="resources/world_data_logo_v1.png" alt="Logo">
|
||||||
|
</div>
|
||||||
|
<ul id="menu">
|
||||||
|
<li class="icon">
|
||||||
|
<a href="index.php"><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a>
|
||||||
|
</li>
|
||||||
|
<li class="icon">
|
||||||
|
<a href="index.php?page=parse"><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Parse</a>
|
||||||
|
</li>
|
||||||
|
<li class="icon">
|
||||||
|
<a href="index.php?page=save"><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Save</a>
|
||||||
|
</li>
|
||||||
|
<li class="icon">
|
||||||
|
<a href="index.php?page=print"><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A2 - Print</a>
|
||||||
|
</li>
|
||||||
|
<li class="icon">
|
||||||
|
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A3 - REST</a>
|
||||||
|
</li>
|
||||||
|
<li class="icon lastBorder">
|
||||||
|
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div id="hamburger-toggle"><i class="fas fa-bars"></i></div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="page" id="section">
|
||||||
|
<h1>World Data Overview ...</h1>
|
||||||
|
|
||||||
|
<p class='text'>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie,
|
||||||
|
musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
|
||||||
|
pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa
|
||||||
|
continuar payar custosi traductores.
|
||||||
|
|
||||||
|
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
|
||||||
|
coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li
|
||||||
|
nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
|
||||||
|
|
||||||
|
It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un
|
||||||
|
simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres
|
||||||
|
del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li
|
||||||
|
sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
|
||||||
|
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.
|
||||||
|
|
||||||
|
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div id="options" class="option_list"></div>
|
||||||
|
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table id="t01"></table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<div class="page">
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="foo-left">
|
||||||
|
<p>Copyright © 2018 world_data</p>
|
||||||
|
<p>First course exercise HTML, CSS and JS of the lecture Web and Multimedia Engineering</p>
|
||||||
|
</div>
|
||||||
|
<div class="foo-right">
|
||||||
|
<p>This solution has been created by: <br> Team 26</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
285
aufgabe2/js/table.js
Normal file
285
aufgabe2/js/table.js
Normal file
|
|
@ -0,0 +1,285 @@
|
||||||
|
// Source: https://blog.mounirmesselmeni.de/2012/11/20/reading-csv-file-with-javascript-and-html5-file-api/
|
||||||
|
// Source: https://www.js-tutorials.com/javascript-tutorial/reading-csv-file-using-javascript-html5/
|
||||||
|
// Source: https://stackoverflow.com/questions/13329853/reading-server-file-with-javascript
|
||||||
|
// Source: https://www.w3schools.com/howto/howto_js_sort_table.asp
|
||||||
|
// Source: https://stackoverflow.com/questions/19105009/how-to-insert-variables-in-javascript-strings
|
||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
handleFile("resources/world_data_v1.csv");
|
||||||
|
registerHamburgerToggleClickListener();
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleFile(path) {
|
||||||
|
// Check for the various File API support.
|
||||||
|
if (window.FileReader) {
|
||||||
|
// FileReader are supported.
|
||||||
|
var xmlhttp = new XMLHttpRequest();
|
||||||
|
xmlhttp.onreadystatechange = function () {
|
||||||
|
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
|
||||||
|
processData(xmlhttp.responseText, path);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xmlhttp.open("GET", path, true);
|
||||||
|
xmlhttp.send();
|
||||||
|
} else {
|
||||||
|
alert('FileReader are not supported in this browser.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function rerequestFile(path, columns) {
|
||||||
|
if (window.FileReader) {
|
||||||
|
// FileReader are supported.
|
||||||
|
var xmlhttp = new XMLHttpRequest();
|
||||||
|
xmlhttp.onreadystatechange = function () {
|
||||||
|
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
|
||||||
|
updateTable(xmlhttp.responseText, columns);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xmlhttp.open("GET", path, true);
|
||||||
|
xmlhttp.send();
|
||||||
|
} else {
|
||||||
|
alert('FileReader are not supported in this browser.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function processData(csv, path) {
|
||||||
|
var columnAmount = 7;
|
||||||
|
var table = "";
|
||||||
|
var checkbox = "";
|
||||||
|
|
||||||
|
// split rows
|
||||||
|
var allTextLines = csv.split(/\r\n|\n/);
|
||||||
|
|
||||||
|
// create table header
|
||||||
|
table += "<thead><tr>";
|
||||||
|
checkbox += "<ul>";
|
||||||
|
|
||||||
|
var data = allTextLines[0].split(",");
|
||||||
|
|
||||||
|
for (var j = 0; j < columnAmount; j++) {
|
||||||
|
// create table column header
|
||||||
|
table += "<th onclick=\"sortTable(" + j + ")\" >";
|
||||||
|
table += stringPerToSlash(data[j]);
|
||||||
|
table += ' <i class="fas fa-chevron-up"></i> <i class="fas fa-chevron-down"></i>';
|
||||||
|
table += "</th>";
|
||||||
|
|
||||||
|
// create dropdown elements
|
||||||
|
checkbox += "<li>";
|
||||||
|
checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
|
||||||
|
checkbox += data[j];
|
||||||
|
checkbox += "</li>";
|
||||||
|
}
|
||||||
|
|
||||||
|
checkbox += "</ul>";
|
||||||
|
table += "</tr></thead><tbody>";
|
||||||
|
|
||||||
|
// create table content
|
||||||
|
for (var i = 1; i < allTextLines.length; i++) {
|
||||||
|
var data = allTextLines[i].split(',');
|
||||||
|
|
||||||
|
table += "<tr>";
|
||||||
|
|
||||||
|
for (var j = 0; j < columnAmount; j++) {
|
||||||
|
table += "<td>";
|
||||||
|
table += data[j];
|
||||||
|
table += "</td>";
|
||||||
|
}
|
||||||
|
|
||||||
|
table += "</tr>";
|
||||||
|
}
|
||||||
|
|
||||||
|
table += "</tbody>";
|
||||||
|
|
||||||
|
document.getElementById('t01').innerHTML = table;
|
||||||
|
document.getElementById('options').innerHTML = checkbox;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleColumn(file) {
|
||||||
|
var activated_columns = [];
|
||||||
|
|
||||||
|
/*
|
||||||
|
var inner_div = document.getElementById('options').childNodes;
|
||||||
|
|
||||||
|
for (i = 0; i < inner_div.length; i++) {
|
||||||
|
var list = inner_div[i].children[0].childNodes;
|
||||||
|
|
||||||
|
for (j = 0; j < list.length; j++) {
|
||||||
|
var checkbox = list[j].children[0];
|
||||||
|
|
||||||
|
if (checkbox.checked) {
|
||||||
|
activated_columns.push(checkbox.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
var list_elements = document.getElementById('options').children[0].childNodes;
|
||||||
|
|
||||||
|
for (i = 0; i < list_elements.length; i++) {
|
||||||
|
var element = list_elements[i];
|
||||||
|
var checkbox = element.children[0];
|
||||||
|
|
||||||
|
if (checkbox.checked) {
|
||||||
|
activated_columns.push(checkbox.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
rerequestFile(file, activated_columns);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function updateTable(csv, columns) {
|
||||||
|
var table = "";
|
||||||
|
|
||||||
|
// split rows
|
||||||
|
var allTextLines = csv.split(/\r\n|\n/);
|
||||||
|
|
||||||
|
// create table header
|
||||||
|
table += "<tr>";
|
||||||
|
|
||||||
|
var data = allTextLines[0].split(",");
|
||||||
|
var discarded_indices = [];
|
||||||
|
|
||||||
|
for (var j = 0; j < data.length; j++) {
|
||||||
|
// create table column header
|
||||||
|
if (columns.includes(data[j])) {
|
||||||
|
table += "<th onclick=\"sortTable(" + j + ")\" >";
|
||||||
|
table += data[j];
|
||||||
|
table += "</th>";
|
||||||
|
} else {
|
||||||
|
discarded_indices.push(j);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// checkbox += "</ul>";
|
||||||
|
table += "</tr>";
|
||||||
|
|
||||||
|
// create table content
|
||||||
|
for (var i = 1; i < allTextLines.length; i++) {
|
||||||
|
var data = allTextLines[i].split(',');
|
||||||
|
|
||||||
|
table += "<tr>";
|
||||||
|
|
||||||
|
for (var j = 0; j < data.length; j++) {
|
||||||
|
if (!discarded_indices.includes(j)) {
|
||||||
|
table += "<td>";
|
||||||
|
table += data[j];
|
||||||
|
table += "</td>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table += "</tr>";
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector('#t01').innerHTML = table;
|
||||||
|
}
|
||||||
|
|
||||||
|
function sortTable(n) {
|
||||||
|
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
|
||||||
|
table = document.getElementById("t01");
|
||||||
|
switching = true;
|
||||||
|
|
||||||
|
// Set the sorting direction to ascending:
|
||||||
|
dir = "asc";
|
||||||
|
|
||||||
|
/* Make a loop that will continue until
|
||||||
|
no switching has been done: */
|
||||||
|
while (switching) {
|
||||||
|
// Start by saying: no switching is done:
|
||||||
|
switching = false;
|
||||||
|
rows = table.rows;
|
||||||
|
|
||||||
|
/* Loop through all table rows (except the
|
||||||
|
first, which contains table headers): */
|
||||||
|
for (i = 1; i < (rows.length - 1); i++) {
|
||||||
|
// Start by saying there should be no switching:
|
||||||
|
shouldSwitch = false;
|
||||||
|
|
||||||
|
/* Get the two elements you want to compare,
|
||||||
|
one from current row and one from the next: */
|
||||||
|
x = rows[i].getElementsByTagName("td")[n];
|
||||||
|
y = rows[i + 1].getElementsByTagName("td")[n];
|
||||||
|
|
||||||
|
var first_element = x.innerHTML.toLowerCase();
|
||||||
|
var second_element = y.innerHTML.toLowerCase();
|
||||||
|
|
||||||
|
/* Check if the two rows should switch place,
|
||||||
|
based on the direction, asc or desc: */
|
||||||
|
if (dir == "asc") {
|
||||||
|
// check if the first element is a number, then assume the
|
||||||
|
// second element is also a number
|
||||||
|
if (isNaN(first_element)) {
|
||||||
|
if (first_element > second_element) {
|
||||||
|
// If so, mark as a switch and break the loop:
|
||||||
|
shouldSwitch = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (parseFloat(first_element) > parseFloat(second_element)) {
|
||||||
|
// If so, mark as a switch and break the loop:
|
||||||
|
shouldSwitch = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (dir == "desc") {
|
||||||
|
// check if the first element is a number, then assume the
|
||||||
|
// second element is also a number
|
||||||
|
if (isNaN(first_element)) {
|
||||||
|
if (first_element < second_element) {
|
||||||
|
// If so, mark as a switch and break the loop:
|
||||||
|
shouldSwitch = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (parseFloat(first_element) < parseFloat(second_element)) {
|
||||||
|
// If so, mark as a switch and break the loop:
|
||||||
|
shouldSwitch = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shouldSwitch) {
|
||||||
|
/* If a switch has been marked, make the switch
|
||||||
|
and mark that a switch has been done: */
|
||||||
|
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
||||||
|
switching = true;
|
||||||
|
|
||||||
|
// Each time a switch is done, increase this count by 1:
|
||||||
|
switchcount++;
|
||||||
|
} else {
|
||||||
|
/* If no switching has been done AND the direction is "asc",
|
||||||
|
set the direction to "desc" and run the while loop again. */
|
||||||
|
if (switchcount == 0 && dir == "asc") {
|
||||||
|
dir = "desc";
|
||||||
|
switching = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function stringPerToSlash(columnname) {
|
||||||
|
return columnname.includes(" per ") ? columnname.replace(" per ", " / ") : columnname;
|
||||||
|
}
|
||||||
|
|
||||||
|
function registerHamburgerToggleClickListener() {
|
||||||
|
let menu = document.querySelector("#menu");
|
||||||
|
let header = document.querySelector("#header");
|
||||||
|
let section = document.querySelector("#section");
|
||||||
|
document.querySelector("#hamburger-toggle").addEventListener('click', function () {
|
||||||
|
if (menu.classList.contains('active')) {
|
||||||
|
// menu ausblenden
|
||||||
|
document.querySelector("#menu").classList.remove('active');
|
||||||
|
section.style.marginTop = 0;
|
||||||
|
} else {
|
||||||
|
// menu einblenden
|
||||||
|
document.querySelector("#menu").classList.add('active');
|
||||||
|
let height1 = header.clientHeight;
|
||||||
|
let height2 = menu.clientHeight;
|
||||||
|
section.style.marginTop = height1 + height2 + 10 + 'px'; // + 10 für zusätzlichen abstand (klebt sonst aneinander)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
7
aufgabe2/parse.php
Normal file
7
aufgabe2/parse.php
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Created by PhpStorm.
|
||||||
|
* User: Selin
|
||||||
|
* Date: 10.11.2018
|
||||||
|
* Time: 16:00
|
||||||
|
*/
|
||||||
7
aufgabe2/print.php
Normal file
7
aufgabe2/print.php
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Created by PhpStorm.
|
||||||
|
* User: Selin
|
||||||
|
* Date: 10.11.2018
|
||||||
|
* Time: 16:00
|
||||||
|
*/
|
||||||
BIN
aufgabe2/resources/world_data_logo_v1.png
Normal file
BIN
aufgabe2/resources/world_data_logo_v1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
26
aufgabe2/resources/world_data_v1.csv
Normal file
26
aufgabe2/resources/world_data_v1.csv
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
ID ,Country ,birth rate per 1000,cell phones per 100,children per woman,electricity consumption per capita,gdp per_capita,gdp_ per_ capita_ growth,inflation annual,internet user per 100,life expectancy,military expenditure percent of gdp,gps_lat ,gps_long
|
||||||
|
001,Brazil ,16.405 ,90.01936334 ,1.862 ,2201.808724 ,4424.758692 ,-1.520402823 ,8.228535058 ,39.22 ,74 ,1.615173655 ,-14.235004000,-51.925280000
|
||||||
|
002,Canada ,10.625 ,70.70997244 ,1.668 ,15119.76414 ,25069.86915 ,-3.953353186 ,2.944408564 ,80.17086651 ,80.9 ,1.415710422 ,56.130366000 ,-106.346771000
|
||||||
|
003,Chile ,15.04 ,97.01862561 ,1.873 ,3276.06449 ,6451.631126 ,-2.610485847 ,7.47050527 ,38.8 ,78.8 ,3.064076139 ,-35.675147000,71.542969000
|
||||||
|
004,China ,13.536 ,55.97490921 ,1.642 ,2632.724637 ,2208.403948 ,8.648414427 ,6.684109668 ,28.97659939 ,75.6 ,2.24110794 ,35.86166000 ,104.19539700
|
||||||
|
005,Colombia ,20.605 ,92.34584564 ,2.405 ,1041.994137 ,3137.695335 ,0.2081538559 ,3.666941163 ,30 ,75.3 ,3.833780372 ,4.570868000 ,-74.297333000
|
||||||
|
006,Ecuador ,20.989 ,92.84925653 ,2.69 ,1078.038961 ,1692.067197 ,-1.079538461 ,7.595866872 ,24.6 ,74.1 ,3.746501879 ,-1.831239000 ,-78.183406000
|
||||||
|
007,Egypt ,24.83 ,69.43661504 ,2.919 ,1607.918763 ,1911.964501 ,2.856917581 ,10.10750976 ,24.28 ,70.2 ,2.137305699 ,26.820553000 ,30.802498000
|
||||||
|
008,Finland ,11.127 ,144.1530224 ,1.86 ,15241.61194 ,26205.68832 ,-8.791558776 ,0.4277308694 ,82.53133098 ,79.7 ,1.501872268 ,61.924110000 ,25.748151000
|
||||||
|
009,France ,12.21 ,95.44434226 ,1.978 ,7339.946832 ,22508.76261 ,-3.264056248 ,1.050366124 ,69.0633593 ,81 ,2.55313249 ,46.22763800 ,2.21374900
|
||||||
|
010,Germany ,8.136 ,127.4188883 ,1.376 ,6753.05764 ,24368.19561 ,-4.886323581 ,0.5959234322 ,79.48523153 ,80 ,1.438871341 ,51.165691000 ,10.451526000
|
||||||
|
011,Iceland ,14.738 ,107.6604456 ,2.123 ,51259.18763 ,35310.97441 ,-6.990418561 ,6.900703626 ,92.13686385 ,82.2 ,0.0820538039 ,64.9630510000,-19.0208350000
|
||||||
|
012,Iraq ,31.585 ,65.47478839 ,4.276 ,1086.323768 ,752.1833548 ,1.141874289 ,25.22442136 ,1.047516616 ,68.1 ,4.621383386 ,33.223191000 ,43.679291000
|
||||||
|
013,Japan ,8.201 ,91.8955442 ,1.359 ,7838.005685 ,38242.02429 ,-6.180260885 ,-2.08543109 ,77.38468963 ,82.8 ,1.019445017 ,36.204824000 ,138.252924000
|
||||||
|
014,Kazakhstan ,19.775 ,107.7147692 ,2.537 ,4447.142293 ,2345.86415 ,-1.437812068 ,19.5422854 ,17.91457965 ,66.6 ,1.105385125 ,48.019573000 ,66.923684000
|
||||||
|
015,Mexico ,19.091 ,74.25785259 ,2.313 ,1869.82352 ,5875.619997 ,-7.417438847 ,4.033645258 ,26.34 ,75.5 ,0.5396656609 ,23.6345010000,-102.5527840000
|
||||||
|
016,New Zealand ,13.831 ,108.7301521 ,2.125 ,9375.550304 ,14778.16393 ,-1.552308788 ,3.486782259 ,79.82609287 ,80.3 ,1.140562366 ,-40.900557000,174.885971000
|
||||||
|
017,Nigeria ,40.134 ,48.23561006 ,6.021 ,119.8151486 ,513.5003377 ,4.3526073 ,9.313146383 ,20 ,58.5 ,0.8924302789 ,9.0819990000 ,8.6752770000
|
||||||
|
018,Peru ,21.342 ,85.86901405 ,2.545 ,1043.052601 ,2955.186222 ,-0.2228977721 ,4.49134447 ,31.4 ,76.7 ,1.348875763 ,-9.189967000 ,-75.015152000
|
||||||
|
019,Russia ,10.828 ,161.1162887 ,1.537 ,6132.978648 ,2806.41483 ,-7.749103694 ,11.60398093 ,29.23584146 ,68.3 ,4.36259042 ,61.52401000 ,105.31875600
|
||||||
|
020,Saudi Arabia ,23.569 ,167.3474553 ,2.898 ,7430.743897 ,9294.355996 ,-2.242127204 ,14.36222827 ,38 ,77.6 ,10.95653405 ,23.88594200 ,45.07916200
|
||||||
|
021,South Africa ,22.113 ,93.33587369 ,2.5 ,4532.021902 ,3697.67368 ,-2.732989408 ,7.861608575 ,10.08745979 ,55.8 ,1.394530379 ,-30.559482000,22.937506000
|
||||||
|
022,Sweden ,11.72 ,112.1241184 ,1.937 ,14143.01101 ,30885.45914 ,-5.976535294 ,1.022227082 ,91.12326108 ,81.2 ,1.247701873 ,60.128161000 ,18.643501000
|
||||||
|
023,United Arab Emirates,14.027 ,153.7997194 ,1.903 ,9998.291079 ,22507.00157 ,-11.99171952 ,8.549032358 ,64 ,76.1 ,5.834881976 ,23.424076000 ,53.847818000
|
||||||
|
024,United Kingdom ,12.195 ,130.1742603 ,1.89 ,5685.635995 ,27933.77767 ,-5.019251823 ,2.861406642 ,77.79971962 ,79.7 ,2.667209048 ,52.355517700 ,-1.174319700
|
||||||
|
025,United States ,14.191 ,89.14911634 ,2.002 ,12913.71143 ,36539.22823 ,-4.342271218 ,1.152326348 ,71.21181627 ,78.3 ,4.822730027 ,37.090240000 ,-95.712891000
|
||||||
|
7
aufgabe2/save.php
Normal file
7
aufgabe2/save.php
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Created by PhpStorm.
|
||||||
|
* User: Selin
|
||||||
|
* Date: 10.11.2018
|
||||||
|
* Time: 16:00
|
||||||
|
*/
|
||||||
7
aufgabe2/world_data_parser.php
Normal file
7
aufgabe2/world_data_parser.php
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Created by PhpStorm.
|
||||||
|
* User: Selin
|
||||||
|
* Date: 10.11.2018
|
||||||
|
* Time: 15:59
|
||||||
|
*/
|
||||||
Loading…
Reference in a new issue