Соберем веб-интерфейс:
;;;; <<copyright>>
;;;; iface.lisp
(in-package #:moto)
;; Компилируем шаблоны
(closure-template:compile-template
:common-lisp-backend (pathname (concatenate 'string *base-path* "templates.htm")))
;; Страницы
<<iface_contents>>Шаблоны будем вставлять в отдельный файл src/templates.htm
// <<copyright>>
// -*- mode: closure-template-html; fill-column: 240 -*-
{namespace tpl}
<<tpl_header>>
<<tpl_content>>
<<tpl_footer>>
{template louis}
<!DOCTYPE html>
<html data-share-domain="louis.de" lang="en">
<head>
<meta charset="utf-8" />
<title>{$title}</title>
<link href="/css/lucasa.css" media="all" rel="stylesheet" type="text/css" />
<link href="/css/lucas.css" media="all" rel="stylesheet" type="text/css" />
<link href="/css/luca.css" media="all" rel="stylesheet" type="text/css" />
<link href="/css/luc.css" media="all" rel="stylesheet" type="text/css" />
<link href="/css/sortable.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery-v-1.10.2.js"></script>
<script type="text/javascript" src="/js/jquery-ui-v-1.10.3.js"></script>
<script type="text/javascript" src="/js/modernizr.js"></script />
<script type="text/javascript" src="/js/jquery.sortable.original.js"></script>
<script type="text/javascript" src="/js/frp.js"></script>
</head>
<body id="louis-de" class="en" data-background-image="/img/bg-05.jpg">
<div style="height: 1077px; position: fixed; transform: translateY(0px);" id="js__bg" class="bg">
<img alt="Louis Background" src="/img/bg-05.jpg" />
</div>
{$header |noAutoescape}
<hr class="hidden" id="content" />
{$content |noAutoescape}
<hr class="hidden" />
{$footer |noAutoescape}
<script type="text/javascript" src="/js/scdc.js"></script>
<script type="text/javascript" src="/js/i18n.en_GB.utf8.js"></script>
<script type="text/javascript" src="/js/config.js"></script>
</body>
</html>
{/template}
{template header}
<header class="header">
<noscript>
<div class="useragent-warning">
<div class="container system-message media">
<span class="result-icon result-icon--caution media__item media__item--left"></span>
<div class="system-message__text-container media__content">
<div class="system-message__text text-container error">
<p>You have deactivated Javascript and possibly also the use of cookies. In order to make full use of the Louis Online Shop, please change your browser settings. Alternatively, we will be pleased to take your order by telephone. Our helpful staff are there to take your call personally around the clock on 0049 40 734 193 60.</p>
</div>
</div>
<span class="clear"></span>
</div>
</div>
</noscript>
<span id="isMerchant" data-is-merchant=""></span>
<div class="container branding" itemscope="" itemtype="http://schema.org/Organization">
<div class="logo">
<a class="logo__link" href="/">
<img src="/img/logo3.png" alt="logo" height="67" width="121" />
</a>
</div>
<div class="branding__slogan">Europe’s No.1 in the Motorcycle & Leisure world!</div>
<ul class="branding__facts">
<li class="branding-fact">Worldwide shipping</li>
<li class="branding-fact">
<span class="sprite branding-fact__phone"></span>
order hotline 0049 40 734 193 60
</li>
<li class="branding-fact">2 year return policy</li>
</ul>
<ul class="meta-nav">
<li class="meta-nav__item"><a href="#">Immediate contact</a></li>
<li class="meta-nav__item"><a href="#">Louis stores</a></li>
<li class="meta-nav__item"><a href="#">Jobs</a></li>
<li class="meta-nav__item language-select" tabindex="1">
<div class="helper">
<span class="language-select__title">
Select language:
</span>
<ul>
<li class="language-select__item ">
<a href="#" title="Deutsch">
<span class="flag flag--de"></span>
<span>Deutsch</span>
</a>
</li>
<li class="language-select__item active">
<a href="#" title="English">
<span class="flag flag--en"></span>
<span>English</span>
</a>
</li>
<li class="language-select__item ">
<a href="#" title="Français">
<span class="flag flag--fr"></span>
<span>Français</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="main-nav-container">
<div class="helper">
<div class="container">
<div class="header-search-container">
{$search |noAutoescape}
</div>
<div class="user-nav">
<div class="flyout-parent user-nav__item user-nav__item--my-bike" id="mybike-flyout-parent">
<div>
<a href="#" class="nav-button">
<span class="nav-button__text">My bike</span>
<span class="nav-button__icon sprite"></span>
</a>
</div>
<div class="user-nav__flyout flyout popup bikedb-select bikedb-select-flyout js__toggleContent">
<form id="mybike-flyout-list" class="flyout--change-bike js__toggleContent-item switch-content-container js__toggleContent-item hidden" method="get" action="/" novalidate="">
<fieldset>
<legend>Your selected bike:</legend>
<div id="mybike-flyout-bikes">
</div>
<div class="text-container bikedb-select-flyout__actions">
<p>In order to use the following function, you must first log into <a href="#mylouis-flyout-link" class="js__triggerEvent" data-trigger-event="click">My Louis</a>.</p>
<div class="system-message media">
<img class="media__item media__item--left" src="/img/info.png" alt="Info" height="45" width="45" />
<div class="system-message__text-container media__content">
<div class="system-message__text">
<p><strong>Saving and loading in "My Louis" replaces the respective list.</strong></p>
</div>
</div>
<span class="clear"></span>
</div>
<p class="attention" id="mybike-flyout-change-error"></p>
<p>» <a data-prevent="true" href="#" id="save-bikes-in-mylouis">Save bikes in "My Louis"</a>
</p>
<p>» <a data-prevent="true" href="#" id="load-bikes-from-mylouis">Load bikes from "My Louis"</a>
</p>
</div>
</fieldset>
</form>
<div id="mybike-flyout-form" class="flyout--choose-bike js__toggleContent-item">
<form action="/en/m/ajax/json/set-bike-from-overlay" method="post" novalidate="" class="js__formValidation js__handleViaAjax" id="js__requestData-header" data-select-from-list-url="/en/m/ajax/json/select-from-list" data-search-by-name-url="/en/m/ajax/json/search-by-name" name="bike-selection-overlay"><fieldset>
<legend>Please select your bike </legend>
<input name="bike" value="" type="hidden" />
<ul class="numbered-list">
<li class="choose-bike__step numbered-list__item">
<span class="nr">1</span>
<div class="input-container">
<select size="1" name="bike-selection-fieldset[manufacturer]" id="bikedb-flyout-manufacturer" class="form-element" data-next="biketype" data-type="data" required="required">
<option value="" selected="selected" label="- Manufacturer -">- Manufacturer -</option>
<option value="2" label="BMW">BMW</option>
<option value="6" label="HONDA">HONDA</option>
<option value="7" label="KAWASAKI">KAWASAKI</option>
<option value="13" label="SUZUKI">SUZUKI</option>
<option value="15" label="YAMAHA">YAMAHA</option>
<option value="-" disabled="disabled" label="----------------">----------------</option>
<option value="16" label="ADLY">ADLY</option>
<option value="97" label="ZONGSHEN">ZONGSHEN</option>
<option value="165" label="ZUENDAPP">ZUENDAPP</option>
</select>
</div>
<span class="clear"></span>
</li>
<li class="choose-bike__step numbered-list__item">
<span class="nr">2</span>
<div class="input-container">
<select size="1" name="bike-selection-fieldset[biketype]" id="bikedb-flyout-biketype" data-next="capacity" class="form-element" data-type="data" required="required">
<option value="" selected="selected" label="- Type of vehicle -">-Type of vehicle-</option>
</select>
</div>
<span class="clear"></span>
</li>
<li class="choose-bike__step numbered-list__item">
<span class="nr">3</span>
<div class="input-container">
<select size="1" name="bike-selection-fieldset[capacity]" id="bikedb-flyout-capacity" data-next="bikes" class="form-element" data-type="data" required="required">
<option value="" selected="selected" label="- Engine size in cc -">-Engine size in cc-</option>
</select>
</div>
<span class="clear">
</span>
</li>
<li class="choose-bike__step choose-bike__step--model numbered-list__item box"><span class="nr">4</span>
<div class="helper">
<p class="sortby-label">Sort by:</p>
<div class="option-container odd">
<input name="bike-selection-fieldset[sortby]" class="bike-selection-sortby" id="bikedb-flyout-sortby-capacity" value="capacity" checked="checked" type="radio" />
<label for="bikedb-flyout-sortby-capacity">Engine size </label>
</div>
<div class="option-container even">
<input name="bike-selection-fieldset[sortby]" class="bike-selection-sortby" id="bikedb-flyout-sortby-title" value="title" checked="checked" type="radio" />
<label for="bikedb-flyout-sortby-title">Model designation</label>
</div>
<span class="clear"></span>
<div class="input-container">
<select size="1" name="bike-selection-fieldset[bikes]" id="bikedb-select-flyout-result" class="form-element disabled" data-empty-option-title="- Ihr Modell -" disabled="disabled" required="required">
<option value="" selected="selected" label="- Your model -">- Your model -</option>
</select>
</div>
<p class="attention" id="mybike-flyout-select-error"></p>
<input class="button " name="save-bike" value="Save bike" type="submit" />
</div>
</li>
</ul>
</fieldset>
<div class="text-container flyout--choose-bike__additional bikedb-select-flyout__actions">
<p> In order to use the following function, you must first log into "My Louis". </p>
<p> »
<a data-prevent="true" href="#"> Save bikes in "My Louis"</a>
</p>
<p> »
<a data-prevent="true" href="#">Load bikes from "My Louis"</a>
</p>
</div>
</form>
</div>
<a class="action-icon action-icon--close" href="#">×</a>
<span class="hover"></span>
</div>
</div>
{$login |noAutoescape}
<ul class="shopping-nav user-nav__item">
<li id="header-memo" class="shopping-nav__item shopping-nav__item--memo ">
<a class="nav-button" href="/hh">
<span class="nav-button__text">Работа</span>
</a>
</li>
<li id="header-memo" class="shopping-nav__item shopping-nav__item--memo ">
<a class="nav-button" href="/trnd">
<span class="nav-button__text">Тренд</span>
</a>
</li>
</ul>
</div>
</div>
<nav class="main-nav">
<div class="container">
<ul>
<li class="main-nav__item main-nav__item--mainRubricBekleidungHelme flyout-parent">
<a href="#">
<span class="nav-button">
<span class="nav-button__text">Clothing & Helmets</span>
</span>
<span class="hover-arrow hover-arrow1"></span>
<span class="hover-arrow hover-arrow2"></span>
</a>
<div class="flyout nav-flyout popup">
<div class="nav-category">
<ul class="nav-category__list">
<li><a title="Accessories" href="#">Accessories</a></li>
<li><a title="Balaclavas/Neck Warmers" href="#">Balaclavas/Neck Warmers</a></li>
<li><a title="Bike Leathers" href="#">Bike Leathers</a></li>
<li><a title="Boots/Shoes/Socks" href="#">Boots/Shoes/Socks</a></li>
<li><a title="Children's Clothing" href="#">Children's Clothing</a></li>
<li><a title="Functional Underwear" href="#">Functional Underwear</a></li>
<li><a title="Gloves" href="#">Gloves</a></li>
<li><a title="Goggles/Sunglasses" href="#">Goggles/Sunglasses</a></li>
<li><a title="Helmets & Visors" href="#">Helmets & Visors</a></li>
<li><a title="Kidney Belts" href="#">Kidney Belts</a></li>
<li><a title="Leisure Wear" href="#">Leisure Wear</a></li>
<li><a title="Protectors" href="#">Protectors</a></li>
<li><a title="Rainwear" href="#">Rainwear</a></li>
<li><a title="Textile Clothing" href="#">Textile Clothing</a></li>
<li><a title="T-Shirts" href="#">T-Shirts</a></li>
</ul>
<span class="clear"></span>
<a class="button link secondary" href="#">
To helmet buyer's guide <span class="button-icon"></span>
</a>
</div>
</div>
</li>
<li class="main-nav__item main-nav__item--mainRubricTechnikFreizeit flyout-parent">
<a href="#">
<span class="nav-button">
<span class="nav-button__text">Equipment & Leisure</span>
</span>
<span class="hover-arrow hover-arrow1"></span>
<span class="hover-arrow hover-arrow2"></span>
</a>
<div class="flyout nav-flyout popup">
<div class="nav-category">
<div class="nav-category__title"><a title="Service Parts" href="#">Service Parts</a></div>
<ul class="nav-category__list">
<li><a title="Batteries" href="#">Batteries</a></li>
<li><a title="Brakes" href="#">Brakes</a></li>
<li><a title="Carburettors" href="#">Carburettors</a></li>
<li><a title="Chain Kits & Propulsion" href="#">Chain Kits & Propulsion</a></li>
<li><a title="Chassis" href="#">Chassis</a></li>
<li><a title="Clutches" href="#">Clutches</a></li>
<li><a title="Engine & Transmission" href="#">Engine & Transmission</a></li>
<li><a title="Filters" href="#">Filters</a></li>
<li><a title="Gaskets & Seals" href="#">Gaskets & Seals</a></li>
<li><a title="Seats/-Covers/-Cushions" href="#">Seats/-Covers/-Cushions</a></li>
<li><a title="Spark Plugs & Accessories" href="#">Spark Plugs & Accessories</a></li>
</ul>
</div>
<div class="nav-category">
<div class="nav-category__title"><a title="Maintenance & Care" href="#">Maintenance & Care</a></div>
<ul class="nav-category__list">
<li><a title="Brake Fluid" href="#">Brake Fluid</a></li>
<li><a title="Chain Care" href="#">Chain Care</a></li>
<li><a title="Chargers & Accessories" href="#">Chargers & Accessories</a></li>
<li><a title="Cleaners & Care Products" href="#">Cleaners & Care Products</a></li>
<li><a title="Clothing & Helmet Care" href="#">Clothing & Helmet Care</a></li>
<li><a title="Engine Additives" href="#">Engine Additives</a></li>
<li><a title="Metal Repair & Adhesives" href="#">Metal Repair & Adhesives</a></li>
<li><a title="Oils" href="#">Oils</a></li>
<li><a title="Other Lubricants" href="#">Other Lubricants</a></li>
<li><a title="Paddock Stands & Accs." href="#">Paddock Stands & Accs.</a></li>
<li><a title="Paints" href="#">Paints</a></li>
<li><a title="Repair Instructions" href="#">Repair Instructions</a></li>
<li><a title="Sealants" href="#">Sealants</a></li>
<li><a title="Tools" href="#">Tools</a></li>
</ul>
</div>
<div class="nav-category">
<div class="nav-category__title"><a title="Add-On Parts" href="#">Add-On Parts</a></div>
<ul class="nav-category__list">
<li><a title="Alum. & Chrome" href="#">Alum. & Chrome</a></li>
<li><a title="Centre & Side Stands" href="#">Centre & Side Stands</a></li>
<li><a title="Chassis & Foot Rests" href="#">Chassis & Foot Rests</a></li>
<li><a title="Enduro Accessories" href="#">Enduro Accessories</a></li>
<li><a title="Exhaust Systems" href="#">Exhaust Systems</a></li>
<li><a title="Handlebars/Grips/Levers" href="#">Handlebars/Grips/Levers</a></li>
<li><a title="Instruments & Accessories" href="#">Instruments & Accessories</a></li>
<li><a title="Lighting & Electrics" href="#">Lighting & Electrics</a></li>
<li><a title="Mirrors" href="#">Mirrors</a></li>
<li><a title="Tank & Engine Crashbars" href="#">Tank & Engine Crashbars</a></li>
<li><a title="Windshields & Fairings" href="#">Windshields & Fairings</a></li>
</ul>
</div>
<div class="nav-category">
<div class="nav-category__title"><a title="Accessories & Luggage" href="#">Accessories & Luggage</a></div>
<ul class="nav-category__list">
<li><a title="Anti-Theft Protection" href="#">Anti-Theft Protection</a></li>
<li><a title="Cases & Racks" href="#">Cases & Racks</a></li>
<li><a title="Child Seats" href="#">Child Seats</a></li>
<li><a title="Leather Chopper Luggage" href="#">Leather Chopper Luggage</a></li>
<li><a title="Luggage Accessories" href="#">Luggage Accessories</a></li>
<li><a title="Motorbike Covers" href="#">Motorbike Covers</a></li>
<li><a title="Rucksacks & Handbags" href="#">Rucksacks & Handbags</a></li>
<li><a title="Saddlebags/Textile Bags" href="#">Saddlebags/Textile Bags</a></li>
<li><a title="Safety & First Aid" href="#">Safety & First Aid</a></li>
<li><a title="Tailbags & Roll Bags" href="#">Tailbags & Roll Bags</a></li>
<li><a title="Tank Bags & Map Pockets" href="#">Tank Bags & Map Pockets</a></li>
<li><a title="Tank & Sidestand Pads" href="#">Tank & Sidestand Pads</a></li>
</ul>
</div>
<div class="nav-category">
<div class="nav-category__title"><a title="Multimedia & Travel" href="#">Multimedia & Travel</a></div>
<ul class="nav-category__list">
<li><a title="Cameras & Accessories" href="#">Cameras & Accessories</a></li>
<li><a title="Communication" href="#">Communication</a></li>
<li><a title="Maps & Guide Books" href="#">Maps & Guide Books</a></li>
<li><a title="Navigation" href="#">Navigation</a></li>
<li><a title="Outdoor & Camping" href="#">Outdoor & Camping</a></li>
</ul>
</div>
<div class="nav-category">
<div class="nav-category__title"><a title="Gift Ideas" href="#">Gift Ideas</a></div>
<ul class="nav-category__list">
<li><a title="Books" href="#">Books</a></li>
<li><a title="Calendars" href="#">Calendars</a></li>
<li><a title="Clocks/Watches/Jewellery" href="#">Clocks/Watches/Jewellery</a></li>
<li><a title="Coat/Helmet Racks" href="#">Coat/Helmet Racks</a></li>
<li><a title="DVD & Blu-Ray" href="#">DVD & Blu-Ray</a></li>
<li><a title="Gift Articles" href="#">Gift Articles</a></li>
<li><a title="Key Rings" href="#">Key Rings</a></li>
<li><a title="Metal Signs" href="#">Metal Signs</a></li>
<li><a title="Models" href="#">Models</a></li>
<li><a title="Stickers/Badges/Flags" href="#">Stickers/Badges/Flags</a></li>
<li><a title="Toys" href="#">Toys</a></li>
</ul>
</div>
</div>
</li>
<li class="main-nav__item main-nav__item--sale">
<a href="#">
<span class="nav-button"><span class="nav-button__text">Sale</span></span>
<span class="hover-arrow hover-arrow1"></span>
<span class="hover-arrow hover-arrow2"></span>
</a>
</li>
<li class="main-nav__item main-nav__item--themenWelten flyout-parent">
<a href="#">
<span class="nav-button"><span class="nav-button__text">Special Collections</span></span>
<span class="hover-arrow hover-arrow1"></span>
<span class="hover-arrow hover-arrow2"></span>
</a>
<div style="left: 172px;" class="flyout nav-flyout popup">
<div class="nav-category"><ul class="nav-category__list"><li>
<a href="#">
<img src="/img/meine-werkstatt.jpg" alt="My Workshop" />
<span>My Workshop</span>
</a>
</li>
<li>
<a href="#">
<img src="/img/motomania.jpg" alt="Motomania" />
<span>Motomania</span>
</a>
</li>
<li>
<a href="#">
<img src="/img/vanucci.jpg" alt="Vanucci" />
<span>Vanucci</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="main-nav__item main-nav__item--service flyout-parent">
<a href="#">
<span class="nav-button">
<span class="nav-button__text">Service</span>
</span>
<span class="hover-arrow hover-arrow1"></span>
<span class="hover-arrow hover-arrow2"></span>
</a>
<div class="flyout nav-flyout popup">
<div class="nav-category">
<div class="nav-category__title"><a title="All about bikes" href="#">All about bikes</a></div>
<ul class="nav-category__list">
<li><a title="Bike database" href="#">Bike database</a></li>
<li><a title="Bike Specials" href="#">Bike Specials</a></li>
<li><a title="Tips for DIY mechanics" href="#">Tips for DIY mechanics</a></li>
<li><a title="Workshop manual" href="#">Workshop manual</a></li>
<li><a title="Tips for buying a used vehicle" href="#">Tips for buying a used vehicle</a></li>
<li><a title="How to tell an import" href="#">How to tell an import</a></li>
</ul>
<div class="nav-category__title"><a title="For the journey" href="#">For the journey</a></div>
<ul class="nav-category__list">
<li><a title="Touring tips" href="#">Touring tips</a></li>
<li><a title="Country tips" href="#">Country tips</a></li>
</ul>
</div>
<div class="nav-category">
<div class="nav-category__title"><a title="Guide to purchasing & shipping" href="#">Guide to purchasing & shipping</a></div>
<ul class="nav-category__list">
<li><a title="Shopping at Louis" href="#">Shopping at Louis</a></li>
<li><a title="Shipping costs" href="#">Shipping costs</a></li>
<li><a title="Payment options" href="#">Payment options</a></li>
<li><a title="Flexible payment plan" href="#">Flexible payment plan</a></li>
<li><a title="Free returns" href="#">Free returns</a></li>
<li><a title="Guide for complaints" href="#">Guide for complaints</a></li>
<li><a title="VAT refund" href="#">VAT refund</a></li>
<li><a title="Foreign Customers" href="#">Foreign Customers</a></li>
<li><a title="T&Cs" href="#">T&Cs</a></li>
</ul>
</div>
<div class="nav-category">
<div class="nav-category__title"><a title="All about shopping" href="#">All about shopping</a></div>
<ul class="nav-category__list">
<li><a title="Gift vouchers" href="#">Gift vouchers</a></li>
<li><a title="Competition" href="#">Competition</a></li>
<li><a title="LouisFunCard" href="#">LouisFunCard</a></li>
<li><a title="LouisMasterCard" href="#">LouisMasterCard</a></li>
<li><a title="Catalogue" href="#">Catalogue</a></li>
<li><a title="Material lexicon" href="#">Material lexicon</a></li>
<li><a title="Newsletter" href="#">Newsletter</a></li>
</ul>
</div>
<div class="nav-category">
<div class="nav-category__title"><a title="Louis" href="#">Louis</a></div>
<ul class="nav-category__list">
<li><a title="Legal notice" href="#">Legal notice</a></li>
<li><a title="Contact" href="#">Contact</a></li>
<li><a title="Technical query" href="#">Technical query</a></li>
<li><a title="Presenting Louis" href="#">Presenting Louis</a></li>
<li><a title="Awards" href="#">Awards</a></li>
<li><a title="Jobs" href="#">Jobs</a></li>
<li><a title="Training at Louis" href="#">Training at Louis</a></li>
</ul>
</div>
<div class="nav-category">
<div class="nav-category__title"><a title="Downloads" href="#">Downloads</a></div>
<ul class="nav-category__list">
<li><a title="Wallpapers" href="#">Wallpapers</a></li>
<li><a title="Colouring books for young bikers" href="#">Colouring books for young bikers</a></li>
</ul>
</div>
</div>
</li>
</ul>
<div id="header-cart">
<a class="header-cart " href="#">
<span class="header-cart__cart-icon sprite"></span>
<span class="header-cart__link-icon sprite"></span>
<div class="header-cart__inner">
<div class="header-cart__title">Basket</div>
<p class="header-cart__qty-articles">0 Articles</p>
</div>
</a>
</div>
</div>
</nav>
</div>
</div>
</header>
{/template}
{template footer}
<footer class="footer footer--full-content">
<div class="container">
<form novalidate="" action="#" method="post">
<button class="button button--footer-toggle js__footerToggle" type="submit">
<span class="button__text">
Show less
</span>
<span class="button__icon"></span>
</button>
</form>
<p class="price-note footer__price-note">
{$dbg |noAutoescape}
</p>
<span class="clear"></span>
<div class="footer-toggle">
<div class="odd">
<div class="content-box size-1-4">
<div class="media footer-box footer-box--height-small footer-box--shopping-at-louis">
<span class="media__item media__item--left footer-box__icon"></span>
<div class="media__content">
<h4>Shopping at Louis</h4>
<p>Be it online, by telephone or in one of more than 70 stores. There are so many ways to buy our products. <a href="#">More...</a>
</p>
</div>
</div>
</div>
<div class="content-box size-1-4">
<div class="media footer-box footer-box--height-small footer-box--shipment-costs">
<span class="media__item media__item--left footer-box__icon"></span>
<div class="media__content">
<h4>Shipping costs</h4>
<p>Orders within Germany or from other countries, 24-hour service. <a href="#">More...</a>
</p>
</div>
</div>
</div>
<span class="clear"></span>
<div class="content-box size-1-4">
<div class="media footer-box footer-box--height-small footer-box--payment">
<span class="media__item media__item--left footer-box__icon"></span>
<div class="media__content">
<h4>Payment</h4>
<p>Payment options for Germany and abroad. <a href="#">More...</a>
</p>
</div>
</div>
</div>
<div class="content-box size-1-4">
<div class="media footer-box footer-box--height-small footer-box--return">
<span class="media__item media__item--left footer-box__icon"></span>
<div class="media__content">
<h4>Right of return</h4>
<p>Right of return extended to 2 years subject to the following conditions. <a href="#">More...</a>
</p>
</div>
</div>
</div>
<span class="clear"></span>
<div class="content-box size-1-4">
<div class="media footer-box footer-box--height-small footer-box--reshipment">
<span class="media__item media__item--left footer-box__icon"></span>
<div class="media__content">
<h4>Free returns</h4>
<p>Money-back guarantee – no-risk shopping. <a href="#">More...</a>
</p>
</div>
</div>
</div>
<div class="content-box size-1-4">
<div class="media footer-box footer-box--height-small footer-box--return-info">
<span class="media__item media__item--left footer-box__icon"></span>
<div class="media__content">
<h4>Returns advice</h4>
<p>If you receive a wrong or faulty item, here's what to do. <a href="#">More...</a>
</p>
</div>
</div>
</div>
<span class="clear"></span>
<div class="content-box size-1-4">
<div class="media footer-box footer-box--height-small footer-box--newsletter text-container">
<span class="media__item media__item--left footer-box__icon"></span>
<div class="media__content">
<h4>Newsletter – subscribe now</h4>
<p><a href="#">Register</a> here free of charge.</p>
</div>
</div>
</div>
<div class="content-box size-1-4">
<div class="media footer-box">
<div class="media__content">
<p>More than 200,000 fans follow Louis on:</p>
<div style="width: 100%; margin-top: 5px; text-align: center;">
<div class="footer-box--facebook footer-social-link first">
<a class="footer-box__icon" target="_blank" href="#"></a>
</div>
<div class="footer-box--youtube footer-social-link">
<a class="footer-box__icon" target="_blank" href="#"></a>
</div>
<div class="footer-box--googleplus footer-social-link">
<a class="footer-box__icon" target="_blank" href="#"></a>
</div>
</div>
</div>
</div>
</div>
<span class="clear"></span>
</div>
<div class="even">
<div class="content-box size-1-4">
<div class="footer-box footer-box--height-large footer-box--storefinder">
<h4>Store finder</h4>
<img class="lazy-load" src="/img/transparency.gif" data-lazy-src="https://cdn1.louis.de/content/application/footer/images/storefinder.png" alt="Store finder" height="140" width="220" />
<p>You can buy motorcycle clothing and accessories off the shelf in more than 70 stores in Germany and Austria. <a href="#">More...</a>
</p>
<form action="/en/service/filialen/suche/3" method="post" novalidate="" name="storeSearch" id="searchStoreFooter">
<div class="input-bg hide-label">
<label for="footer-storefinder-q">Enter postcode or town</label><input name="search_string" id="footer-storefinder-q" class="form-element input-text" value="" type="text" /> </div>
<button name="search_submit" type="submit" class="button button--form" value="Shop finden">Shop finden<span class="button__icon"></span></button>
</form> </div>
</div>
<div class="content-box size-1-4">
<div class="media footer-box footer-box--height-large footer-box--order-phone">
<span class="media__item media__item--left footer-box__icon"></span>
<div class="media__content">
<h4>
24h order hotline<span>0049 40 734 193 60</span> </h4>
<img class="lazy-load" src="/img/transparency.gif" data-lazy-src="https://cdn1.louis.de/content/application/footer/images/order-phone.png" alt="Louis Ordering Service Team" height="140" width="220" />
</div>
</div>
</div>
<span class="clear"></span>
<div class="odd">
<div class="content-box size-1-4">
<div class="footer-box footer-box--height-small">
<h4>Tested Online Shop</h4>
<p class="center">
<a target="_blank" href="#">
<img class="lazy-load" src="/img/transparency.gif" data-lazy-src="https://cdn1.louis.de/content/application/footer/images/ehi.png" alt="EHI" height="52" width="165" />
</a>
</p>
</div>
</div>
<div class="content-box size-1-4">
<div class="footer-box footer-box--height-small">
<h4>Excellence awards</h4>
<p class="center">
<a href="#">
<img class="lazy-load" src="/img/transparency.gif" data-lazy-src="https://cdn1.louis.de/content/application/footer/language/en_GB/images/BB_2014.gif" alt="Best Brand 2014" height="49" width="126" />
</a>
</p>
</div>
</div>
</div>
<div class="content-box size-1-4">
<div class="footer-box center">
<a target="_blank" href="#">
<img class="lazy-load" src="/img/transparency.gif" data-lazy-src="/en/m/redirect?url=https://www.trustedshops.com/bewertung/widget/widgets/X7A8300DB1729CB894766736632C77ECC.gif" alt="Customer rating" height="191" width="140" />
</a>
</div>
</div>
</div>
<span class="clear"></span>
<div class="content-box size-1-2">
<div class="media footer-box footer-box--request footer-box--contact text-container">
<span class="media__item media__item--left footer-box__icon"></span>
<div class="media__content">
<h4>Quick contact</h4>
<p>Do you have a general question or a query about your order? Do you wish to critique the site or simply have your say?<br />Please contact us.</p>
<a class="button button--link" href="#">
Go to Contact page <span class="button__icon"></span>
</a>
</div>
</div>
</div>
<div class="content-box size-1-2">
<div class="media footer-box footer-box--request footer-box--technical-questions text-container">
<span class="media__item media__item--left footer-box__icon"></span>
<div class="media__content">
<h4>Technical questions</h4>
<p>If you are having trouble getting spare parts for a Pannonia P20, or if you have a technical question, the Louis Technical Centre has no end of experience, reference books and contacts.</p>
<a class="button button--link" href="#">
Go to Technical query <span class="button__icon"></span>
</a>
</div>
</div>
</div>
<span class="clear"></span>
<div class="content-box">
<h4>If you want to make an order, then choose louis.de</h4>
<div class="footer-box footer-box--text text-container">
<p><strong>Helmets, motorbike clothing, leisurewear, luggage systems, camping and travel accessories, tuning and add-on parts, wearing and spare parts, care and maintenance: more than 30,000 articles to do with motorcycling in one shop – Louis.de!</strong>
</p><p><strong>Helmets for everybody:</strong> full-face helmets, flip-up helmets, motocross helmets, police and jet helmets – you will find helmets for every purpose to suit every budget at Louis. Our helmet brands include Shoei, Schuberth, x-lite, Nolan, roof, Shark, Scorpion and Nexx. You have 18 brand names to choose from, plus a huge range of designs and colours. And, of course, Louis carries visors, goggles, helmet accessories and intercom systems as well.
</p><p><strong>Motorbike clothing to kit you out from head to toe:</strong> Louis has jackets and trousers, gloves, boots, base layers and everything else bikers could possibly need. For example, protector upgrades, neck warmers, kidney belts and, of course, rainsuits. It makes no difference whether your style is casual or sporty, or you prefer leather or textile. You will find a large selection of women's attire at Louis, too. Louis also stocks a full clothing range for children. We have all the big brands – Vanucci, rukka, Held, Büse, Probiker, Cycle Spirit, Highway 1 and many more besides.
</p><p><strong>Leisurewear for bikers:</strong> T-shirts, polo shirts, sweatshirts, hoodies, fleece and softshell jackets, army jackets, cargo trousers – fashionable styles, good quality and very affordable prices. Of course, Louis also has sneakers, boots and other leisure footwear.
</p><p><strong>Luggage systems, camping and travel accessories for on tour:</strong> Any motorbike can be turned into a pack horse. Louis offers not only classic case systems and top boxes from respected manufacturers such as Hepco & Becker, SW-Motech, Givi and moto-detail, but also luggage systems for superbikes and enduro bikes. For example, tank bags for attachment with straps, magnets or click mechanism. Plus waterproof saddlebags, tail bags and roll bags in all shapes and sizes. Cruiser and chopper riders in particular will love the large range of leather saddlebags. To help you find the best way to get to your destination, Louis also has sat navs from Tomtom and Garmin. For those who love the freedom of camping, Louis also stocks an extensive range of camping accessories from camping mats to tents, flashlights to camping crockery.
</p><p><strong>Tuning and add-on parts for more than 3,000 motorbikes:</strong> Want to improve the look, function or character of your motorbike? Louis offers a huge selection of (LED) turn signals, mirrors, license plate holders, tank pads, exhaust systems... the list goes on and on. Looking for better ergonomics? Try alternative handlebars, levers and footrests. Louis also carries practical accessories such as heated grips, headlights and the legendary Scottoiler. Of course, we also stock all the big names like Kellermann, LSL, Bos, Lazer, Puig, magazi, MRA, gilles, Abus.
</p><p><strong>Wearing and spare parts, care and maintenance:</strong> Whatever it takes to maintain the value and function of your motorbike or scooter, Louis has it. Consumables like fork and engine oil, brake fluid and chain spray from renowned brands like Castrol and S100; care products for your bike as well as for leather and textile clothing. Then there's wearing parts like Champion air and oil filters, batteries from DELO and Exide, spark plugs from NGK, D.I.D. chainsets, brake pads and brake discs from TRW Lucas, and much much more. And to make light work of repair and maintenance, Louis stocks everything from paddock stands to chargers, torque wrenches to tyre repair sets for on the road. In fact, you'll find more than enough tools from Proxxon and Rothewald to kit out a professional workshop.
</p><p><strong>Not only that:</strong> Because we understand your passion for the lifestyle, Louis also carries a wide range of gift items and jewellery as well as books and maps.</p><p><a href="#">Louis in Austria - www.louis.at</a> | <a href="#">Louis in the UK - www.louis-moto.co.uk</a> | <a href="#">Louis in France - www.louis-moto.fr</a> | <a href="#">Louis in Ireland - www.louis.ie</a> | <a href="#">Louis in Europe - www.louis.eu</a></p><p><a href="#" rel="nofollow" target="_blank">louis在中国的淘宝店铺：http://louis-de.taobao.com</a></p><p><strong>You will find interesting offers in the categories:</strong></p><p><a href="#">Motorcycle clothing</a>, <a href="#">Motorcycle jackets</a>, <a href="#">Motorcycle trousers</a>, <a href="#">Leather suits</a>, <a href="#">Motorcycle helmets</a>, <a href="#">Motorcycle accessories</a>, <a href="#">Motorcycle spares</a>, <a href="#">Motorcycle</a>, <a href="#">Outdoor</a></p> </div>
</div>
</div>
<div class="js__setSameHeight">
<div class="content-box size-1-2">
<div style="min-height: 209px;" class="footer-box footer-box--links js__setSameHeight-item">
<div class="footer-box--links__list">
<h4>How things work at Louis</h4>
<ul>
<li><a href="#">Shipping costs</a></li>
<li><a href="#">Payment options</a></li>
<li><a href="#">Payment by instalments</a></li>
<li><a href="#">Complaints & Returns</a></li>
<li><a href="#">VAT refund</a></li>
<li><a href="#">Customers outside Germany</a></li>
</ul>
</div>
<div class="footer-box--links__list">
<h4>Help & Advice</h4>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Technical query</a></li>
<li><a href="#">Tips for DIY mechanics</a></li>
<li><a href="#">Bike database</a></li>
<li><a href="#">Touring tips</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Material lexicon</a></li>
<li><a href="#">My Louis</a></li>
</ul>
</div>
<div class="footer-box--links__list last">
<h4>News & Info</h4>
<ul>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Gift vouchers</a></li>
<li><a href="#">LouisFunCard</a></li>
<li><a href="#">LouisMasterCard</a></li>
<li><a href="#">Competition</a></li>
</ul>
</div>
</div>
</div>
<div class="content-box size-1-2">
<div style="min-height: 209px;" class="footer-box footer-box--links js__setSameHeight-item">
<div class="footer-box--links__list">
<h4>About Louis</h4>
<ul>
<li><a href="#">Jobs</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Presenting Louis</a></li>
<li><a href="#">Stores</a></li>
</ul>
</div>
<div class="footer-box--links__list last">
<h4>Legal</h4>
<ul>
<li><a href="#">Legal notice</a></li>
<li><a href="#">T&Cs</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Right of cancellation</a></li>
<li><a href="#">Cancellation form</a></li>
</ul>
</div>
</div>
</div>
<span class="clear"></span>
</div>
<p class="copy">Copyright © 2014 Louis -<br />Europe's No.1 in the Motorcycle & Leisure world.</p>
<a class="button go-to-top" href="#top">To the top</a>
</div>
</footer>
{/template}
Часто на странице нужно отобразить список каких-нибудь сущностей системы - например, пользователей или групп. Хочется, чтобы такого рода отображения с одной стороны выполнялись по одному шаблону, а с другой - были специфицированы типом отображаемого обьекта.
Чтобы обеспечить эти противоречивые требования введем метод show который принимает разные типы параметров. Если ему передан список - он отображает блок со списком элементов и рекурсивно вызывает сам себя для отображения каждого элемента - таким образом обеспечивается унификация.
Есть также один частный случай - пустой список. Тут нужно отобразить, что элементов нет.
(in-package #:moto)
(defmethod show ((param (eql nil)) &rest actions &key &allow-other-keys)
(ps-html
((:div :class "article-list-container article-list-container--list")
((:ul :class "article-list article-list--list")
((:p) "Нет элементов для отображения")))))Часто при отображении списка сущностей нужно также отображать возможные действия с ними - удаление, например. В этом случае методу отображения коллекции можно передать в параметрах plist этих действий, выраженных как функции одной переменной, которой является элемент коллекции. Эти функции будут вызваны при отображении элемента.
(in-package #:moto)
(defmethod show ((param list) &rest actions &key &allow-other-keys)
(setf (car param)
(apply #'show (list* (car param) actions)))
(ps-html
((:div :class "article-list-container article-list-container--list")
((:ul :class "article-list article-list--list")
(reduce #'(lambda (acc elt)
(concatenate 'string
acc
(apply #'show (list* elt actions))))
param)))))Если мы применяем определения кнопок в макросе define-page, то мы
можем удобным образом определить кнопки для всей коллекции вот так:
(labels ((perm-check (current-user)
(member "Пропускать везде" (mapcar #'(lambda (x) (name (get-group (group-id x)))) (find-user2group :user-id current-user)) :test #'equal)))
(define-page page-symbol "/page-url"
(let* ((breadcrumb (breadcrumb "page-name" ("/" . "Главная")))
(user (if (null *current-user*) "Анонимный пользователь" (name (get-user *current-user*)))))
(standard-page (:breadcrumb breadcrumb :user user :menu (menu) :overlay (reg-overlay))
(content-box ()
(form ("formname" "form-title" :class "form-section-container")
(show (all-entity)
:del #'(lambda (group) %DEL%))))
(ps-html ((:span :class "clear"))))))
(:del (if (perm-check *current-user*) ;; button view with check permissions
(submit "Удалить" :name "data" :value (id group))
"")
;; button controller with check permissions
(if (perm-check *current-user*)
(progn (del-group (getf p :data))
(redirect "/groups"))
"")))(in-package #:moto)
(define-page main "/"
(let ((breadcrumb (breadcrumb "Последние измениния"))
(user (if (null *current-user*) "Анонимный пользователь" (name (get-user *current-user*)))))
(standard-page (:breadcrumb breadcrumb :user user :menu (menu) :overlay (reg-overlay))
(content-box ()
(heading ("Что происходит?") "Последние события:"))
(content-box ()
(show (sort (all-event) #'(lambda (a b) (> (id a) (id b))))))
(ps-html ((:span :class "clear"))))))
(defmethod show ((param event) &rest actions &key &allow-other-keys)
(let ((time-record
(multiple-value-bind (second minute hour date month year day daylight-p zone)
(decode-universal-time (ts-create param))
(format nil "~2,'0d:~2,'0d:~2,'0d ~2,'0d.~2,'0d.~2,'0d"
hour minute second date month year))))
(ps-html
((:li :class "article-item article-item--list" :style "height: inherit;;")
((:div :class "inner")
((:div :class "article-item__info" :style "width: 540px; height: inherit; float: inherit;")
((:div :class "article-item__main-info")
;; ((:a :class "article-item__title-link" :href (format nil "/group/~A" (id param)))
;; ((:h3 :class "article-item__title") (name param))
;; ((:h4 :class "article-item__subtitle")))
((:p :class "article-item__description") (msg param)))
time-record
;; (if (null actions)
;; ""
;; (format nil "~{~A~}"
;; (loop :for action-key :in actions :by #'cddr :collect
;; (funcall (getf actions action-key) param))))
((:span :class "clear"))))))))Пишу описание кода который внизу
(in-package #:moto)
;; Событие создания задачи
(defun create-task (name blockdata)
"Создание задачи. Возвращает id"
(let ((new (make-task :name name
:blockdata blockdata
:owner-id *current-user*
:exec-id *current-user* ;; идентификатор исполнителя
:ts-create (get-universal-time))))
(if (null new)
(err 'err-create-task)
;; else
(progn
(make-event :name "create-task"
:tag "create"
:msg (aif *current-user*
(format nil "Пользователь #~A : ~A cоздал задачу #~A : ~A"
*current-user*
(name (get-user *current-user*))
(id new)
(name new)))
:author-id *current-user*
:ts-create (get-universal-time))
;; Возвращаем user-id
(id new))
)))
(defmethod show ((param task) &rest actions &key &allow-other-keys)
(ps-html
((:li :class "article-item article-item--list")
((:div :class "inner")
;; ((:a :class "article-item__image" :href (format nil "/user/~A" (id param))) avatar)
((:div :class "article-item__info" :style "width: 540px;")
;; ((:img :class "article-item__manufacturer" :src birka))
((:div :class "article-item__main-info")
((:a :class "article-item__title-link" :href (format nil "/user/~A" (id param)))
((:h3 :class "article-item__title") (name param)))
((:p :class "article-item__description")
(blockdata param)))
;; (if (null actions)
;; ""
;; (format nil "~{~A~}"
;; (loop :for action-key :in actions :by #'cddr :collect
;; (funcall (getf actions action-key) param))))
((:span :class "clear")))))))
(labels ((perm-check (current-user)
(is-in-group "Постановщик задач" current-user)))
(define-page all-tasks "/tasks"
(let ((breadcrumb (breadcrumb "Список задач"))
(user (if (null *current-user*) "Анонимный пользователь" (name (get-user *current-user*)))))
(standard-page (:breadcrumb breadcrumb :user user :menu (menu) :overlay (reg-overlay))
(content-box ()
(heading ("Список задач")
"Задачи - это обьекты, созданные пользователями для роботов (или для других пользователей), "
"которые из исполняют и предоставляют результат. "
"Задачи можно создавать, удалять, запускать на выполнение немедленно, "
"запускать на выполнение по расписанию и приостанавливать."))
(if (not (perm-check *current-user*))
""
(content-box ()
(form ("maketaskform" "Создать задачу" :class "form-section-container")
((:div :class "form-section")
(fieldset ""
(input ("name" "Имя" :required t :type "text"))
(textarea ("blockdata" "Суть задачи"))
))
%NEW%)))
(content-box ()
(let ((tmp (show (sort (all-task) #'(lambda (a b) (< (id a) (id b))))
:del #'(lambda (user) %DEL%))))
(ps-html ((:form :method "POST") ((:input :type "hidden" :name "act" :value "DEL")) tmp))))
(ps-html ((:span :class "clear")))))
(:DEL (if (perm-check *current-user*)
(ps-html ((:form :method "POST")
((:input :type "hidden" :name "act" :value "DEL"))
(submit "Удалить" :name "data" :value (id task))))
"")
(if (perm-check *current-user*)
(progn
(remove-task (parse-integer (getf p :data)))
(redirect "/tasks"))
""))
(:new (if (not (perm-check *current-user*))
""
(ps-html
((:input :type "hidden" :name "act" :value "NEW"))
((:div :class "form-send-container")
(submit "Создать задачу" ))))
(if (not (perm-check *current-user*))
""
(let ((new-id (create-task
(getf p :name)
(getf p :blockdata))))
;; (upd-task (get-task new-id)
;; (list
;; :role-id (parse-integer (getf p :role))
;; :ts-create (get-universal-time)
;; :ts-last (get-universal-time)))
(redirect "/tasks"))))))
(in-package #:moto)
;; (restas:define-route frp ("/frp")
;; "<script type=\"text/javascript\" src=\"/js/frp.js\"></script>")
(define-page frp "/frp"
(let ((breadcrumb (breadcrumb "FRP"))
(user (if (null *current-user*) "Анонимный пользователь" (name (get-user *current-user*)))))
(standard-page (:breadcrumb breadcrumb :user user :menu (menu) :overlay (reg-overlay))
(content-box ()
(heading ("FRP")
"Тестируем FRP")
(ps-html ((:div :id "frp")))
(ps-html ((:span :class "clear")))))
))