anchor.diff:  					return url;
   				}
   			}
  -		});
  -		
  -		var recipesViewModel = new Vue({
  -			el: '#list',
  -			data: { 
  -				recipes: {} 
  -			},
  -			beforeUpdate: function() {
  -				$( this.$el ).hide();
  -			},
  -			updated: function() {
  -				$( this.$el ).fadeIn( "slow" );
  -			},
  -			methods: {
  -				selectRecipe: function( recipe ) {
  -					var url = "";
  -					$.each(recipe.links, function(idx, link) {
  -						if (link.rel == "self") {
  -							url = link.href;
  -						}
  -					});
  -					cookbook.load( url ).then( function( json ) {
  -						recipeViewModel.recipe = json;
  -					})
  -				}
  -			}
  -		});
  -
  -		var pagingViewModel = new Vue({
  -			el: '#paging',
  -			data: {
  -				pageSize: 10,
  -				pageNo: 0	
  -			},
  -			methods: {
  -				nextPage: function() {
  -					this.pageNo++;
  -					url = cookbook.getRecipesUrl(this.pageNo, this.pageSize);
  -					cookbook.load( url ).then( function( json ) {
  -						recipesViewModel.recipes = json.content;
  -					})
  -				},
  -				prevPage: function() {
  -					if (this.pageNo > 0) {
  -						this.pageNo--;
  -						url = cookbook.getRecipesUrl(this.pageNo, this.pageSize);
  -						cookbook.load(url).then( function( json ) {
  -							recipesViewModel.recipes = json.content;
  -						})
  -					}
  -				},
  -				init: function() {
  -					url = cookbook.getRecipesUrl(this.pageNo, this.pageSize);
  -					cookbook.load( url ).then( function( json ) {
  -						recipesViewModel.recipes = json.content;
  -						$( "#recipes" ).fadeIn( "slow" );
  -					})
  -				}
  -			}
  -		});
  -		
  -
  -		$(function() {
  -			pagingViewModel.init();
  -		});
  +		};
  +		
  +	</script>
  +
  +	<header class="w3-container w3-theme-l3 w3-margin-bottom">
  +  		<h1>Kochbuch chez René</h1>
  +	</header> 
  +	
  +	<div id="app" class="w3-row">
  +		<div class="w3-third w3-container w3-margin-top">
  +			<div class="w3-container w3-theme">
  +				<h3>Liste aller Rezepte <span id="loading"><i class="fa fa-refresh"></i></span></h3>
  +			</div>
  +			<recipe-list inline-template>
  +				<div id="recipes">
  +					<ul class="w3-ul w3-hoverable w3-large" id="list">
  +						<li v-for="recipe in recipes" style="cursor:pointer;" v-on:click="selectRecipe(recipe)">{{ recipe.title }}</li>
  +					</ul>
  +					<paging-comp inline-template>
  +						<div class="w3-bar w3-center" id="paging">
  +							<button v-bind:disabled="pageNo == 0" v-on:click="prevPage" class="w3-button w3-xxlarge" title="previous">&laquo;</button>
  +							<button v-on:click="nextPage" class="w3-button w3-xxlarge" title="next">&raquo;</button>
  +						</div>
  +					</paging-comp>
  +				</div>
  +			</recipe-list>
  +		</div>
  +		<div class="w3-twothird w3-container">
  +			<!-- ************************** einzelnes Rezept anzeigen ********************* -->
  +			<recipe inline-template>
  +				<div id="recipe">
  +					<p v-if="!recipe.uuid">Wähle ein Rezept aus der Liste aus ...</p>
  +					<div v-else>
  +					    <h1>{{ recipe.title }}</h1>
  +					    <p v-html="recipe.preamble"></p>
  +					    <h3>Zutaten für <span id="noofperson">{{ recipe.noOfPerson }}</span> Personen</h3>
  +					    <div>
  +					    	<ingredients inline-template>
  +								<table class="w3-table w3-bordered" style="max-width: 50%">
  +									<tr v-for="ingredient in ingredients">
  +										<td>{{ ingredient.portion }}</td>
  +										<td>{{ ingredient.description }}&nbsp;{{ ingredient.comment ? "(" + ingredient.comment + ")" : "" }}</td>
  +									</tr>
  +								</table>
  +							</ingredients>
  +				    	</div>
  +				    	<p>&nbsp;</p>
  +					    <h3>Zubereitung</h3>
  +					    <p v-html="recipe.preparation"></p>
  +					    <p>&nbsp;</p>
  +					    <p>Rating <span class="w3-badge w3-theme-l3" id="rating">{{ recipe.rating }}</span></p>
  +					    <p class="w3-tiny">
  +					    	Erfasst: <span id="adding">{{ formatDate(recipe.addingDate) }}</span><br>
  +					    	Aktualisiert: <span id="update">{{ formatDate(recipe.editingDate) }}</span><br>
  +					    </p>
  +						<p class="w3-tiny">Stichworte:&nbsp;<span v-for="tag in recipe.tags"><span class='w3-tag w3-theme-l3'>{{ tag }}</span>&nbsp;</span></p>
  +					</div>
  +			    </div>
  +		    </recipe>
  +		</div>
  +	</div>
  +	<p>&nbsp;</p>
  +	<footer class="w3-container w3-center w3-theme-d5" style="display: none;">
  +		<p>© 1996-2018 René Anderes | www.anderes.org | design and implemented by René Anderes | Powered by w3.css, jQuery &amp; vue.js</p>
  +	</footer> 
  +
  +	<script>
  +		new Vue({
  +			el: '#app',
  +			components: {
  +				'recipe-list' : recipesComponent,
  +				'recipe' : recipeComponent	
  +			},
  +		});
  +		
   		$(document).ajaxStart( function() {
   			$( "#loading" ).show();
   			$( "footer" ).hide();
  
positive.code: 			},
  			updated: function() {
  				$( this.$el ).fadeIn( "slow" );
  			},
  			methods: {
  				formatDate: function( number ) {
  
negative.code: 				}
  			}
  		});
  		
  		var pagingComponent = {
  			data: function() {
  				return {
  					pageSize: 10,
  					pageNo: 0
  				}	
  			},
  			created: function() { 
  				this.processLoad();
  			},
  			methods: {
  				nextPage: function() {
  					this.pageNo++;
  					this.processLoad();
  				},
  				prevPage: function() {
  					if (this.pageNo > 0) {
  						this.pageNo--;
  						this.processLoad();
  					};
  				},
  				processLoad: function() {
  					url = cookbook.getRecipesUrl(this.pageNo, this.pageSize);
  					cookbook.load( url ).then( function( json ) {
  						EventBus.$eventbus.$emit( 'recipes-update', json.content );
  					});
  				}, 
  			}
  		};
  		
  		var recipesComponent = {
  			data: function() {
  				return { 
  					recipes: {} 
  				}
  			},
  			components: {
  				'paging-comp' : pagingComponent	
  			},
  			beforeUpdate: function() {
  				$( this.$el ).hide();
  			},
  			updated: function() {
  				$( this.$el ).fadeIn( "slow" );
  			},
  			created: function() { 
  				this.$eventbus.$on( 'recipes-update', function( json ) {
  					this.recipes = json; 
  				}.bind(this));
  			},
  			methods: {
  				selectRecipe: function( recipe ) {
  					var url = "";
  					$.each(recipe.links, function(idx, link) {
  						if (link.rel == "self") {
  							url = link.href;
  						}
  					});
  					cookbook.load( url ).then( function( json ) {
  						EventBus.$eventbus.$emit( 'recipe-update', json );
  					})
  				}
  			}
  		};
  		
  		var ingredientsComponent = {
  			data: function() {
  				return {
  					ingredients: [ ]
  