zeus
4 years ago
20 changed files with 1842 additions and 126 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><link href="/css/app.4c7338ef.css" rel="preload" as="style"><link href="/css/chunk-vendors.77230762.css" rel="preload" as="style"><link href="/js/app.9b48d8ee.js" rel="preload" as="script"><link href="/js/chunk-vendors.087c2695.js" rel="preload" as="script"><link href="/css/chunk-vendors.77230762.css" rel="stylesheet"><link href="/css/app.4c7338ef.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.087c2695.js"></script><script src="/js/app.9b48d8ee.js"></script></body></html> |
|||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><link href="/css/app.bbdfed0d.css" rel="preload" as="style"><link href="/css/chunk-vendors.e469b508.css" rel="preload" as="style"><link href="/js/app.12eb2668.js" rel="preload" as="script"><link href="/js/chunk-vendors.d8d18fe6.js" rel="preload" as="script"><link href="/css/chunk-vendors.e469b508.css" rel="stylesheet"><link href="/css/app.bbdfed0d.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.d8d18fe6.js"></script><script src="/js/app.12eb2668.js"></script></body></html> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,349 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<meta name="generator" content="Asciidoctor 2.0.12"> |
|||
<meta name="description" content="Intro and Install"> |
|||
<meta name="keywords" content="Linux, apt"> |
|||
<meta name="author" content="Apostolos rootApostolos@swarmlab.io"> |
|||
<title>An Introduction to Linux !</title> |
|||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.9/css/asciidoctor.min.css"> |
|||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> |
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/github.min.css"> |
|||
</head> |
|||
<body class="article toc2 toc-right"> |
|||
<div id="header"> |
|||
<h1>An Introduction to Linux !</h1> |
|||
<div class="details"> |
|||
<span id="author" class="author">Apostolos rootApostolos@swarmlab.io</span><br> |
|||
</div> |
|||
<div id="toc" class="toc2"> |
|||
<div id="toctitle">Table of contents</div> |
|||
<ul class="sectlevel1"> |
|||
<li><a href="#_absolute_basics">1. Absolute basics</a> |
|||
<ul class="sectlevel2"> |
|||
<li><a href="#_key_combinations">1.1. Key combinations</a></li> |
|||
<li><a href="#_ls_l">1.2. ls -l</a> |
|||
<ul class="sectlevel3"> |
|||
<li><a href="#_file_types">1.2.1. File types</a></li> |
|||
<li><a href="#_access_rights">1.2.2. Access rights</a></li> |
|||
<li><a href="#_user_group_codes">1.2.3. User group codes</a></li> |
|||
<li><a href="#_exercises">1.2.4. Exercises</a></li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div id="content"> |
|||
<div class="sect1"> |
|||
<h2 id="_absolute_basics">1. Absolute basics</h2> |
|||
<div class="sectionbody"> |
|||
<table class="tableblock frame-all grid-all stretch"> |
|||
<caption class="title">Table 1. Absolute basics</caption> |
|||
<colgroup> |
|||
<col style="width: 50%;"> |
|||
<col style="width: 50%;"> |
|||
</colgroup> |
|||
<thead> |
|||
<tr> |
|||
<th class="tableblock halign-left valign-top">Command</th> |
|||
<th class="tableblock halign-left valign-top">Meaning</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">ls</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Displays a list of files in the current working directory.</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">cd directory</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">change directories</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">passwd</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">change the password for the current user</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">file filename</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">display file type of file with name filename</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">cat textfile</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">throws content of textfile on the screen</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">pwd</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">display present working directory</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">exit or logout</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">leave this session</p></td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">man command</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">read man pages on command</p></td> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
<div class="sect2"> |
|||
<h3 id="_key_combinations">1.1. Key combinations</h3> |
|||
<table class="tableblock frame-all grid-all stretch"> |
|||
<caption class="title">Table 2. Key combinations</caption> |
|||
<colgroup> |
|||
<col style="width: 50%;"> |
|||
<col style="width: 50%;"> |
|||
</colgroup> |
|||
<thead> |
|||
<tr> |
|||
<th class="tableblock halign-left valign-top">Key or key combination</th> |
|||
<th class="tableblock halign-left valign-top">Function</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Ctrl+C</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">End a running program and return the prompt</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Ctrl+Z</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Suspend a program</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">ArrowUp and ArrowDown</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Browse history. Go to the line that you want to repeat, edit details if necessary, and press Enter to save time.</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Tab</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Command or filename completion; when multiple choices are possible, the system will either signal with an audio or visual bell, or, if too many choices are possible, ask you if you want to see them all.</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Tab Tab</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Shows file or command completion possibilities.</p></td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Shift+PageUp and Shift+PageDown</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Browse terminal buffer (to see text that has "scrolled off" the screen).</p></td> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
<div class="sect2"> |
|||
<h3 id="_ls_l">1.2. ls -l</h3> |
|||
<div class="listingblock"> |
|||
<div class="content"> |
|||
<pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># ls -al |
|||
drwxrwxr-x 4 zeus zeus 4096 Οκτ 23 21:55 . |
|||
drwxrwxr-x 9 zeus zeus 4096 Οκτ 15 14:28 .. |
|||
drwxrwxr-x 8 zeus zeus 4096 Οκτ 23 21:55 .git |
|||
drwxrwxr-x 4 zeus zeus 4096 Οκτ 14 20:24 install |
|||
crw------- 1 root root 5, 1 Οκτ 23 21:22 console |
|||
lrwxrwxrwx 1 root root 11 Οκτ 23 21:21 core -> /proc/kcore |
|||
drwxr-xr-x 4 root root 100 Οκτ 23 21:22 cpu |
|||
crw------- 1 root root 10, 59 Οκτ 23 21:21 cpu_dma_latency |
|||
crw------- 1 root root 10, 203 Οκτ 23 21:21 cuse |
|||
-rw-rw-r-- 1 zeus zeus 1517 Οκτ 23 21:55 INSTALL.md |
|||
-rw-rw-r-- 1 zeus zeus 33883 Οκτ 15 14:28 LICENSE |
|||
-rw-rw-r-- 1 zeus zeus 691 Οκτ 17 11:13 README.md</code></pre> |
|||
</div> |
|||
</div> |
|||
<div class="sect3"> |
|||
<h4 id="_file_types">1.2.1. File types</h4> |
|||
<div class="paragraph"> |
|||
<p>This table gives an overview of the characters determining the file type:</p> |
|||
</div> |
|||
<div class="admonitionblock note"> |
|||
<table> |
|||
<tr> |
|||
<td class="icon"> |
|||
<i class="fa icon-note" title="Note"></i> |
|||
</td> |
|||
<td class="content"> |
|||
<strong>d</strong>rwxrwxr-x 4 zeus zeus 4096 Οκτ 14 20:24 install |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
<table class="tableblock frame-all grid-all stretch"> |
|||
<caption class="title">Table 3. File types in a long list</caption> |
|||
<colgroup> |
|||
<col style="width: 50%;"> |
|||
<col style="width: 50%;"> |
|||
</colgroup> |
|||
<thead> |
|||
<tr> |
|||
<th class="tableblock halign-left valign-top">Symbol</th> |
|||
<th class="tableblock halign-left valign-top">Meaning</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">-</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Regular file</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">d</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Directory</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">l</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Link</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">c</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Special file</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">s</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Socket</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">p</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Named pipe</p></td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">b</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Block device</p></td> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
<div class="admonitionblock note"> |
|||
<table> |
|||
<tr> |
|||
<td class="icon"> |
|||
<i class="fa icon-note" title="Note"></i> |
|||
</td> |
|||
<td class="content"> |
|||
-<strong>rw-</strong>rw-r-- 1 zeus zeus 1517 Οκτ 23 21:55 INSTALL.md |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
<div class="sect3"> |
|||
<h4 id="_access_rights">1.2.2. Access rights</h4> |
|||
<table class="tableblock frame-all grid-all stretch"> |
|||
<caption class="title">Table 4. Access rights</caption> |
|||
<colgroup> |
|||
<col style="width: 50%;"> |
|||
<col style="width: 50%;"> |
|||
</colgroup> |
|||
<thead> |
|||
<tr> |
|||
<th class="tableblock halign-left valign-top">Code</th> |
|||
<th class="tableblock halign-left valign-top">Meaning</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">0 or -</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">The access right that is supposed to be on this place is not granted.</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">4 or</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">read access is granted to the user category defined in this place</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">2 or</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">write permission is granted to the user category defined in this place</p></td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">1 or</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">execute permission is granted to the user category defined in this place</p></td> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
<div class="sect3"> |
|||
<h4 id="_user_group_codes">1.2.3. User group codes</h4> |
|||
<table class="tableblock frame-all grid-all stretch"> |
|||
<caption class="title">Table 5. User group codes</caption> |
|||
<colgroup> |
|||
<col style="width: 33.3333%;"> |
|||
<col style="width: 33.3333%;"> |
|||
<col style="width: 33.3334%;"> |
|||
</colgroup> |
|||
<thead> |
|||
<tr> |
|||
<th class="tableblock halign-left valign-top">Code</th> |
|||
<th class="tableblock halign-left valign-top">Meaning</th> |
|||
<th class="tableblock halign-left valign-top"></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">u</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">user permissions</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">-<strong>rw-</strong>rw-r--</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">g</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">group permissions</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">-rw-<strong>rw-</strong>r--</p></td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">o</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">permissions for others</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">-rw-rw-<strong>rw-</strong></p></td> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
<div class="sect3"> |
|||
<h4 id="_exercises">1.2.4. Exercises</h4> |
|||
<div class="listingblock"> |
|||
<div class="content"> |
|||
<pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">touch example |
|||
chmod 400 example |
|||
ls -l example |
|||
chmod 500 example |
|||
ls -l example |
|||
chmod 600 example |
|||
ls -l example |
|||
chmod 644 example |
|||
ls -l example |
|||
chmod 660 example |
|||
ls -l example |
|||
chmod 700 example |
|||
ls -l example |
|||
chmod 755 example |
|||
ls -l example |
|||
chmod 775 example |
|||
ls -l example |
|||
ls -l example |
|||
chmod 777 example |
|||
ls -l example</code></pre> |
|||
</div> |
|||
</div> |
|||
<div class="paragraph"> |
|||
<p><br> |
|||
<br> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/highlight.min.js"></script> |
|||
<script> |
|||
if (!hljs.initHighlighting.called) { |
|||
hljs.initHighlighting.called = true |
|||
;[].slice.call(document.querySelectorAll('pre.highlight > code')).forEach(function (el) { hljs.highlightBlock(el) }) |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,349 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<meta name="generator" content="Asciidoctor 2.0.12"> |
|||
<meta name="description" content="Intro and Install"> |
|||
<meta name="keywords" content="Linux, apt"> |
|||
<meta name="author" content="Apostolos rootApostolos@swarmlab.io"> |
|||
<title>An Introduction to Linux !</title> |
|||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.9/css/asciidoctor.min.css"> |
|||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> |
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/github.min.css"> |
|||
</head> |
|||
<body class="article toc2 toc-right"> |
|||
<div id="header"> |
|||
<h1>An Introduction to Linux !</h1> |
|||
<div class="details"> |
|||
<span id="author" class="author">Apostolos rootApostolos@swarmlab.io</span><br> |
|||
</div> |
|||
<div id="toc" class="toc2"> |
|||
<div id="toctitle">Table of contents</div> |
|||
<ul class="sectlevel1"> |
|||
<li><a href="#_absolute_basics">1. Absolute basics</a> |
|||
<ul class="sectlevel2"> |
|||
<li><a href="#_key_combinations">1.1. Key combinations</a></li> |
|||
<li><a href="#_ls_l">1.2. ls -l</a> |
|||
<ul class="sectlevel3"> |
|||
<li><a href="#_file_types">1.2.1. File types</a></li> |
|||
<li><a href="#_access_rights">1.2.2. Access rights</a></li> |
|||
<li><a href="#_user_group_codes">1.2.3. User group codes</a></li> |
|||
<li><a href="#_exercises">1.2.4. Exercises</a></li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div id="content"> |
|||
<div class="sect1"> |
|||
<h2 id="_absolute_basics">1. Absolute basics</h2> |
|||
<div class="sectionbody"> |
|||
<table class="tableblock frame-all grid-all stretch"> |
|||
<caption class="title">Table 1. Absolute basics</caption> |
|||
<colgroup> |
|||
<col style="width: 50%;"> |
|||
<col style="width: 50%;"> |
|||
</colgroup> |
|||
<thead> |
|||
<tr> |
|||
<th class="tableblock halign-left valign-top">Command</th> |
|||
<th class="tableblock halign-left valign-top">Meaning</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">ls</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Displays a list of files in the current working directory.</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">cd directory</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">change directories</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">passwd</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">change the password for the current user</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">file filename</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">display file type of file with name filename</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">cat textfile</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">throws content of textfile on the screen</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">pwd</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">display present working directory</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">exit or logout</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">leave this session</p></td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">man command</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">read man pages on command</p></td> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
<div class="sect2"> |
|||
<h3 id="_key_combinations">1.1. Key combinations</h3> |
|||
<table class="tableblock frame-all grid-all stretch"> |
|||
<caption class="title">Table 2. Key combinations</caption> |
|||
<colgroup> |
|||
<col style="width: 50%;"> |
|||
<col style="width: 50%;"> |
|||
</colgroup> |
|||
<thead> |
|||
<tr> |
|||
<th class="tableblock halign-left valign-top">Key or key combination</th> |
|||
<th class="tableblock halign-left valign-top">Function</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Ctrl+C</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">End a running program and return the prompt</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Ctrl+Z</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Suspend a program</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">ArrowUp and ArrowDown</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Browse history. Go to the line that you want to repeat, edit details if necessary, and press Enter to save time.</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Tab</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Command or filename completion; when multiple choices are possible, the system will either signal with an audio or visual bell, or, if too many choices are possible, ask you if you want to see them all.</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Tab Tab</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Shows file or command completion possibilities.</p></td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Shift+PageUp and Shift+PageDown</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Browse terminal buffer (to see text that has "scrolled off" the screen).</p></td> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
<div class="sect2"> |
|||
<h3 id="_ls_l">1.2. ls -l</h3> |
|||
<div class="listingblock"> |
|||
<div class="content"> |
|||
<pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash"># ls -al |
|||
drwxrwxr-x 4 zeus zeus 4096 Οκτ 23 21:55 . |
|||
drwxrwxr-x 9 zeus zeus 4096 Οκτ 15 14:28 .. |
|||
drwxrwxr-x 8 zeus zeus 4096 Οκτ 23 21:55 .git |
|||
drwxrwxr-x 4 zeus zeus 4096 Οκτ 14 20:24 install |
|||
crw------- 1 root root 5, 1 Οκτ 23 21:22 console |
|||
lrwxrwxrwx 1 root root 11 Οκτ 23 21:21 core -> /proc/kcore |
|||
drwxr-xr-x 4 root root 100 Οκτ 23 21:22 cpu |
|||
crw------- 1 root root 10, 59 Οκτ 23 21:21 cpu_dma_latency |
|||
crw------- 1 root root 10, 203 Οκτ 23 21:21 cuse |
|||
-rw-rw-r-- 1 zeus zeus 1517 Οκτ 23 21:55 INSTALL.md |
|||
-rw-rw-r-- 1 zeus zeus 33883 Οκτ 15 14:28 LICENSE |
|||
-rw-rw-r-- 1 zeus zeus 691 Οκτ 17 11:13 README.md</code></pre> |
|||
</div> |
|||
</div> |
|||
<div class="sect3"> |
|||
<h4 id="_file_types">1.2.1. File types</h4> |
|||
<div class="paragraph"> |
|||
<p>This table gives an overview of the characters determining the file type:</p> |
|||
</div> |
|||
<div class="admonitionblock note"> |
|||
<table> |
|||
<tr> |
|||
<td class="icon"> |
|||
<i class="fa icon-note" title="Note"></i> |
|||
</td> |
|||
<td class="content"> |
|||
<strong>d</strong>rwxrwxr-x 4 zeus zeus 4096 Οκτ 14 20:24 install |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
<table class="tableblock frame-all grid-all stretch"> |
|||
<caption class="title">Table 3. File types in a long list</caption> |
|||
<colgroup> |
|||
<col style="width: 50%;"> |
|||
<col style="width: 50%;"> |
|||
</colgroup> |
|||
<thead> |
|||
<tr> |
|||
<th class="tableblock halign-left valign-top">Symbol</th> |
|||
<th class="tableblock halign-left valign-top">Meaning</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">-</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Regular file</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">d</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Directory</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">l</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Link</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">c</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Special file</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">s</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Socket</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">p</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Named pipe</p></td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">b</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">Block device</p></td> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
<div class="admonitionblock note"> |
|||
<table> |
|||
<tr> |
|||
<td class="icon"> |
|||
<i class="fa icon-note" title="Note"></i> |
|||
</td> |
|||
<td class="content"> |
|||
-<strong>rw-</strong>rw-r-- 1 zeus zeus 1517 Οκτ 23 21:55 INSTALL.md |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
<div class="sect3"> |
|||
<h4 id="_access_rights">1.2.2. Access rights</h4> |
|||
<table class="tableblock frame-all grid-all stretch"> |
|||
<caption class="title">Table 4. Access rights</caption> |
|||
<colgroup> |
|||
<col style="width: 50%;"> |
|||
<col style="width: 50%;"> |
|||
</colgroup> |
|||
<thead> |
|||
<tr> |
|||
<th class="tableblock halign-left valign-top">Code</th> |
|||
<th class="tableblock halign-left valign-top">Meaning</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">0 or -</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">The access right that is supposed to be on this place is not granted.</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">4 or</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">read access is granted to the user category defined in this place</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">2 or</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">write permission is granted to the user category defined in this place</p></td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">1 or</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">execute permission is granted to the user category defined in this place</p></td> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
<div class="sect3"> |
|||
<h4 id="_user_group_codes">1.2.3. User group codes</h4> |
|||
<table class="tableblock frame-all grid-all stretch"> |
|||
<caption class="title">Table 5. User group codes</caption> |
|||
<colgroup> |
|||
<col style="width: 33.3333%;"> |
|||
<col style="width: 33.3333%;"> |
|||
<col style="width: 33.3334%;"> |
|||
</colgroup> |
|||
<thead> |
|||
<tr> |
|||
<th class="tableblock halign-left valign-top">Code</th> |
|||
<th class="tableblock halign-left valign-top">Meaning</th> |
|||
<th class="tableblock halign-left valign-top"></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">u</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">user permissions</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">-<strong>rw-</strong>rw-r--</p></td> |
|||
</tr> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">g</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">group permissions</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">-rw-<strong>rw-</strong>r--</p></td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<tr> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">o</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">permissions for others</p></td> |
|||
<td class="tableblock halign-left valign-top"><p class="tableblock">-rw-rw-<strong>rw-</strong></p></td> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
<div class="sect3"> |
|||
<h4 id="_exercises">1.2.4. Exercises</h4> |
|||
<div class="listingblock"> |
|||
<div class="content"> |
|||
<pre class="highlightjs highlight"><code class="language-bash hljs" data-lang="bash">touch example |
|||
chmod 400 example |
|||
ls -l example |
|||
chmod 500 example |
|||
ls -l example |
|||
chmod 600 example |
|||
ls -l example |
|||
chmod 644 example |
|||
ls -l example |
|||
chmod 660 example |
|||
ls -l example |
|||
chmod 700 example |
|||
ls -l example |
|||
chmod 755 example |
|||
ls -l example |
|||
chmod 775 example |
|||
ls -l example |
|||
ls -l example |
|||
chmod 777 example |
|||
ls -l example</code></pre> |
|||
</div> |
|||
</div> |
|||
<div class="paragraph"> |
|||
<p><br> |
|||
<br> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/highlight.min.js"></script> |
|||
<script> |
|||
if (!hljs.initHighlighting.called) { |
|||
hljs.initHighlighting.called = true |
|||
;[].slice.call(document.querySelectorAll('pre.highlight > code')).forEach(function (el) { hljs.highlightBlock(el) }) |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<card class="card-user" style="max-height:100%"> |
|||
|
|||
<div class="row" > |
|||
<div class="col-8 order-first " > |
|||
<br> |
|||
<calendar-view> |
|||
|
|||
</calendar-view> |
|||
</div> |
|||
|
|||
<div class="col-4 order-last" > |
|||
<br> |
|||
|
|||
<calendar-view-events> |
|||
|
|||
</calendar-view-events> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</card> |
|||
</template> |
|||
<script> |
|||
import {mapState, mapGetters, mapActions} from 'vuex' |
|||
import card from '@/components/Card.vue' |
|||
import CalendarView from "./manageservices/calendarview.vue"; |
|||
//import CalendarView from "./manageservices/view-service.vue"; |
|||
import CalendarViewEvents from "./manageservices/view-events.vue"; |
|||
export default { |
|||
components: { |
|||
card, |
|||
CalendarView, |
|||
CalendarViewEvents |
|||
}, |
|||
data () { |
|||
return { |
|||
loading: false, |
|||
consoleView: 'off', |
|||
productIndex: 1 |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
beforeDestroy () { |
|||
}, |
|||
|
|||
|
|||
created () { |
|||
} |
|||
}; |
|||
</script> |
|||
<style> |
|||
</style> |
|||
|
|||
@ -0,0 +1,262 @@ |
|||
<template> |
|||
<div id="appcalendar" > |
|||
|
|||
<div class="calendar-parent"> |
|||
<calendar-view |
|||
:items="items" |
|||
:show-date="showDate" |
|||
:time-format-options="{ hour: 'numeric', minute: '2-digit' }" |
|||
:enable-drag-drop="false" |
|||
:disable-past="disablePast" |
|||
:disable-future="disableFuture" |
|||
:show-times="showTimes" |
|||
:display-period-uom="displayPeriodUom" |
|||
:display-period-count="displayPeriodCount" |
|||
:starting-day-of-week="startingDayOfWeek" |
|||
:class="themeClasses" |
|||
:period-changed-callback="periodChanged" |
|||
:current-period-label="useTodayIcons ? 'icons' : ''" |
|||
:displayWeekNumbers="displayWeekNumbers" |
|||
:enable-date-selection="true" |
|||
:selection-start="selectionStart" |
|||
:selection-end="selectionEnd" |
|||
:timeFormatOptions="timeFormatOptions" |
|||
@date-selection-start="setSelection" |
|||
@date-selection="setSelection" |
|||
@date-selection-finish="finishSelection" |
|||
@drop-on-date="onDrop" |
|||
@click-date="onClickDay" |
|||
@click-item="onClickItem" |
|||
> |
|||
<calendar-view-header |
|||
slot="header" |
|||
slot-scope="{ headerProps }" |
|||
:header-props="headerProps" |
|||
@input="setShowDate" |
|||
/> |
|||
</calendar-view> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import store from '@/store/index' |
|||
import {mapState, mapGetters, mapActions,dispatch} from 'vuex' |
|||
import Vue from 'vue' |
|||
import card from '@/components/Card.vue' |
|||
import {ApiConfig} from "@/config/index"; |
|||
// Load CSS from the local repo |
|||
require("vue-simple-calendar/static/css/default.css") |
|||
require("vue-simple-calendar/static/css/holidays-us.css") |
|||
|
|||
import { |
|||
CalendarView, |
|||
CalendarViewHeader, |
|||
CalendarMathMixin, |
|||
} from "vue-simple-calendar/src/components/bundle.js" // local repo |
|||
|
|||
export default { |
|||
components: { |
|||
card, |
|||
CalendarView, |
|||
CalendarViewHeader, |
|||
}, |
|||
mixins: [CalendarMathMixin], |
|||
data() { |
|||
return { |
|||
showDate: this.thisMonth(1), |
|||
message: "", |
|||
startingDayOfWeek: 1, |
|||
disablePast: false, |
|||
disableFuture: false, |
|||
displayPeriodUom: "month", |
|||
displayPeriodCount: 1, |
|||
displayWeekNumbers: true, |
|||
showTimes: false, |
|||
selectionStart: null, |
|||
selectionEnd: null, |
|||
newItemTitle: "", |
|||
newItemStartDate: "", |
|||
newItemEndDate: "", |
|||
useDefaultTheme: true, |
|||
useHolidayTheme: false, |
|||
useTodayIcons: true, |
|||
timeFormatOptions:{ |
|||
hour: 'numeric', minute: 'numeric', |
|||
hour12: false, |
|||
timeZone: 'Europe/Athens' |
|||
}, |
|||
begindate:'', |
|||
enddate:'', |
|||
items: [], |
|||
} |
|||
}, |
|||
computed: { |
|||
getevents4month() { |
|||
}, |
|||
userLocale() { |
|||
return this.getDefaultBrowserLocale |
|||
}, |
|||
dayNames() { |
|||
return this.getFormattedWeekdayNames(this.userLocale, "long", 0) |
|||
}, |
|||
themeClasses() { |
|||
return { |
|||
"theme-default": this.useDefaultTheme, |
|||
"holiday-us-traditional": this.useHolidayTheme, |
|||
"holiday-us-official": this.useHolidayTheme, |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.newItemStartDate = this.isoYearMonthDay(this.today()) |
|||
this.newItemEndDate = this.isoYearMonthDay(this.today()) |
|||
const t = new Date() |
|||
let bd_y = t.getFullYear() |
|||
let bd_m = (t.getMonth() + 1).toString().padStart(2, "0"); |
|||
let bd_d = '01'; |
|||
this.begindate = `${bd_y}-${bd_m}-${bd_d}` |
|||
this.enddate = `${bd_y}-${bd_m}-31` |
|||
this.getevents() |
|||
}, |
|||
|
|||
methods: { |
|||
async getevents() { |
|||
var value1 = {} |
|||
value1.begin = this.begindate |
|||
value1.end = this.enddate |
|||
var llo = await store.dispatch('pipelineLLO/getevents', value1) |
|||
this.items = llo.data.result; |
|||
console.log('events'+JSON.stringify(llo)) |
|||
}, |
|||
periodChanged(v) { |
|||
// range, eventSource) { |
|||
// Demo does nothing with this information, just including the method to demonstrate how |
|||
// you can listen for changes to the displayed range and react to them (by loading items, etc.) |
|||
console.log(v) |
|||
//console.log(v.periodStart) |
|||
//console.log(v.periodEnd) |
|||
|
|||
let t = v.periodStart |
|||
let bd_y = t.getFullYear() |
|||
let bd_m = (t.getMonth() + 1).toString().padStart(2, "0"); |
|||
let bd_d = t.getDate().toString().padStart(2, "0"); |
|||
this.begindate = `${bd_y}-${bd_m}-${bd_d}` |
|||
|
|||
let e = v.periodEnd |
|||
let ed_y = e.getFullYear() |
|||
let ed_m = (e.getMonth() + 1).toString().padStart(2, "0"); |
|||
let ed_d = e.getDate().toString().padStart(2, "0"); |
|||
this.enddate = `${ed_y}-${ed_m}-${ed_d}` |
|||
|
|||
this.getevents() |
|||
//console.log(this.begindate) |
|||
//console.log(this.enddate) |
|||
}, |
|||
thisMonth(d, h, m) { |
|||
const t = new Date() |
|||
return new Date(t.getFullYear(), t.getMonth(), d, h || 0, m || 0) |
|||
}, |
|||
onClickDay(d) { |
|||
this.selectionStart = null |
|||
this.selectionEnd = null |
|||
this.message = `You clicked: ${d.toLocaleDateString()}` |
|||
}, |
|||
onClickItem(e) { |
|||
this.message = `You clicked: ${e.title}` |
|||
console.log(e) |
|||
this.$root.$emit('hybrid_labobject_view',e) |
|||
}, |
|||
setShowDate(d) { |
|||
this.message = `Changing calendar view to ${d.toLocaleDateString()}` |
|||
this.showDate = d |
|||
}, |
|||
setSelection(dateRange) { |
|||
this.selectionEnd = dateRange[1] |
|||
this.selectionStart = dateRange[0] |
|||
}, |
|||
finishSelection(dateRange) { |
|||
this.setSelection(dateRange) |
|||
this.message = `You selected: ${this.selectionStart.toLocaleDateString()} -${this.selectionEnd.toLocaleDateString()}` |
|||
}, |
|||
onDrop(item, date) { |
|||
this.message = `You dropped ${item.id} on ${date.toLocaleDateString()}` |
|||
// Determine the delta between the old start date and the date chosen, |
|||
// and apply that delta to both the start and end date to move the item. |
|||
const eLength = this.dayDiff(item.startDate, date) |
|||
item.originalItem.startDate = this.addDays(item.startDate, eLength) |
|||
item.originalItem.endDate = this.addDays(item.endDate, eLength) |
|||
}, |
|||
clickTestAddItem() { |
|||
this.items.push({ |
|||
startDate: this.newItemStartDate, |
|||
endDate: this.newItemEndDate, |
|||
title: this.newItemTitle, |
|||
id: "e" + Math.random().toString(36).substr(2, 10), |
|||
}) |
|||
this.message = "You added a calendar item!" |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
html, |
|||
body { |
|||
height: 100%; |
|||
margin: 0; |
|||
background-color: #f7fcff; |
|||
} |
|||
|
|||
#appcalendar { |
|||
display: flex; |
|||
flex-direction: row; |
|||
font-family: Calibri, sans-serif; |
|||
//width: 95vw; |
|||
width: 100%; |
|||
min-width: 30rem; |
|||
max-width: 100rem; |
|||
min-height: 40rem; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
|
|||
.calendar-controls { |
|||
margin-right: 1rem; |
|||
min-width: 14rem; |
|||
max-width: 14rem; |
|||
} |
|||
|
|||
.calendar-parent { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-grow: 1; |
|||
overflow-x: hidden; |
|||
overflow-y: hidden; |
|||
max-height: 80vh; |
|||
background-color: white; |
|||
} |
|||
|
|||
/* For long calendars, ensure each week gets sufficient height. The body of the calendar will scroll if needed */ |
|||
.cv-wrapper.period-month.periodCount-2 .cv-week, |
|||
.cv-wrapper.period-month.periodCount-3 .cv-week, |
|||
.cv-wrapper.period-year .cv-week { |
|||
min-height: 6rem; |
|||
} |
|||
|
|||
/* These styles are optional, to illustrate the flexbility of styling the calendar purely with CSS. */ |
|||
|
|||
/* Add some styling for items tagged with the "birthday" class */ |
|||
.theme-default .cv-item.birthday { |
|||
background-color: #e0f0e0; |
|||
border-color: #d7e7d7; |
|||
} |
|||
|
|||
.theme-default .cv-item.birthday::before { |
|||
content: "\1F382"; /* Birthday cake */ |
|||
margin-right: 0.5em; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,410 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<div class="calendar-controls"> |
|||
<div v-if="message" class="notification is-success">{{ message }}</div> |
|||
|
|||
<div class="box"> |
|||
<h4 class="title is-5">Play with the options!</h4> |
|||
|
|||
<div class="field"> |
|||
<label class="label">Period UOM</label> |
|||
<div class="control"> |
|||
<div class="select"> |
|||
<select v-model="displayPeriodUom"> |
|||
<option>month</option> |
|||
<option>week</option> |
|||
<option>year</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="field"> |
|||
<label class="label">Period Count</label> |
|||
<div class="control"> |
|||
<div class="select"> |
|||
<select v-model="displayPeriodCount"> |
|||
<option :value="1">1</option> |
|||
<option :value="2">2</option> |
|||
<option :value="3">3</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="field"> |
|||
<label class="label">Starting day of the week</label> |
|||
<div class="control"> |
|||
<div class="select"> |
|||
<select v-model="startingDayOfWeek"> |
|||
<option v-for="(d, index) in dayNames" :key="index" :value="index"> |
|||
{{ d }} |
|||
</option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="field"> |
|||
<label class="checkbox"> |
|||
<input v-model="useTodayIcons" type="checkbox" /> |
|||
Use icon for today's period |
|||
</label> |
|||
</div> |
|||
|
|||
<div class="field"> |
|||
<label class="checkbox"> |
|||
<input v-model="displayWeekNumbers" type="checkbox" /> |
|||
Show week number |
|||
</label> |
|||
</div> |
|||
|
|||
<div class="field"> |
|||
<label class="checkbox"> |
|||
<input v-model="showTimes" type="checkbox" /> |
|||
Show times |
|||
</label> |
|||
</div> |
|||
|
|||
<div class="field"> |
|||
<label class="label">Themes</label> |
|||
<label class="checkbox"> |
|||
<input v-model="useDefaultTheme" type="checkbox" /> |
|||
Default |
|||
</label> |
|||
</div> |
|||
|
|||
<div class="field"> |
|||
<label class="checkbox"> |
|||
<input v-model="useHolidayTheme" type="checkbox" /> |
|||
Holidays |
|||
</label> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="box"> |
|||
<div class="field"> |
|||
<label class="label">Title</label> |
|||
<div class="control"> |
|||
<input v-model="newItemTitle" class="input" type="text" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="field"> |
|||
<label class="label">Start date</label> |
|||
<div class="control"> |
|||
<input v-model="newItemStartDate" class="input" type="date" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="field"> |
|||
<label class="label">End date</label> |
|||
<div class="control"> |
|||
<input v-model="newItemEndDate" class="input" type="date" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<button class="button is-info" @click="clickTestAddItem">Add Item</button> |
|||
</div> |
|||
</div> |
|||
<div class="calendar-parent"> |
|||
<calendar-view |
|||
:items="items" |
|||
:show-date="showDate" |
|||
:time-format-options="{ hour: 'numeric', minute: '2-digit' }" |
|||
:enable-drag-drop="true" |
|||
:disable-past="disablePast" |
|||
:disable-future="disableFuture" |
|||
:show-times="showTimes" |
|||
:date-classes="myDateClasses" |
|||
:display-period-uom="displayPeriodUom" |
|||
:display-period-count="displayPeriodCount" |
|||
:starting-day-of-week="startingDayOfWeek" |
|||
:class="themeClasses" |
|||
:period-changed-callback="periodChanged" |
|||
:current-period-label="useTodayIcons ? 'icons' : ''" |
|||
:displayWeekNumbers="displayWeekNumbers" |
|||
:enable-date-selection="true" |
|||
:selection-start="selectionStart" |
|||
:selection-end="selectionEnd" |
|||
@date-selection-start="setSelection" |
|||
@date-selection="setSelection" |
|||
@date-selection-finish="finishSelection" |
|||
@drop-on-date="onDrop" |
|||
@click-date="onClickDay" |
|||
@click-item="onClickItem" |
|||
> |
|||
<template #header="{ headerProps }"> |
|||
<calendar-view-header slot="header" :header-props="headerProps" @input="setShowDate" /> |
|||
</template> |
|||
</calendar-view> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
import { CalendarView, CalendarViewHeader, CalendarMath } from "vue-simple-calendar"; |
|||
import 'vue-simple-calendar/dist/style.css' |
|||
// The next two lines are optional themes |
|||
import "vue-simple-calendar/static/css/default.css" |
|||
import "vue-simple-calendar/static/css/holidays-us.css" |
|||
|
|||
|
|||
export default { |
|||
name: "App", |
|||
components: { |
|||
CalendarView, |
|||
CalendarViewHeader, |
|||
}, |
|||
data() { |
|||
return { |
|||
/* Show the current month, and give it some fake items to show */ |
|||
showDate: this.thisMonth(1), |
|||
message: "", |
|||
startingDayOfWeek: 0, |
|||
disablePast: false, |
|||
disableFuture: false, |
|||
displayPeriodUom: "month", |
|||
displayPeriodCount: 1, |
|||
displayWeekNumbers: false, |
|||
showTimes: true, |
|||
selectionStart: null, |
|||
selectionEnd: null, |
|||
newItemTitle: "", |
|||
newItemStartDate: "", |
|||
newItemEndDate: "", |
|||
useDefaultTheme: true, |
|||
useHolidayTheme: true, |
|||
useTodayIcons: false, |
|||
items: [ |
|||
{ |
|||
id: "e0", |
|||
startDate: "2018-01-05", |
|||
}, |
|||
{ |
|||
id: "e1", |
|||
startDate: this.thisMonth(15, 18, 30), |
|||
}, |
|||
{ |
|||
id: "e2", |
|||
startDate: this.thisMonth(15), |
|||
title: "Single-day item with a long title", |
|||
}, |
|||
{ |
|||
id: "e3", |
|||
startDate: this.thisMonth(7, 9, 25), |
|||
endDate: this.thisMonth(10, 16, 30), |
|||
title: "Multi-day item with a long title and times", |
|||
}, |
|||
{ |
|||
id: "e4", |
|||
startDate: this.thisMonth(20), |
|||
title: "My Birthday!", |
|||
classes: "birthday", |
|||
url: "https://en.wikipedia.org/wiki/Birthday", |
|||
}, |
|||
{ |
|||
id: "e5", |
|||
startDate: this.thisMonth(5), |
|||
endDate: this.thisMonth(12), |
|||
title: "Multi-day item", |
|||
classes: "purple", |
|||
}, |
|||
{ |
|||
id: "foo", |
|||
startDate: this.thisMonth(29), |
|||
title: "Same day 1", |
|||
}, |
|||
{ |
|||
id: "e6", |
|||
startDate: this.thisMonth(29), |
|||
title: "Same day 2", |
|||
classes: "orange", |
|||
}, |
|||
{ |
|||
id: "e7", |
|||
startDate: this.thisMonth(29), |
|||
title: "Same day 3", |
|||
}, |
|||
{ |
|||
id: "e8", |
|||
startDate: this.thisMonth(29), |
|||
title: "Same day 4", |
|||
classes: "orange", |
|||
}, |
|||
{ |
|||
id: "e9", |
|||
startDate: this.thisMonth(29), |
|||
title: "Same day 5", |
|||
}, |
|||
{ |
|||
id: "e10", |
|||
startDate: this.thisMonth(29), |
|||
title: "Same day 6", |
|||
classes: "orange", |
|||
}, |
|||
{ |
|||
id: "e11", |
|||
startDate: this.thisMonth(29), |
|||
title: "Same day 7", |
|||
}, |
|||
], |
|||
} |
|||
}, |
|||
computed: { |
|||
userLocale() { |
|||
return CalendarMath.getDefaultBrowserLocale |
|||
}, |
|||
dayNames() { |
|||
return CalendarMath.getFormattedWeekdayNames(this.userLocale, "long", 0) |
|||
}, |
|||
themeClasses() { |
|||
return { |
|||
"theme-default": this.useDefaultTheme, |
|||
"holiday-us-traditional": this.useHolidayTheme, |
|||
"holiday-us-official": this.useHolidayTheme, |
|||
} |
|||
}, |
|||
myDateClasses() { |
|||
// This was added to demonstrate the dateClasses prop. Note in particular that the |
|||
// keys of the object are `yyyy-mm-dd` ISO date strings (not dates), and the values |
|||
// for those keys are strings or string arrays. Keep in mind that your CSS to style these |
|||
// may need to be fairly specific to make it override your theme's styles. See the |
|||
// CSS at the bottom of this component to see how these are styled. |
|||
const o = {} |
|||
const theFirst = this.thisMonth(1) |
|||
const ides = [2, 4, 6, 9].includes(theFirst.getMonth()) ? 15 : 13 |
|||
const idesDate = this.thisMonth(ides) |
|||
o[CalendarMath.isoYearMonthDay(idesDate)] = "ides" |
|||
o[CalendarMath.isoYearMonthDay(this.thisMonth(21))] = ["do-you-remember", "the-21st"] |
|||
return o |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.newItemStartDate = CalendarMath.isoYearMonthDay(CalendarMath.today()) |
|||
this.newItemEndDate = CalendarMath.isoYearMonthDay(CalendarMath.today()) |
|||
}, |
|||
|
|||
methods: { |
|||
periodChanged() { |
|||
// range, eventSource) { |
|||
// Demo does nothing with this information, just including the method to demonstrate how |
|||
// you can listen for changes to the displayed range and react to them (by loading items, etc.) |
|||
//console.log(eventSource) |
|||
//console.log(range) |
|||
}, |
|||
thisMonth(d, h, m) { |
|||
const t = new Date() |
|||
return new Date(t.getFullYear(), t.getMonth(), d, h || 0, m || 0) |
|||
}, |
|||
onClickDay(d) { |
|||
this.selectionStart = null |
|||
this.selectionEnd = null |
|||
this.message = `You clicked: ${d.toLocaleDateString()}` |
|||
}, |
|||
onClickItem(e) { |
|||
this.message = `You clicked: ${e.title}` |
|||
}, |
|||
setShowDate(d) { |
|||
this.message = `Changing calendar view to ${d.toLocaleDateString()}` |
|||
this.showDate = d |
|||
}, |
|||
setSelection(dateRange) { |
|||
this.selectionEnd = dateRange[1] |
|||
this.selectionStart = dateRange[0] |
|||
}, |
|||
finishSelection(dateRange) { |
|||
this.setSelection(dateRange) |
|||
this.message = `You selected: ${this.selectionStart.toLocaleDateString()} -${this.selectionEnd.toLocaleDateString()}` |
|||
}, |
|||
onDrop(item, date) { |
|||
this.message = `You dropped ${item.id} on ${date.toLocaleDateString()}` |
|||
// Determine the delta between the old start date and the date chosen, |
|||
// and apply that delta to both the start and end date to move the item. |
|||
const eLength = CalendarMath.dayDiff(item.startDate, date) |
|||
item.originalItem.startDate = CalendarMath.addDays(item.startDate, eLength) |
|||
item.originalItem.endDate = CalendarMath.addDays(item.endDate, eLength) |
|||
}, |
|||
clickTestAddItem() { |
|||
this.items.push({ |
|||
startDate: this.newItemStartDate, |
|||
endDate: this.newItemEndDate, |
|||
title: this.newItemTitle, |
|||
id: "e" + Math.random().toString(36).substr(2, 10), |
|||
}) |
|||
this.message = "You added a calendar item!" |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
html, |
|||
body { |
|||
height: 100%; |
|||
margin: 0; |
|||
background-color: #f7fcff; |
|||
} |
|||
|
|||
#app { |
|||
display: flex; |
|||
flex-direction: row; |
|||
font-family: Calibri, sans-serif; |
|||
width: 95vw; |
|||
min-width: 30rem; |
|||
max-width: 100rem; |
|||
min-height: 40rem; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
.calendar-controls { |
|||
margin-right: 1rem; |
|||
min-width: 14rem; |
|||
max-width: 14rem; |
|||
} |
|||
|
|||
.calendar-parent { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-grow: 1; |
|||
overflow-x: hidden; |
|||
overflow-y: hidden; |
|||
max-height: 80vh; |
|||
background-color: white; |
|||
} |
|||
|
|||
/* For long calendars, ensure each week gets sufficient height. The body of the calendar will scroll if needed */ |
|||
.cv-wrapper.period-month.periodCount-2 .cv-week, |
|||
.cv-wrapper.period-month.periodCount-3 .cv-week, |
|||
.cv-wrapper.period-year .cv-week { |
|||
min-height: 6rem; |
|||
} |
|||
|
|||
/* These styles are optional, to illustrate the flexbility of styling the calendar purely with CSS. */ |
|||
|
|||
/* Add some styling for items tagged with the "birthday" class */ |
|||
.theme-default .cv-item.birthday { |
|||
background-color: #e0f0e0; |
|||
border-color: #d7e7d7; |
|||
} |
|||
|
|||
.theme-default .cv-item.birthday::before { |
|||
content: "\1F382"; /* Birthday cake */ |
|||
margin-right: 0.5em; |
|||
} |
|||
|
|||
/* The following classes style the classes computed in myDateClasses and passed to the component's dateClasses prop. */ |
|||
.theme-default .cv-day.ides { |
|||
background-color: #ffe0e0; |
|||
} |
|||
|
|||
.ides .cv-day-number::before { |
|||
content: "\271D"; |
|||
} |
|||
|
|||
.cv-day.do-you-remember.the-21st .cv-day-number::after { |
|||
content: "\1F30D\1F32C\1F525"; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,177 @@ |
|||
<template> |
|||
<card class="card-user" style="max-height:100%"> |
|||
<div class="author" |
|||
v-show="hybridshowlog==true" |
|||
> |
|||
<img class="avatar border-white" src="@/assets/img/library.png" alt="..."> |
|||
</div> |
|||
|
|||
|
|||
<v-wait for="myRunInstancetutor"> |
|||
<template slot="waiting"> |
|||
<div> |
|||
<img src="@/assets/loading.gif" /> |
|||
Enter Lab_room... |
|||
</div> |
|||
</template> |
|||
</v-wait> |
|||
|
|||
<b-container fluid> |
|||
<div class="row text-center" |
|||
v-show="hybridshowlog==true" |
|||
> |
|||
<div class="col-12"> |
|||
|
|||
<table class="table table-hover"> |
|||
<tbody> |
|||
<tr> |
|||
<th scope="row">Title</th> |
|||
<td colspan="2"> |
|||
{{ labtext.title }} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="row">Type</th> |
|||
<td> |
|||
{{ labtext.originalItem.type }} |
|||
</td> |
|||
<td> |
|||
{{ labtext.originalItem.lang }} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="row">Description</th> |
|||
<td colspan="2"> |
|||
{{ labtext.originalItem.desc }} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="row">More info</th> |
|||
<td colspan="2"> |
|||
{{ labtext.originalItem.url }} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="row">startDate</th> |
|||
<td colspan="2"> |
|||
{{ labtext.originalItem.startDate }} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="row">endDate</th> |
|||
<td colspan="2"> |
|||
{{ labtext.endDate }} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="row">url</th> |
|||
<td colspan="2"> |
|||
{{ labtext.originalItem.urltype }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</div> |
|||
</b-container> |
|||
</card> |
|||
</template> |
|||
<script> |
|||
import store from '@/store/index' |
|||
import {mapState, mapGetters, mapActions,dispatch} from 'vuex' |
|||
import Vue from 'vue' |
|||
import card from '@/components/Card.vue' |
|||
import {ApiConfig} from "@/config/index"; |
|||
export default { |
|||
components: { |
|||
card |
|||
}, |
|||
props: { |
|||
}, |
|||
data() { |
|||
return{ |
|||
hybridshowlog:false, |
|||
labtext:{}, |
|||
token: '' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$root.$on('hybrid_labobject_view', (v) => { |
|||
this.hybridshowlog=true |
|||
this.labtext = v |
|||
console.log('object ' +JSON.stringify(this.labtext)) |
|||
}) |
|||
}, |
|||
created() { |
|||
var url_string = window.location.href |
|||
var url = new URL(url_string); |
|||
this.token = url.searchParams.get("token"); |
|||
console.log("token "+ this.token); |
|||
|
|||
}, |
|||
beforeDestroy () { |
|||
this.$root.$off('hybrid_labobject_view') |
|||
}, |
|||
computed: { |
|||
httpOptions() { |
|||
var token = this.token |
|||
var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions" |
|||
return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions" |
|||
}, |
|||
|
|||
}, |
|||
methods: { |
|||
}, |
|||
actions: { |
|||
} |
|||
}; |
|||
</script> |
|||
<style> |
|||
.flex-fixed-width-item { |
|||
flex: 0 0 100px; |
|||
} |
|||
.modalinfo { |
|||
z-index: 10000000 !important; |
|||
position:fixed; |
|||
} |
|||
/* a container with flex-direction column */ |
|||
|
|||
.vue-notifyjs.notifications{ |
|||
.alert{ |
|||
z-index: 100; |
|||
} |
|||
.list-move { |
|||
transition: transform 0.3s, opacity 0.4s; |
|||
} |
|||
.list-item { |
|||
display: inline-block; |
|||
margin-right: 10px; |
|||
|
|||
} |
|||
.list-enter-active { |
|||
transition: transform 0.2s ease-in, opacity 0.4s ease-in; |
|||
} |
|||
.list-leave-active { |
|||
transition: transform 1s ease-out, opacity 0.4s ease-out; |
|||
} |
|||
|
|||
.list-enter { |
|||
opacity: 0; |
|||
transform: scale(1.1); |
|||
|
|||
} |
|||
.list-leave-to { |
|||
opacity: 0; |
|||
transform: scale(1.2, 0.7); |
|||
} |
|||
} |
|||
|
|||
pre { |
|||
//background-color: rgb(255, 247, 229); |
|||
background-color: #eff0f1; |
|||
border: 1px solid blue; |
|||
//white-space: pre-line; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue