library/include/mobilisis/calculator_functions.h

@@ -12,37 +12,9 @@
 #include <QDateTime>
 using namespace std;
 
-class Calculator {
+class Calculator
-    QDateTime m_start;
+{
-    mutable uint16_t m_timeStepCompensation = 0;
 public:
-    explicit Calculator() = default;
-    explicit Calculator(QDateTime const start) : m_start(start) {
-        m_start.setTime(QTime(start.time().hour(), start.time().minute(), 0));
-        qCritical() << "init m_start time:" << m_start.toString(Qt::ISODate);
-    }
-
-    void setStartDateTime(QDateTime const &start) {
-        m_start = start;
-        m_start.setTime(QTime(start.time().hour(), start.time().minute(), 0));
-        qCritical() << "set m_start time:" << m_start.toString(Qt::ISODate);
-    }
-
-    QDateTime const &getStartDateTime() const {
-        return m_start;
-    }
-
-    QDateTime &getStartDateTime() {
-        return m_start;
-    }
-
-    void setTimeStepCompensation(uint16_t timeStepCompensation) {
-        m_timeStepCompensation = timeStepCompensation;
-    }
-
-    uint16_t getTimeStepCompensation() const {
-        return m_timeStepCompensation;
-    }
 
 	/// <summary>
 	/// Gets duration in seconds from cost
@@ -88,7 +60,6 @@ public:
                 cfg->SpecialDaysWorktime.size() == 0);
     }
 
-// testing public:
 private:
     // Introduced for PaymentMethod::Steps (e.g. Schoenau)
     // For tariff of following structure: only steps, no special days, nonstop.

library/include/mobilisis/configuration.h

@@ -22,8 +22,6 @@
 #include "payment_rate.h"
 #include "atb_project.h"
 #include "tariff_daily_ticket.h"
-#include "time_range_header.h"
-#include "tariff_timestep_config.h"
 
 #include <QVector>
 
@@ -47,8 +45,6 @@ public:
 	multimap<int, ATBWeekDaysWorktime> WeekDaysWorktime;
 	multimap<int, ATBPaymentOption> PaymentOption;
     multimap<int, ATBDailyTicket> DailyTicket;
-    multimap<int, ATBTimeRange> TimeRange;
-    multimap<int, ATBTimeStepConfig> TimeStepConfig;
 
 	/// <summary>
 	/// Parse JSON string

library/include/mobilisis/duration.h

@@ -1,3 +1,4 @@
+#pragma once
 #include <string>
 
 class ATBDuration
@@ -6,6 +7,4 @@ public:
 	int pun_id;
 	std::string pun_label;
 	int pun_duration;
-    int pun_duration_min;
-    int pun_duration_max;
 };

library/include/mobilisis/member_type.h

@@ -17,8 +17,7 @@ enum MemberType
     DailyTicketType = 0x0A,
     CustomerType = 0x0B,
     TimeBaseType = 0x0C,
-    TimeRangeType = 0x0D,
+    TimeRangeType = 0x0D
-    TimeStepConfigType = 0x0E
 };
 
 #endif // MEMBER_TYPE_H_INCLUDED

library/include/mobilisis/payment_opt.h

@@ -16,8 +16,6 @@ public:
     double pop_max_time;
     double pop_min_price;
     int pop_carry_over;
-    int pop_carry_over_time_range_id;
     int pop_daily_card_price;
     int pop_business_hours;
-    int pop_time_step_config;
 };

library/include/mobilisis/tariff_timebase.h

@@ -9,7 +9,6 @@ struct ATBTimeBase {
     enum class TimeBaseType {ABSOLUTE=0, RELATIVE=1};
 
     ATBTimeBase() = default;
-    int tbase_id;
     TimeBaseType tbase_type;
     QString tbase_label;
 
@@ -19,7 +18,6 @@ struct ATBTimeBase {
         switch(timeBase.tbase_type) {
         case ATBTimeBase::TimeBaseType::ABSOLUTE:
             debug.nospace()
-                << "   tbase_id: " << timeBase.tbase_id << "\n"
                 << " tbase_type: " << "TimeBaseType::ABSOLUTE" << "\n"
                 << "tbase_label: " << timeBase.tbase_label << "\n";
             break;

library/include/mobilisis/tariff_timestep_config.h

@@ -1,26 +0,0 @@
-#ifndef TARIFF_TIMESTEP_CONFIG_H_INCLUDED
-#define TARIFF_TIMESTEP_CONFIG_H_INCLUDED
-
-#include <QString>
-#include <QDebug>
-#include <QDebugStateSaver>
-
-struct ATBTimeStepConfig {
-    enum class TimeStepConfig {STATIC=1, DYNAMIC=2};
-
-    ATBTimeStepConfig() = default;
-    int tsconfig_id;
-    QString tsconfig_label;
-
-    friend QDebug operator<<(QDebug debug, ATBTimeStepConfig const &tsConfig) {
-        QDebugStateSaver saver(debug);
-
-        debug.nospace()
-            << "   tsconfig_id: " << tsConfig.tsconfig_id << "\n"
-            << "tsconfig_label: " << tsConfig.tsconfig_label << "\n";
-
-        return debug;
-    }
-};
-
-#endif // TARIFF_TIMESTEP_CONFIG_H_INCLUDED

library/library.pro

@@ -8,9 +8,6 @@ INCLUDEPATH += $$_PRO_FILE_PWD_/include
 INCLUDEPATH += $$_PRO_FILE_PWD_/include/mobilisis
 INCLUDEPATH += $$_PRO_FILE_PWD_/include/rapidjson
 
-#start version with project neuhauser/galtuer
-VERSION=1.0.0
-
 CONFIG(debug, debug|release) {
     win32 {
         QMAKE_CXXFLAGS += -DCALCULATE_LIBRARY_EXPORTS
@@ -75,8 +72,7 @@ HEADERS += \
     include/mobilisis/tariff_business_hours.h \
     include/mobilisis/tariff_daily_ticket.h \
     include/mobilisis/tariff_customer.h \
-    include/mobilisis/tariff_timebase.h \
+    include/mobilisis/tariff_timebase.h
-    include/mobilisis/tariff_timestep_config.h
 
 OTHER_FILES += src/main.cpp \
     ../tariffs/tariff_korneuburg.json \

library/src/calculator_functions.cpp

@@ -699,70 +699,13 @@ QList<int> Calculator::GetTimeSteps(Configuration *cfg) const {
     QList<int> timeSteps;
 
     int const pop_id = cfg->getPaymentOptions().pop_id;
-    int const pop_carry_over = cfg->getPaymentOptions().pop_carry_over;
-    int const pop_time_step_config = cfg->getPaymentOptions().pop_time_step_config;
 
-    if (pop_time_step_config == (int)ATBTimeStepConfig::TimeStepConfig::DYNAMIC) {
-        if (pop_carry_over) {
-            int const pop_carry_over_time_range_id = cfg->getPaymentOptions().pop_carry_over_time_range_id;
-            QTime const carryOverTimeRangeFrom = cfg->TimeRange.find(pop_carry_over_time_range_id)->second.time_range_from;
-            QTime const carryOverTimeRangeTo = cfg->TimeRange.find(pop_carry_over_time_range_id)->second.time_range_to;
-
-            if (carryOverTimeRangeFrom.secsTo(carryOverTimeRangeTo) <= 60) { // carry over time point, usually 00:00:00
-                if (carryOverTimeRangeFrom == QTime(0, 0, 0)) {
-                    for (auto[itr, rangeEnd] = cfg->PaymentRate.equal_range(pop_id); itr != rangeEnd; ++itr) {
-                        int const durationId = itr->second.pra_payment_unit_id;
-                        auto search = cfg->Duration.find(durationId);
-                        if (search != cfg->Duration.end()) {
-                            ATBDuration duration = search->second;
-                            if (durationId == 1) {
-                                //duration.pun_duration_min = search->second.pun_duration_min;
-                                //duration.pun_duration_max = search->second.pun_duration_max;
-
-                                QDateTime carryOver = m_start;
-                                carryOver = carryOver.addDays(1);
-                                carryOver.setTime(QTime(0, 0, 0));
-
-                                int const timeStep = std::ceil(m_start.secsTo(carryOver) / 60.0);
-                                if (timeStep < duration.pun_duration_min || timeStep > duration.pun_duration_max) {
-                                    qCritical()
-                                        << QString("ERROR timeStep (%1) < durationMin (%2) || timeStep (%3)) > durationMax (%4)")
-                                            .arg(timeStep).arg(duration.pun_duration_min)
-                                            .arg(timeStep).arg(duration.pun_duration_max);
-                                    break;
-                                }
-                                duration.pun_duration = timeStep;
-                                m_timeStepCompensation = duration.pun_duration_max - duration.pun_duration;
-                                timeSteps << duration.pun_duration;
-                            } else {
-                                duration.pun_duration = duration.pun_duration_max - m_timeStepCompensation;
-                                timeSteps << duration.pun_duration;;
-                            }
-
-                            cfg->Duration.erase(search);
-                            cfg->Duration.insert(pair<int, ATBDuration>(duration.pun_id, duration));
-
-                        } else { // if (search != cfg->Duration.end()) {
-                           // TODO
-                        }
-                    }
-                } else { // if (carryOverTimeRangeFrom == QTime(0, 0, 0)) {
-                    // TODO
-                }
-            } else { // if (carryOverTimeRangeFrom == carryOverTimeRangeTo) {
-                // TODO
-            }
-        } else { // if (pop_carry_over) {
-            // TODO
-        }
-    } else {
     for (auto[itr, rangeEnd] = cfg->PaymentRate.equal_range(pop_id); itr != rangeEnd; ++itr)
     {
         int const durationId = itr->second.pra_payment_unit_id;
         int const durationUnit = cfg->Duration.find(durationId)->second.pun_duration;
         timeSteps << durationUnit;
     }
-    }
 
     return timeSteps;
 }

library/src/configuration.cpp

@@ -1,7 +1,6 @@
 #include "configuration.h"
 #include "tariff_timebase.h"
 #include "time_range_header.h"
-#include "tariff_timestep_config.h"
 
 #include <QString>
 #include <QDebug>
@@ -23,7 +22,6 @@ MemberType Configuration::IdentifyJsonMember(const char* member_name)
     if (strcmp(member_name, "TimeBase") == 0) return MemberType::TimeBaseType;
     if (strcmp(member_name, "Customer") == 0) return MemberType::CustomerType;
     if (strcmp(member_name, "TimeRange") == 0) return MemberType::TimeRangeType;
-    if (strcmp(member_name, "TimeStepConfig") == 0) return MemberType::TimeStepConfigType;
     else return MemberType::UnknownType;
 }
 
@@ -93,7 +91,6 @@ bool Configuration::ParseJson(Configuration* cfg, const char* json)
         ATBTimeBase TimeBase;
         ATBCustomer Customer;
         ATBTimeRange TimeRange;
-        ATBTimeStepConfig TimeStepConfig;
 
         MemberType mb_type = MemberType::UnknownType;
 
@@ -177,11 +174,6 @@ bool Configuration::ParseJson(Configuration* cfg, const char* json)
                         }
                         break;
                     case MemberType::TimeBaseType:
-                        if (QString(inner_obj_name) == QString("tbase_id")) {
-                            if (k->value.IsInt()) {
-                                TimeBase.tbase_id = k->value.GetInt();
-                            }
-                        } else
                         if (QString(inner_obj_name) == QString("tbase_type")) {
                             if (k->value.IsInt()) {
                                 int timeBase = k->value.GetInt();
@@ -196,18 +188,6 @@ bool Configuration::ParseJson(Configuration* cfg, const char* json)
                             }
                         }
                         break;
-                    case MemberType::TimeStepConfigType:
-                        if (QString(inner_obj_name) == QString("tsconfig_id")) {
-                            if (k->value.IsInt()) {
-                                TimeStepConfig.tsconfig_id = k->value.GetInt();
-                            }
-                        } else
-                        if (QString(inner_obj_name) == QString("tsconfig_label")) {
-                            if (k->value.IsString()) {
-                                TimeStepConfig.tsconfig_label = QString::fromStdString(k->value.GetString());
-                            }
-                        }
-                        break;
                     case MemberType::DailyTicketType:
                         if (QString(inner_obj_name) == QString("daily_ticket_payment_option_id")) {
                             if (k->value.IsInt()) {
@@ -323,18 +303,14 @@ bool Configuration::ParseJson(Configuration* cfg, const char* json)
 						else if (strcmp(inner_obj_name, "pop_max_time") == 0) PaymentOption.pop_max_time = k->value.GetDouble();
 						else if (strcmp(inner_obj_name, "pop_min_price") == 0) PaymentOption.pop_min_price = k->value.GetDouble();
 						else if (strcmp(inner_obj_name, "pop_carry_over") == 0) PaymentOption.pop_carry_over = k->value.GetInt();
-                        else if (strcmp(inner_obj_name, "pop_carry_over_time_range_id") == 0) PaymentOption.pop_carry_over_time_range_id = k->value.GetInt();
                         else if (strcmp(inner_obj_name, "pop_daily_card_price") == 0) PaymentOption.pop_daily_card_price = k->value.GetInt();
                         else if (strcmp(inner_obj_name, "pop_business_hours") == 0) PaymentOption.pop_business_hours = k->value.GetInt();
-                        else if (strcmp(inner_obj_name, "pop_time_step_config") == 0) PaymentOption.pop_time_step_config = k->value.GetInt();
                         this->currentPaymentOptions = PaymentOption;
                         break;
 					case MemberType::DurationType:
 						if (strcmp(inner_obj_name, "pun_id") == 0) Duration.pun_id = k->value.GetInt();
 						else if (strcmp(inner_obj_name, "pun_label") == 0) Duration.pun_label = k->value.GetString();
 						else if (strcmp(inner_obj_name, "pun_duration") == 0) Duration.pun_duration = k->value.GetDouble();
-                        else if (strcmp(inner_obj_name, "pun_duration_min") == 0) Duration.pun_duration_min = k->value.GetInt();
-                        else if (strcmp(inner_obj_name, "pun_duration_max") == 0) Duration.pun_duration_max = k->value.GetInt();
 						break;
 					case MemberType::SpecialDaysWorktimeType:
 						if (strcmp(inner_obj_name, "pedwt_id") == 0) SpecialDaysWorktime.pedwt_id = k->value.GetInt();
@@ -410,22 +386,16 @@ bool Configuration::ParseJson(Configuration* cfg, const char* json)
 					cfg->YearPeriod.insert(pair<int, ATBPeriodYear>(YearPeriod.pye_id, YearPeriod));
 					break;
                 case MemberType::DailyTicketType:
-                    // qCritical() << DailyTicket;
+                    qCritical() << DailyTicket;
                     break;
                 case MemberType::CustomerType:
-                    // qCritical() << Customer;
+                    qCritical() << Customer;
                     break;
                 case MemberType::TimeBaseType:
-                    // qCritical() << TimeBase;
+                    qCritical() << TimeBase;
-                    cfg->TimeBase.insert(pair<int, ATBTimeRange>(TimeBase.tbase_id, TimeBase));
                     break;
                 case MemberType::TimeRangeType:
-                    // qCritical() << TimeRange;
+                    qCritical() << TimeRange;
-                    cfg->TimeRange.insert(pair<int, ATBTimeRange>(TimeRange.time_range_id, TimeRange));
-                    break;
-                case MemberType::TimeStepConfigType:
-                    // qCritical() << TimeStepConfig;
-                    cfg->TimeStepConfig.insert(pair<int, ATBTimeStepConfig>(TimeStepConfig.tsconfig_id, TimeStepConfig));
                     break;
                 default:
 					break;

main/main.cpp

@@ -36,40 +36,10 @@ extern "C" char* strptime(const char* s,
 #define SZEGED                                  (0)
 #define NEUHAUSER_KORNEUBURG                    (0)
 #define NEUHAUSER_LINSINGER_MASCHINENBAU        (0)
-#define NEUHAUSER_NORDISCHES_AUSBILDUNGSZENTRUM (0)
+#define NEUHAUSER_NORDISCHES_AUSBILDUNGSZENTRUM (1)
-#define NEUHAUSER_BILEXA_GALTUER                (1)
 
 
 int main() {
-#if NEUHAUSER_BILEXA_GALTUER==1
-    std::ifstream input("/opt/ptu5/opt/customer_745/etc/psa_tariff/tariff01.json");
-
-    std::stringstream sstr;
-    while(input >> sstr.rdbuf());
-    std::string json(sstr.str());
-
-    Configuration cfg;
-
-    bool isParsed = cfg.ParseJson(&cfg, json.c_str());
-    cout << endl;
-
-    if (isParsed) {
-        QDateTime start = QDateTime::currentDateTime();
-        start.setTime(QTime(start.time().hour(), start.time().minute(), 0));
-        Calculator calculator(start);
-        QList<int> timeSteps = calculator.GetTimeSteps(&cfg);
-        qCritical() << timeSteps;
-
-        for (int i=0; i<timeSteps.size(); ++i) {
-            uint32_t price = calculator.GetPriceForTimeStep(&cfg, timeSteps.at(i));
-            uint32_t duration = calculator.GetDurationForPrice(&cfg, price);
-            qCritical() << "nextTimeStep relative to start:"
-                        << duration << start.addSecs(duration * 60)
-                        << "(price so far:" << price << ")";
-        }
-    }
-#endif
-
 #if NEUHAUSER_NORDISCHES_AUSBILDUNGSZENTRUM==1
     std::ifstream input("/tmp/tariff_naz.json");
 

main/main.pro

@@ -3,8 +3,8 @@ TARGET = main
 
 CONFIG += -std=c++11
 
-QMAKE_CFLAGS = -c -pipe -std=c11 -g -O -Wall -Wno-attributes -W -DDEBUG -D_REENTRANT -fPIC
+QMAKE_CFLAGS = -c -pipe -std=c11 -g -O0 -Wall -Wno-attributes -W -DDEBUG -D_REENTRANT -fPIC
-QMAKE_CXXFLAGS += -std=c++17 -g -O
+QMAKE_CXX_FLAGS += -std=c11
 
 INCLUDEPATH += $$_PRO_FILE_PWD_/../../MOBILISIS-Calculator/library/include/mobilisis/
 INCLUDEPATH += $$_PRO_FILE_PWD_/../../MOBILISIS-Calculator/library/include/rapidjson/

tariffs/tariff_bilexa_galtuer.json

@@ -1,172 +0,0 @@
-{
-  "Project" :   "Bilexa Galtuer",
-  "Version" :   "1.0.0",
-  "Info"    :   "",
-  "Currency": [
-    {
-      "pcu_id": 1,
-      "pcu_sign": "€",
-      "pcu_major": "Euro",
-      "pcu_minor": "Cent",
-      "pcu_active": true
-    }
-  ],
-  "TimeStepConfig" : [
-    {	
-      "tsconfig_id" : 1,
-      "tsconfig_label" : "static",
-      "tsconfig_comment" : "read time steps as given in jsonfiles"		
-    },
-    {
-      "tsconfig_id" : 2,
-      "tsconfig_label" : "dynamic",
-      "tsconfig_comment" : "determine timesteps at runtime"		
-    }
-  ],
-  "PaymentMethod": [
-    {
-      "pme_id": 1,
-      "pme_label": "progressive"
-    },
-    {
-      "pme_id": 2,
-      "pme_label": "degressive"
-    },
-    {
-      "pme_id": 3,
-      "pme_label": "linear"
-    },
-    {
-      "pme_id": 4,
-      "pme_label": "steps"
-    }
-  ],
-  "PaymentOption": [
-    {
-      "pop_id": 1099,
-      "pop_label": "Zone 1",
-      "pop_payment_method_id": 4,
-      "pop_day_end_time": "00:00:00",
-      "pop_day_night_end_time": "00:00:00",
-      "pop_price_night": 0,
-      "pop_min_time": 1,
-      "pop_max_time": 10080,
-      "pop_min_price": 700,
-      "pop_carry_over": 1,
-      "pop_carry_over_time_range_id": 1,
-      "pop_daily_card_price": 0,
-      "pop_business_hours": 0,
-      "pop_time_step_config": 2
-    }
-  ],
-  "TimeBase": [
-    {
-      "tbase_id": 0,
-      "tbase_type": 0,
-      "tbase_type_comment": "time is given as starting from some wall-clock-time",
-      "tbase_label": "absolute time"
-    },
-    {
-      "tbase_id": 1,
-      "tbase_type": 1,
-      "tbase_type_comment": "time is given as starting from 0 minutes",
-      "tbase_label": "relative time"
-    }
-  ],
-  "TimeRange" : [
-    {
-      "time_range_id": 1,
-      "time_range_from": "00:00:00",
-      "time_range_to": "00:01:00",
-      "time_range_comment": "<from>-<to> <= 60secs -> time range is time point <from>"
-    }
-  ],
-  "PaymentRate": [
-    {
-      "pra_payment_option_id": 1099,
-      "pra_payment_unit_id": 1,
-      "pra_price": 700
-    },
-    {
-      "pra_payment_option_id": 1099,
-      "pra_payment_unit_id": 2,
-      "pra_price": 1400
-    },
-    {
-      "pra_payment_option_id": 1099,
-      "pra_payment_unit_id": 3,
-      "pra_price": 2100
-    },
-    {
-      "pra_payment_option_id": 1099,
-      "pra_payment_unit_id": 4,
-      "pra_price": 2800
-    },
-    {
-      "pra_payment_option_id": 1099,
-      "pra_payment_unit_id": 5,
-      "pra_price": 3500
-    },
-    {
-      "pra_payment_option_id": 1099,
-      "pra_payment_unit_id": 6,
-      "pra_price": 4200
-    },
-    {
-      "pra_payment_option_id": 1099,
-      "pra_payment_unit_id": 7,
-      "pra_price": 4900
-    }
-  ],
-  "Duration": [
-    {
-      "pun_id": 1,
-      "pun_label": "Day 1",
-      "pun_duration_min": 1,
-      "pun_duration_max": 1440,
-      "pun_duration": 0
-    },
-    {
-      "pun_id": 2,
-      "pun_label": "Day 2",
-      "pun_duration_min": 2880,
-      "pun_duration_max": 2880,
-      "pun_duration": 2880
-    },
-    {
-      "pun_id": 3,
-      "pun_label": "Day 3",
-      "pun_duration_min": 4320,
-      "pun_duration_max": 4320,
-      "pun_duration": 4320
-    },
-    {
-      "pun_id": 4,
-      "pun_label": "Day 4",
-      "pun_duration_min": 5760,
-      "pun_duration_max": 5760,
-      "pun_duration": 5760
-    },
-    {
-      "pun_id": 5,
-      "pun_label": "Day 5",
-      "pun_duration_min": 7200,
-      "pun_duration_max": 7200,
-      "pun_duration": 7200
-    },
-    {
-      "pun_id": 6,
-      "pun_label": "Day 6",
-      "pun_duration_min": 8640,
-      "pun_duration_max": 8640,
-      "pun_duration": 8640
-    },
-    {
-      "pun_id": 7,
-      "pun_label": "Day 7",
-      "pun_duration_min": 10080,
-      "pun_duration_max": 10080,
-      "pun_duration": 10080
-    }
-  ]
-}

tariffs/tariff_naz.json

@@ -31,15 +31,11 @@
   ],
   "TimeBase": [
     {
-      "tbase_id": 0,
       "tbase_type": 0,
-      "tbase_type_comment": "time is given as starting from some wall-clock-time",
       "tbase_label": "absolute time"
     },
     {
-      "tbase_id": 1,
       "tbase_type": 1,
-      "tbase_type_comment": "time is given as starting from 0 minutes",
       "tbase_label": "relative time"
     }
   ],

vue/chapter2.html

@@ -0,0 +1,31 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>Greetings friend</title>
+</head>
+<body>
+<div class="container">
+    <h2>Hello {{name}}</h2>
+    <form class="form-inline">
+        <div class="form-group">
+            <label for="name">Enter your name:</label>
+            <!-- binded input to 'name' -->
+            <input v-model="name" type="text" class="form-control" id="name" placeholder="Name">
+        </div>
+    </form>
+</div>
+<!-- displays all data within Vue instance filtered through JSON -->
+<pre>{{ $data | json }}</pre>
+</body>
+<!-- cdn that contains all contents of Vue.js -->
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    new Vue({
+        el: 'body',
+        data: {
+            //empty variable each binded to input
+            name: "",
+        },
+    })
+</script>
+</html>

vue/chapter3.html

@@ -0,0 +1,37 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>Greetings user</title>
+</head>
+<body>
+<div class="container">
+    <!-- the || is the logical operator OR -->
+    <div v-if="gender== 'male' || gender == 'female'">
+        <h1>Hello,
+            <!-- render span if 'gender' equals to 'male' -->
+            <span v-show="gender == 'male'">Mister {{name}}.</span>
+            <!-- render span if 'gender' equals to 'female' -->
+            <span v-if="gender == 'female'">Miss {{name}}.</span>
+        </h1>
+    </div>
+    <!-- v-else immediately follows v-if block to work -->
+    <h1 v-else>So you can't decide. Fine!</h1>
+    <!-- show inputs -->
+    <label for="gender">Enter your gender:</label>
+    <input v-model="gender" class="form-control" id="gender"></input>
+    <label for="name">Enter your name:</label>
+    <input v-model="name" class="form-control" id="name"></input>
+</div>
+<pre>{{ $data | json }}</pre>
+</body>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    new Vue({
+        el: 'body',
+        data: {
+            gender: "female",
+            name: "Universe",
+        },
+    })
+</script>
+</html>

vue/chapter4.html

@@ -0,0 +1,47 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>People of Gaul</title>
+</head>
+<body>
+<div class="container">
+    <h1>People of Gaul</h1>
+    <ul class="list-group">
+        <!-- render filtered array items using 'v-for' -->
+        <!-- 'orderBy' is a built in filter used for ordering by 'age'-->
+        <li v-for="person in people | orderBy 'age' " class="list-group-item">
+            {{person.name}} {{person.age}}
+        </li>
+    </ul>
+    <h1>"Old" People of Gaul</h1>
+    <ul class="list-group">
+        <!-- render filtered array items -->
+        <li v-for="person in people | old " class="list-group-item">
+            <!-- custom filter 'old' -->
+            {{person.name}} {{person.age}}
+        </li>
+    </ul>
+</div>
+<pre>{{ $data | json }}</pre>
+</body>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    //custom filter 'old' returns an array of items that satisfy the given condition
+    Vue.filter('old', function (people) {
+        return people.filter(function (item) {
+            return item.age > 55;
+        });
+    })
+    new Vue({
+        el: 'body',
+        data: {
+            people: [
+                {name: "Obelix", age: 31},
+                {name: "Asterix", age: 32},
+                {name: "Majestix", age: 62},
+                {name: "Julius Caesar", age: 56},
+            ]
+        },
+    })
+</script>
+</html>

vue/chapter5.html

@@ -0,0 +1,59 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>The Elections</title>
+</head>
+<!-- listening for keyboard event -->
+<body @keyup.c="clear">
+<div class="container">
+    <h1>People of Vue</h1>
+    <ul class="list-group">
+        <li v-for="candidate in candidates" class="list-group-item">
+            {{candidate.name}} {{candidate.votes}}
+            <!-- increase votes 'on:click'-->
+            <button class="btn btn-default" @click="candidate.votes++">Vote</button>
+        </li>
+    </ul>
+
+    <!-- display the name of the 'mayor' using a computed property-->
+    <h2>Our mayor is {{mayor.name}}!</h2>
+
+    <pre>{{ $data | json }}</pre>
+    <pre>{{ mayor | json }}</pre>
+</div>
+</body>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    var vm = new Vue({
+        el: 'body',
+        data: {
+            candidates: [
+                {name: "Mr. Black", votes: 140},
+                {name: "Mr. White", votes: 135},
+                {name: "Mr. Pink", votes: 145},
+                {name: "Mr. Brown", votes: 130},
+            ]
+        },
+        computed: {
+            mayor: function () {
+                //first we sort the array descending
+                var candidatesSorted = this.candidates.sort(function (a, b) {
+                    return b.votes - a.votes;
+                });
+                //the mayor will be the first item
+                return candidatesSorted[0];
+            }
+        },
+        methods: {
+            //this method runs when the key 'c' is pressed
+            clear: function () {
+                //Turn votes of all candidate to 0 using map() function.
+                this.candidates = this.candidates.map(function (candidate) {
+                    candidate.votes = 0;
+                    return candidate;
+                })
+            }
+        }
+    })
+</script>
+</html>

vue/chapter6.html

@@ -0,0 +1,80 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>Horse-drawn Chariots</title>
+</head>
+<body>
+<div class="container">
+    <h1>Chariot shopping</h1>
+    <ul class="list-group">
+        <!-- '.sync' ensures two-way binding between child's property and parent's one -->
+        <chariot v-for="chariot in chariots" :chariot="chariot" :selected.sync="selected"></chariot>
+    </ul>
+    <pre>{{ $data | json }}</pre>
+</div>
+<!-- component template -->
+<template id="chariot-template">
+    <li class="list-group-item">
+        <h4>"{{ chariot.name }}" chariot has <strong>{{ chariot.horses }}</strong> horse(s)!</h4>
+        <!-- 'disabled' attribute is applied conditionally -->
+        <button @click="rideChariot(chariot)" class="btn btn-primary" :disabled="isSelectedChariot">
+            {{ action }}
+        </button>
+    </li>
+</template>
+<!-- end component template -->
+</body>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    Vue.component('chariot', {
+        props: ['chariot', 'selected'],
+        template: "#chariot-template",
+        methods: {
+            rideChariot: function (chariot) {
+                this.selected = chariot;
+            },
+        },
+        computed: {
+            //is true when the chariot has more horses than the selected one
+            hasMoreHorses: function () {
+                return this.selected.horses < this.chariot.horses
+            },
+            //is true when the chariot is the selected one
+            isSelectedChariot: function () {
+                return this.selected.name == this.chariot.name
+            },
+            //is true when there is no chariot selected
+            noChariot: function () {
+                return this.selected.name == null;
+            },
+            //define the action for each chariot
+            action: function () {
+                if (this.noChariot) {
+                    action = 'Pick Chariot'
+                } else if (this.isSelectedChariot) {
+                    action = 'Riding!'
+                } else if (this.hasMoreHorses) {
+                    action = 'Hire Horses'
+                } else {
+                    action = 'Dismiss Horses'
+                }
+                return action;
+            }
+
+        }
+    });
+    var vm = new Vue({
+        el: 'body',
+        data: {
+            chariots: [
+                {name: "Olympus", horses: 4},
+                {name: "Sagitta", horses: 3},
+                {name: "Icarus", horses: 2},
+                {name: "Abraxas", horses: 1},
+            ],
+            //the currently selected 'chariot'
+            selected: {}
+        },
+    })
+</script>
+</html>

vue/chapter7.html

@@ -0,0 +1,35 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>Paint Me</title>
+</head>
+<!-- binding body style to an object -->
+<body :style="bgColor">
+    <div id="app">
+      <div class="container">
+        <h1>Paint this background!</h1>
+        <input type="color" v-model="bgColor.backgroundColor" />
+      </div>
+    </div>
+</body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    new Vue({
+      el: 'body',
+      data: {
+        bgColor: {
+          backgroundColor: "#00cc00"
+        }
+      }
+    });
+</script>
+<style type="text/css">
+    .centered {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        margin-top: -50px;
+        margin-left: -100px;
+    }
+</style>
+</html>

vue/movies.html

@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>movies</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+</head>
+
+<body>
+<main>
+    <div class="container">
+        <h1>movies</h1>
+        <div id="v-app">
+            <table class="table table-striped">
+                <tr>
+                    <th>#</th>
+                    <th>Title</th>
+                    <th>Director</th>
+                    <th>Actions</th>
+                </tr>
+                <tr v-for="movie in movies" is="movie" :movie="movie"></tr>
+            </table>
+            <template id="template-movie-raw">
+                <tr>
+                    <td>
+                        {{movie.id}}
+                    </td>
+                    <td class="col-md-6">
+                        <input v-if="movie.editing" v-model="movie.title" class="form-control">
+                        </input>
+                        <!--in other occasions show the movie title-->
+                            <span v-else>
+                                {{movie.title}}
+                            </span>
+                    </td>
+                    <td>
+                        <input v-if="movie.editing" v-model="movie.director" class="form-control">
+                        </input>
+                        <!--in other occasions show the movie director-->
+                            <span v-else>
+                                {{movie.director}}
+                            </span>
+                    </td>
+                    <td>
+                        <div class="btn-group" v-if="!movie.editing">
+                            <button @click="editMovie(movie)" class="btn btn-default">Edit</button>
+                            <button @click="deleteMovie(movie)" class="btn btn-danger">Delete</button>
+                        </div>
+                        <div class="btn-group" v-else>
+                            <!--If the movie is taken from the db then it will have an id-->
+                            <button v-if="movie.id" class="btn btn-primary" @click="updateMovie(movie)">Update movie
+                            </button>
+                            <!--If the movie is new we want to store it-->
+                            <button v-else class="btn btn-success" @click="storeMovie(movie)">Save New movie</button>
+                            <!--Always show cancel-->
+                            <button @click="movie.editing=false" class="btn btn-default">Cancel</button>
+                        </div>
+                    </td>
+                </tr>
+            </template>
+            <p class="lead">Here's a list of all your movies.
+                <button @click="createMovie()" class="btn btn-primary">Add a new one?</button>
+            </p>
+            <pre>{{ $data | json }}</pre>
+        </div>
+    </div>
+</main>
+
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
+<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script>
+<script src='/js/app.js' type="text/javascript"></script>
+</body>
+</html>