1

Тема: Экспорт расписания AirTime

Всем привет. Небольшой мануал на русском "как экспортировать расписание AirTime на сайт".

Нам понадобится:
- Сервер с AirTime 2.2
- Прямые руки
- Хостинг для сайта

Первым делом закачаем в папку airtime в корне домена сайта(куда будем выводить) четыре файла:
1. Последнюю min-версию jquery http://code.jquery.com/ (на данный момент http://code.jquery.com/jquery-1.8.0.min.js )
2. файл jquery-ui-1.8.10.custom.min.js из папки /usr/share/doc/airtime/examples/widgets на сервере с airtime(или отсюда  http://mitloshuk.name/manuals/jquery-ui … tom.min.js )
3. Файл jquery.showinfo.js из папки /usr/share/doc/airtime/examples/widgets/js на сервере с airtime(или отсюда http://mitloshuk.name/manuals/jquery.showinfo.js )
4. Файл стилей(можно использовать свой) airtime-widgets.css из папки /usr/share/doc/airtime/examples/widgets/css на сервере с airtime(или отсюда http://mitloshuk.name/manuals/airtime-widgets.css )

В итоге путь до наших файлов должен быть следующим:
http://domain.ru/airtime/*

Теперь самое интересное. AirTime предлагает вывести нам несколько видов расписания:
a) Текущую и следующую программу
б) Расписание на текущий день, за исключением уже прошедших и текущего шоу
в) Вывод расписания на неделю

За вывод отвечают два api-файла AirTime:
На сегодня: http://radio.domain.ru/api/live-info/?callback
На неделю: http://radio.domain.ru/api/week-info/?callback

Создадим в корне домена файл index.html и подключим к нему *.js и *.css из папки airtime

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/airtime/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/airtime/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script src="/airtime/jquery.showinfo.js" type="text/javascript"></script>
<link href="/airtime/airtime-widgets.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Теперь нам нужно вывести расписание. Для этого добавляем перед </head> код:

<script>
$(document).ready(function() {
    $("#headerLiveHolder").airtimeLiveInfo({
        sourceDomain: "http://localhost", // Домен сервера с AirTime
        text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"},
        updatePeriod: 20 // Период обновления в секундах
    });
    $("#onAirToday").airtimeShowSchedule({
        sourceDomain: "http://localhost", // Домен сервера с AirTime
        text: {onAirToday:"On air today"},
        updatePeriod: 5, // Период обновления в секундах
        showLimit: 10 // Лимит Шоу
    });
    $("#scheduleTabs").airtimeWeekSchedule({
        sourceDomain:"http://localhost", // Домен сервера с AirTime
        dowText:{monday:"Monday", tuesday:"Tuesday", wednesday:"Wednesday", thursday:"Thursday", friday:"Friday", saturday:"Saturday", sunday:"Sunday"},
        miscText:{time:"Time", programName:"Program Name", details:"Details", readMore:"Read More"},
        updatePeriod: 600 // Период обновления в секундах
    });
    var d = new Date().getDay();
    $('#scheduleTabs').tabs({selected: d === 0 ? 6 : d-1, fx: { opacity: 'toggle' }});

});
</script>

И перед </body>

<h1>"Текущая программа и следующая"</h1>
Что играет сейчас и будет далее:
<br/>
<br/>
<div id="headerLiveHolder" style="border: 1px solid #999999; padding: 10px;"></div>
<br/>
<br/>
<h1>"Расписание на сегодня"</h1>
Показываем, что будет играть сегодня:
<br/>
<br/>
<div id="onAirToday"></div>
<br/>
<br/>
<h1>"Расписание на неделю"</h1>
Виджет показывает расписание на всю неделю:
<br/>
<br/>
<div id="scheduleTabs"></div>

Сохраняем все в кодировке UTF-8 без BOM. Заполняем расписание в Airtime и открываем страницу сайта.
Результат:
http://mitloshuk.name/manuals/atschexport.PNG

А вот рабочий вариант с измененным дизайном:
http://mitloshuk.name/manuals/atschexportready.PNG

Домашнее задание:
Изменить стандартный вид вывода любого типа расписания


Спасибо за внимание. Special for RadioTalk.ru by Artem M.

Отредактировано Leff27 (01-11-2012 14:12:47)